/*
 * Minimal CSS for presentation that theme.json / block supports cannot express
 * (pseudo-elements, transforms, CSS counters). Everything else lives in theme.json.
 */

/* Button: arrow glyph + hover lift. Pseudo-element and transform/box-shadow
   transitions aren't exposed by the button block's theme.json supports. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-shadow: 0 8px 18px rgba(15, 137, 36, 0.24), 0 2px 0 #096719;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-block-button__link::after {
	content: "\203A";
	font-size: 24px;
	font-weight: 400;
	line-height: 0.7;
	transition: transform 0.2s ease;
}
.wp-block-button__link:hover {
	box-shadow: 0 11px 22px rgba(15, 137, 36, 0.3), 0 2px 0 #075516;
	transform: translateY(-2px);
}
.wp-block-button__link:hover::after {
	transform: translateX(3px);
}
.wp-block-button__link:active {
	box-shadow: 0 4px 10px rgba(15, 137, 36, 0.22);
	transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-block-button__link::after {
		transition: none;
	}
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* Header: utility-bar must sit flush against header-inner with zero gap,
   matching source. Core's flow-layout blockGap adds margin-top to the second
   child in a flow container by default — same mechanism that doubled the
   footer paragraph spacing above. */
.site-header .utility-bar {
	margin-top: 0 !important;
}
.utility-bar p {
	margin: 0 !important;
}
.utility-bar {
	display: flex !important;
	align-items: center !important;
}
.utility-bar .shell {
	align-items: center !important;
}
.utility-bar__breadcrumbs {
	margin: 0;
	font-size: 14px;
}
.utility-bar__breadcrumbs a {
	font-weight: 300;
	text-decoration: underline;
}

/* Shell: the source's actual width-clamp mechanism — at most 1080px, but
   never closer than 20px to the viewport edge, even below 1080px wide.
   WP's "constrained" layout only sets max-width + auto margins, which
   collapses to zero gutter once the viewport is narrower than contentSize,
   so it can't reproduce this on its own. */
.shell {
	width: min(1080px, calc(100% - 40px));
	margin-inline: auto;
}

/* Feature grid + icon card. */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 28px 0;
}
/* WP's global-styles blockGap rule gives every child but the first a
   margin-top (24px) meant for vertically-stacked flow content — in a grid
   row, that pushes the 2nd/3rd card in each row down relative to the 1st,
   so their icons/content don't line up even though the grid itself already
   stretches all three to equal height. Same blockGap fight as
   .cf7-quote-form/.quote-form-banner elsewhere in this file; confirmed via
   computed margin-top (0 on card 1, 24px on cards 2 and 3) before fixing. */
.feature-grid > * {
	margin-top: 0 !important;
}
.feature-card {
	height: 100%;
	padding: 28px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.feature-card img {
	width: 76px;
	height: 76px;
	margin-bottom: 20px;
	object-fit: contain;
}
.feature-card h4 {
	font-size: 22px;
}
@media (max-width: 980px) {
	.feature-grid {
		grid-template-columns: 1fr;
	}
}

/* About Us — principles grid + services links (about-us page only). */
.about-principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 28px 0;
}
.about-principles article {
	padding: 28px;
	border-top: 5px solid var(--wp--preset--color--green);
	background: #fff;
}
.about-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 30px 0;
}
/* Same blockGap-vs-grid-row fight as .feature-grid above: WP's global
   margin-top on every child but the first was offsetting cards 2 and 3 in
   each row relative to card 1. */
.about-principles > *,
.about-services > * {
	margin-top: 0 !important;
}
.about-services a {
	display: block;
	padding: 25px;
	border-radius: 18px;
	background: #fff;
	color: var(--wp--preset--color--ink, #0f0f0f);
	text-align: center;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}
.about-services img {
	width: 90px;
	height: 90px;
	margin: 0 auto 14px;
}
.about-services h4 {
	margin: 0;
}
@media (max-width: 980px) {
	.about-principles,
	.about-services {
		grid-template-columns: 1fr;
	}
}

/* Brand strip + insurer strip. */
.brand-strip {
	min-height: 30px;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: 14px;
}
.brand-strip .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
}
.brand-strip a {
	color: #fff;
}
.brand-strip p {
	margin: 0 !important;
}
.insurer-strip {
	height: 57px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.insurer-strip img {
	width: 600px;
	max-width: 100%;
}
@media (max-width: 600px) {
	.brand-strip {
		font-size: 12px;
		letter-spacing: -0.05em;
	}
	.utility-bar {
		letter-spacing: -0.05em;
	}
	.utility-bar__breadcrumbs {
		font-size: 12px;
	}
	.insurer-strip {
		padding: 0 15px;
	}
}

/* Quote example card. */
.quote-example {
	overflow: hidden;
	border: 1px solid #eaebeb;
	background: #fff;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
}
.quote-example h3 {
	margin: 0 !important;
	padding: 18px 26px 12px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: 29px;
}
.quote-example p {
	margin: 0 !important;
	padding: 18px 26px;
	line-height: 2;
}
@media (max-width: 600px) {
	.quote-example h3 {
		font-size: 24px;
	}
}

/* Quote card: lead-gen teaser with a step-progress line and policy dropdown.
   No core block supports a <select>, so the whole card is Custom HTML. */
.quote-card {
	overflow: hidden;
	border: 1px solid #d7ded8;
	border-radius: 3px;
	box-shadow: 0 14px 34px rgba(16, 45, 22, 0.13);
}
.quote-card-head {
	padding: 27px 28px 25px;
	background: var(--wp--preset--color--green);
	color: #fff;
}
.quote-card-head h3 {
	margin: 0 !important;
	color: #fff;
	text-align: left;
}
.quote-card-body {
	padding: 25px 28px 28px;
}
.quote-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	color: #222;
	font-weight: 700;
}
.quote-progress small,
.quote-progress strong {
	display: block;
}
.quote-card label {
	display: block;
	width: 100%;
	margin: 0 0 6px;
}
.quote-card select {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0 0 18px;
	border: 1px solid #ccc;
	background: #fff;
	padding: 0 12px;
	font: inherit;
}
.quote-card-body > .wp-block-button__link {
	margin-top: 18px;
}
@media (max-width: 600px) {
	.quote-card-head,
	.quote-card-body {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Accident-only page: dark hero variant, example-quote row, inline video,
   personalised-quote CTA strip, and the equal-height icon-card grid. */
.site-hero.accident-hero {
	background: #010103;
	color: #fff;
}
.site-hero.accident-hero .hero-heading {
	color: #fff;
}
@media (max-width: 900px) {
	.accident-hero .hero-content {
		text-align: center;
	}
}
.quote-examples {
	gap: 24px;
	align-items: stretch;
	padding-top: 0;
	padding-bottom: 0;
}
.example-quotes-heading {
	text-align: center;
	margin-bottom: 0 !important;
}
.source-video video,
.source-video iframe {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}
.personalised-quote {
	text-align: center;
}
.personalised-quote h3 {
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom: 8px !important;
}
.quote-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}
@media (max-width: 600px) {
	.quote-cta-actions {
		flex-direction: column;
	}
}
.equal-height-cards {
	align-items: stretch;
}
.equal-height-cards > .source-col {
	display: flex;
}
.equal-height-cards .feature-card {
	flex: 1;
	height: auto;
}

/* Case feature: image + text, side by side. Image column deliberately kept
   narrow (~1/3) so the card reads as a text-led article link, not a photo
   feature — user-requested change from the original 50/50 split. */
.case-study {
	display: grid;
	grid-template-columns: 1fr 2fr;
	overflow: hidden;
	/* !important needed: WP's global-styles blockGap rule sets
	   margin-block-start via a :where() (zero-specificity) selector, but it
	   still wins over this plain-class margin-top in practice, same fight as
	   the .shell.case-study blockGap override above. */
	margin-top: 32px !important;
	margin-bottom: 50px !important;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.case-study img {
	width: 100%;
	height: 100%;
	min-height: 330px;
	object-fit: cover;
}
.case-study > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 42px;
}
.case-kicker {
	margin-bottom: 10px !important;
	color: var(--wp--preset--color--green);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.case-study a {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
@media (max-width: 980px) {
	.case-study {
		grid-template-columns: 1fr;
	}
	.case-study img {
		max-height: 420px;
	}
	.case-study > div {
		padding: 32px;
	}
}
@media (max-width: 600px) {
	.case-study {
		border-radius: 20px;
	}
	.case-study img {
		min-height: 230px;
	}
	.case-study > div {
		padding: 25px;
	}
}

/* Hero (photo + logo variants). Ported close to verbatim from the source
   stylesheet: a CSS-grid cell-stacking technique overlays a content-sized
   translucent text band on the mobile image (not a full-image tint), which
   core/cover's overlay model can't reproduce — this needs the same custom
   grid approach the source itself uses, not a native block setting. */
.site-hero {
	background: #f1f2f4;
	/* Hero sections are nested inside the page template's own constrained
	   <main>, so without this they inherit max-width:1080px like any other
	   block instead of spanning the viewport the way brand-strip/insurer-strip
	   do via their "align":"full" attribute. Same full-bleed technique core's
	   own .alignfull uses, applied here since the hero patterns don't carry
	   that attribute themselves. */
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.site-hero.accident-hero {
	background: #010103;
	color: #fff;
}
.site-hero.accident-hero .hero-heading {
	color: #fff;
}
/* quotes/accident-only-construction only — confirmed against the live page's
   own computed styles (right-aligned, uppercase), which differs from
   accident-only's own hero heading (left-aligned, not uppercase) even
   though both reuse .accident-hero/.hero-heading; that's a genuine
   per-page difference on the live site, not something to generalise onto
   the shared classes. */
.quote-hero-heading {
	text-align: right;
	text-transform: uppercase;
}
/* General CTA row: buttons centered within the row. core/buttons defaults to
   left-aligned unless a justifyContent is set per-instance, so this needs
   to be a blanket class rule matching source rather than a per-block
   attribute repeated on every single CTA. */
.cta-row {
	justify-content: center !important;
	/* Source's `.source-page .cta-row` gives every CTA row 20px of vertical
	   breathing room (padding, not margin, so it doesn't collapse). That
	   ancestor scoping never applies here — `.source-page` isn't used
	   anywhere in this theme's markup — so the padding silently never made
	   it into the migration. Most of the time a preceding `.source-row`'s
	   own padding hid the gap, but a cta-row that's the last element in its
	   `.source-section` (as on keyman-insurance and the other
	   business-protection pages) sat flush against the next section's
	   `.split`/`.prose` border-top with zero space. Button-row-specific
	   overrides below (hero, quote-form, blog-content) all set their own
	   explicit padding with higher specificity, so they're unaffected. */
	padding: 20px 0;
}

.cta-row.hero-mobile-cta {
	display: none;
}

@media (min-width: 981px) {
	.site-hero {
		padding: 0 20px;
	}
	.site-hero .hero-layout {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: min(1080px, 100%);
		height: auto;
		min-height: 0;
		margin: 0 auto;
		gap: 0;
		padding: 0;
		align-items: stretch;
	}
	.site-hero .hero-layout .hero-media {
		display: block;
		position: relative;
		min-width: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		margin: 0;
		padding: 0;
	}
	.site-hero .hero-layout .hero-media img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		object-fit: cover;
		object-position: center;
	}
	.site-hero .hero-layout > .hero-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-width: 0;
		padding: 32px;
		text-align: left;
	}
	.site-hero .hero-layout .hero-heading {
		max-width: none;
		margin: 0 0 18px !important;
		font-size: clamp(2rem, 2.4vw, 2.75rem);
		line-height: 1.15;
		text-align: left;
	}
	.site-hero .hero-content p {
		margin: 0 0 22px !important;
		color: inherit;
		font-size: 18px;
		line-height: 1.5;
	}
	.site-hero .hero-content .cta-row {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		justify-content: flex-start;
	}
	.site-hero--logo .hero-layout {
		grid-template-columns: 3fr 2fr;
	}
	.site-hero--logo .hero-layout .hero-media {
		aspect-ratio: 2 / 1;
	}
	.site-hero--logo .hero-layout .hero-media img {
		object-fit: cover;
		padding: 0;
	}
	.site-hero--logo .hero-layout > .hero-content {
		padding: 24px;
	}
	.site-hero--logo .hero-layout .hero-heading {
		font-size: clamp(1.5rem, 2.2vw, 2rem);
		margin-bottom: 16px !important;
	}
	.site-hero--logo .hero-content p {
		font-size: 16px;
		line-height: 1.3;
		margin-bottom: 16px !important;
	}
}

@media (max-width: 980px) {
	.site-hero .hero-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		height: auto;
		gap: 0;
		margin: 0;
		padding: 0;
		align-items: start;
	}
	.site-hero .hero-layout > .hero-media {
		display: block;
		position: relative;
		grid-area: 1 / 1;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 3 / 2;
		margin: 0;
		padding: 0;
	}
	.site-hero .hero-layout .hero-media img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: none;
		object-fit: cover;
	}
	.site-hero--logo .hero-layout > .hero-media {
		aspect-ratio: 2 / 1;
	}
	.site-hero--logo .hero-layout .hero-media img {
		object-fit: cover;
		padding: 0;
	}
	.site-hero .hero-layout > .hero-content {
		display: contents;
	}
	.site-hero .hero-layout .hero-title {
		display: block;
		grid-area: 1 / 1;
		align-self: end;
		z-index: 1;
		padding: 18px 20px;
		background: rgba(23, 23, 23, 0.65);
		color: #fff;
	}
	.site-hero .hero-layout .hero-title .hero-heading {
		margin: 0 !important;
		padding: 0;
		background: transparent;
		color: #fff;
		font-size: clamp(1.25rem, 4vw, 1.75rem);
		line-height: 1.15;
		text-align: left;
		overflow-wrap: break-word;
	}
	.site-hero .hero-title p {
		margin: 8px 0 0 !important;
		padding: 0;
		color: #fff;
		font-size: 16px;
		line-height: 1.3;
		text-align: left;
	}
	.site-hero .hero-content > .button {
		justify-self: center;
		width: fit-content;
		max-width: calc(100% - 40px);
		margin: 24px auto !important;
		text-align: center;
	}
	.site-hero .hero-content .cta-row {
		display: flex;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 24px 20px;
		justify-content: center;
	}
	.site-hero .hero-content .cta-row .button {
		margin: 0 !important;
		text-align: center;
	}
	.hero-responsive-cta .hero-content .button,
	.hero-responsive-cta .hero-content .cta-row {
		display: none;
	}
	.cta-row.hero-mobile-cta {
		display: flex;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 24px 20px;
		justify-content: center;
	}
	.hero-mobile-cta .button {
		margin: 0 !important;
		text-align: center;
	}
	.site-hero--logo .hero-layout .hero-title {
		grid-area: 2 / 1;
		align-self: stretch;
		background: #171717;
	}
}

@media (max-width: 600px) {
	.site-hero .hero-layout .hero-title {
		padding-inline: 15px;
	}
	.site-hero .hero-layout .hero-title .hero-heading {
		padding: 0;
	}
}

/* Hero grid variant: used on the business-protection pages (keyman,
   shareholder-protection) instead of hero-layout — grey background, image
   left/text right, right-aligned copy with a lighter subtitle line. Confirmed
   against the live site (the static checkpoint lost the heading's <span>).
   Still uses "hero-content" + "hero-responsive-cta" so the existing
   mobile CTA show/hide mechanism keeps working unchanged. */
.site-hero.hero {
	background: #eaebeb;
}
.hero-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	align-items: stretch;
}
.hero-grid .hero-image {
	margin: 0;
}
.hero-grid .hero-image img {
	width: 100%;
	/* Deliberately deviates from source (which used 432px here): shrunk to
	   360px to match the income-protection pages' .hero-media height
	   (540px-wide column at the shared 3:2 aspect ratio), per explicit
	   request to make business-protection heroes the same size. */
	height: 360px;
	object-fit: cover;
}
.hero-grid .hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	padding: 30px 0 30px 48px;
	text-align: right;
}
.hero-grid .hero-copy .hero-heading {
	max-width: 390px;
	text-align: right;
}
.hero-grid .hero-copy .hero-heading span {
	display: block;
	font-size: 18px;
	font-weight: 400;
}
@media (max-width: 980px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.hero-grid .hero-image img {
		height: auto;
		max-height: 480px;
	}
	.hero-grid .hero-copy {
		align-items: center;
		padding: 28px 20px 34px;
		text-align: center;
	}
	.hero-grid .hero-copy .hero-heading {
		max-width: 680px;
		text-align: center;
	}
	/* Override the hero-photo dark-overlay assumption baked into the shared
	   .hero-title selectors — this hero variant has a light grey background,
	   not a dark translucent band, so its text must stay dark at this width. */
	.hero-grid .hero-title .hero-heading,
	.hero-grid .hero-title p {
		color: var(--wp--preset--color--ink, #0f0f0f) !important;
	}
}
@media (max-width: 600px) {
	.hero-grid .hero-image img {
		min-height: 250px;
	}
}

/* "shell"-family content classes: the business-protection pages (keyman,
   shareholder-protection) use a different, non-source-row layout system
   ported as its own set of named classes rather than forced into
   source-row/source-col. */
.toc {
	background: #fff;
	border-left: 5px solid var(--wp--preset--color--green);
	padding: 22px 28px;
}
.toc h3 {
	font-size: 22px;
	margin-bottom: 10px !important;
}
.toc li {
	margin: 4px 0;
}
@media (max-width: 600px) {
	.toc {
		padding: 20px;
	}
}
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
	padding: 36px 0;
	border-top: 1px solid #e5e5e5;
}
.split img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}
/* .split-reverse's order:2 is scoped to max-width:980px in source (verified
   directly against the live static checkpoint's parsed stylesheet, not just
   the minified text — a flat text search had made it look unconditional).
   At desktop, split-reverse relies on natural DOM order alone: source puts
   its image first in the HTML and it just renders on the left, with no
   override. Wrapping this in the same breakpoint, since applying it
   unconditionally (as an earlier version of this rule did) incorrectly
   flips the image to the right at desktop widths too. */
@media (max-width: 980px) {
	.split-reverse img,
	.split-reverse .wp-block-image,
	.split-reverse .green-panel {
		/* order only affects actual grid items (.split's direct children) —
		   in source's raw HTML that's the <img> itself, but wp:image always
		   wraps it in a <figure class="wp-block-image">, so targeting just
		   "img" here was a no-op: the figure (the real grid item) was left
		   at the default order:0, so split-reverse never reversed anything
		   on mobile either. Adding .wp-block-image fixes it without
		   removing the original "img" selector, which still correctly
		   matches the few places this class is used on bare,
		   non-block-wrapped images. */
		order: 2;
	}
}
/* source-row/source-col version of split-reverse (used by
   compare-income-protection-private-medical and keyman-insurance): at
   desktop this class puts the image in the first/left column with no order
   override needed (natural DOM order), but when the columns stack on mobile
   that would put the image above the text — source always keeps text first
   when stacked, regardless of which side the image was on at desktop, so
   the image column needs pushing to the back here. This rule was missing
   entirely from the migration; without it split-reverse sections showed the
   image on top on mobile instead of below, unlike every other 2-column
   image+text row on the site. */
@media (max-width: 900px) {
	.source-row.split-reverse > .source-col:first-child {
		order: 2;
	}
}
@media (max-width: 980px) {
	.split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}
@media (max-width: 600px) {
	.split {
		gap: 20px;
		padding: 30px 0;
	}
}
.prose {
	padding: 28px 0;
	border-top: 1px solid #e5e5e5;
}
@media (max-width: 600px) {
	.prose {
		padding: 30px 0;
	}
}
.two-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	padding: 25px 0;
}
/* Same blockGap-vs-grid-row fight as .feature-grid/.about-principles/
   .about-services above: WP's global margin-top on the 2nd card was
   offsetting it below the 1st, so even though the grid row already
   stretches both to equal height, their tops (and therefore their h4 title
   bars) didn't line up. */
.two-cards > * {
	margin-top: 0 !important;
}
.two-cards article {
	overflow: hidden;
	padding: 0;
	border-radius: 18px;
	box-shadow: 0 9px 24px rgba(0, 0, 0, 0.09);
}
.two-cards article > h4 {
	margin: 0 !important;
	padding: 17px 24px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: 22px;
}
.two-cards article > h4 ~ * {
	margin-left: 24px;
	margin-right: 24px;
}
.two-cards article > h4 + * {
	margin-top: 22px !important;
}
.two-cards article > *:last-child {
	margin-bottom: 24px !important;
}
.two-cards + .two-cards {
	align-items: start;
}
.two-cards + .two-cards article:first-child {
	overflow: visible;
	padding: 0;
	background: transparent;
	box-shadow: none;
}
.two-cards + .two-cards article:first-child > * {
	margin-left: 0;
	margin-right: 0;
}
.two-cards + .two-cards article:first-child > *:last-child {
	margin-bottom: 0 !important;
}
@media (max-width: 980px) {
	.two-cards {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.two-cards {
		gap: 18px;
	}
}
.price-section {
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 30px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
}
.price-section h3 {
	margin-bottom: 5px !important;
}
@media (max-width: 600px) {
	.price-section {
		width: calc(100% - 30px);
		padding: 20px 16px;
		border-radius: 20px;
	}
}
/* Source renders .disclaimer as a plain small paragraph everywhere it
   appears (keyman-insurance/calculator, shareholder-protection, …) — no
   background or padding box, confirmed via computed styles on both live
   pages. The background/padding below was a pre-existing mismatch versus
   source, not something added intentionally for a different context. */
.disclaimer {
	margin-top: 25px;
	font-size: 13px;
	line-height: 1.55;
	color: #666;
}
.small {
	font-size: 13px;
	line-height: 1.5;
}
.section-heading {
	padding-top: 38px;
}
.policy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 25px 0 38px;
}
.policy-card {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.policy-card > .wp-block-image {
	/* Core's wp:image figure renders box-sizing:content-box, so
	   width:100%+padding:32px below was adding 64px beyond the 220px grid
	   column on each axis, overflowing and getting clipped by .policy-card's
	   overflow:hidden. */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 280px;
	margin: 0;
	padding: 32px;
	background: #eef0f1;
}
.policy-card > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.policy-card > .wp-block-group {
	padding: 26px;
}
.policy-card h3 {
	font-size: 25px;
}
.policy-card ul {
	padding-left: 20px;
}
@media (max-width: 600px) {
	.policy-card {
		display: block;
	}
	.policy-card > .wp-block-image {
		width: 100%;
		height: 180px;
		min-height: 0;
		padding: 24px;
	}
	.policy-card > .wp-block-group {
		padding: 22px;
	}
	.policy-card h3 {
		font-size: 22px;
	}
}
.faq-section {
	padding: 38px 0;
}
.faq-section > h2 {
	margin-bottom: 28px !important;
}

/* Insurer social links row. */
.insurer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0;
}
.insurer-social a {
	display: flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
}
.insurer-social img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	filter: invert(1);
}

/* Small secondary insurer logo shown above an insurer's contact details
   (used where a provider's own small logo sits beside the main hero image,
   e.g. AIG) — distinct from .source-image's normal full-width sizing. */
.insurer-logo-small {
	width: 150px;
	max-width: 100%;
	margin: 0 auto 28px;
}
.insurer-logo-small img {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Top-level page sections sit flush against each other with zero gap —
   confirmed against source (hero/brand-strip/insurer-strip/first content
   section all touch exactly). Spacing comes entirely from each section's own
   internal padding, not gaps between them. Same flow-layout blockGap
   mechanism as the earlier header/footer fixes, just at the page-content
   level this time.
   NOTE: .shell.case-study is deliberately NOT in this list — unlike the
   other top-level sections, source's own CSS gives .case-study a real
   margin-top:32px/margin-bottom:50px (see its rule below) and it's never
   adjacent to a hero/brand-strip/insurer-strip on any page, so zeroing its
   margin here was overriding that intentional spacing for no benefit. */
.site-hero,
.brand-strip,
.insurer-strip,
.cta-row.hero-mobile-cta,
.source-section {
	margin-top: 0 !important;
}
/* <main> itself sits between the header and footer template parts at the
   site root and was picking up the same blockGap margin-top. */
.wp-site-blocks > main {
	margin-top: 0 !important;
}

/* Source-row grid system: the general content layout used across most
   content pages (not just one). Matches source's exact 900px breakpoint and
   gap values — core/columns stacks at a different, fixed breakpoint, so this
   needs its own CSS rather than core's layout. */
.source-page {
	background: var(--wp--preset--color--page);
}
.source-section {
	padding: 0 20px;
}
.source-row {
	display: grid;
	width: min(1120px, 100%);
	margin: 0 auto;
	gap: 42px;
	padding: 28px 0;
	align-items: center;
}
.source-cols-1 {
	grid-template-columns: minmax(0, 1fr);
}
.source-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.source-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.source-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.source-col {
	min-width: 0;
	/* The row already spaces columns via `gap`; without this, the blockGap
	   mechanism still gives the second+ column a margin-top meant for
	   stacked flow content, pushing it down within the grid cell even
	   under align-items:start. */
	margin-top: 0 !important;
}
.policy-comparison {
	align-items: start;
}
.source-image img,
.source-text img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.text-center {
	text-align: center;
}
@media (max-width: 900px) {
	.source-cols-2,
	.source-cols-3,
	.source-cols-4 {
		grid-template-columns: 1fr;
	}
	.source-row {
		gap: 22px;
		padding: 22px 0;
	}
}
@media (max-width: 600px) {
	.source-section {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Insurer review pages: provider panel, green heading bands, policy option
   rows, and the two extra column ratios these pages use. */
.source-cols-3-5-2-5 {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.source-cols-1-4-3-4 {
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.source-cols-2-5-3-5 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
@media (max-width: 900px) {
	.source-cols-3-5-2-5,
	.source-cols-1-4-3-4,
	.source-cols-2-5-3-5 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.facts-box {
	padding: 26px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}
.source-row.facts-box {
	width: min(1080px, 100%);
	margin: 24px auto;
	padding: 26px;
}
/* shareholder-protection/case-study only: its icon rows combine
   .policy-option-row with .facts-box (a combo unique to this page), and
   .policy-option-row's own align-items:start (used site-wide for its
   top-aligned icon+heading rows) left the icon stranded at the top of each
   card instead of centered against the body text, unlike the vertically
   centered icon rows on shareholder-protection itself (.split's
   align-items:center). Scoped to this combo only, not the base
   .policy-option-row rule, so every other page using plain
   .policy-option-row keeps its existing top-aligned layout. */
.policy-option-row.facts-box {
	align-items: center;
}

.provider-panel {
	width: min(1080px, 100%);
	margin: 24px auto !important;
}
.provider-panel > .source-row {
	width: 100%;
	padding: 24px 0;
}
.provider-panel .provider-intro,
.provider-panel .insurer-row {
	border-bottom: 1px dashed var(--wp--preset--color--green);
}
.provider-panel > .source-row:last-child {
	border-bottom: 0;
}
.provider-panel .insurer-row {
	align-items: center;
}
.provider-panel .source-row.insurer-overview {
	align-items: start;
}
.provider-panel .insurer-overview > .source-col:first-child {
	border-right: 1px dashed var(--wp--preset--color--green);
	padding-right: 26px;
}
@media (max-width: 900px) {
	.provider-panel .insurer-overview > .source-col:first-child {
		border-right: 0;
		padding-right: 0;
	}
}
.provider-panel .source-image img {
	width: 90%;
	max-width: 203px;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}
@media (max-width: 900px) {
	.provider-panel .source-image img {
		width: 180px;
		max-width: 100%;
	}
}
.provider-panel .policy-option-row .source-image img {
	width: 120px;
	height: 120px;
	max-width: 120px;
	object-fit: contain;
	margin-inline: auto;
}
/* Green-panel banner headings (e.g. "Self-Employed Construction Worker")
   reuse .policy-option-row for its icon+heading grid, but need a much
   smaller icon and tighter single-row grid than the regular content rows
   above — ported from source, which carries this exact combo-specific
   override (scoped to min-width:901px in source too, so mobile still falls
   through to the regular stacked policy-option-row treatment below). Without
   this the generic 120px rule above wins instead, making these banners far
   taller than intended. */
@media (min-width: 901px) {
	.provider-panel > .green-panel.policy-option-row {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 24px;
		align-items: center;
	}
	.provider-panel > .green-panel.policy-option-row .source-image img {
		width: 60px;
		height: 60px;
		max-width: 60px;
		margin: 0;
	}
}
.provider-panel > .green-panel {
	display: grid;
	min-height: 0;
	padding: 24px 26px;
	border-radius: 12px;
	background: var(--wp--preset--color--green);
}
.provider-panel > .green-panel h2,
.provider-panel > .green-panel h3 {
	margin: 0 !important;
	color: #fff;
}
.provider-panel > .source-row.green-panel {
	width: calc(100% + 52px);
	margin-inline: -26px;
	border-radius: 0;
}
.provider-panel > .source-row.green-panel:first-child {
	margin-top: -26px;
	border-radius: 16px 16px 0 0;
}

.green-panel {
	display: flex;
	min-height: 290px;
	flex-direction: column;
	justify-content: center;
	padding: 45px;
	background: var(--wp--preset--color--green);
	color: #fff;
}
.green-panel h2,
.green-panel h3,
.green-panel h4,
.green-panel a {
	color: #fff;
}
.green-panel blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}
.green-panel blockquote p {
	margin: 0 !important;
	font-size: 27px;
	line-height: 1.4;
	font-weight: 700;
}
@media (max-width: 980px) {
	.green-panel {
		min-height: auto;
	}
}
@media (max-width: 600px) {
	.green-panel {
		padding: 30px;
	}
}

.policy-option-row,
.contractor-photo-row,
.contractor-cover-row {
	width: min(1080px, 100%);
	align-items: start;
}
.policy-option-row .source-image img {
	width: 120px;
	height: 120px;
	max-width: 100%;
	object-fit: contain;
}
@media (max-width: 900px) {
	.policy-option-row .source-image img {
		max-width: 120px;
		margin-inline: auto;
	}
}

/* Bounded policy icons: used standalone (not in a policy-option-row) where an
   icon sits above its own text column, e.g. short-term/long-term comparisons. */
.source-image.policy-icon img {
	width: 120px;
	height: 120px;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto 20px;
}
@media (max-width: 900px) {
	.policy-icon img {
		margin-inline: auto;
	}
}

.last-updated {
	margin: 0 !important;
	padding: 0 0 12.8px;
	color: #666;
	font-size: 12.8px;
	font-weight: 500;
}
.disclaimer-text {
	font-size: 12px;
	line-height: 1.6;
}

/* Comparison table: base styling + responsive card view below 900px. */
.table-wrap {
	overflow-x: auto;
}
table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 15px;
	line-height: 1.45;
}
th {
	background: var(--wp--preset--color--green);
	color: #fff;
	text-align: left;
}
th,
td {
	padding: 14px 16px;
	border: 1px solid #d9d9d9;
}
tbody tr:nth-child(even) {
	background: #f0f2f2;
}
.comparison-table th {
	/* Deliberately deviates from source (nowrap there): nowrap forced header
	   cells to their full unwrapped text width, which was wider than the
	   table-wrap container between roughly 900-1050px (table has enough
	   room above that and the card layout replaces it below 900px), causing
	   horizontal scroll in just that range. Allowing wrap removes the
	   pressure entirely with no visual cost at widths where it already fit. */
	white-space: normal;
}
.comparison-table td {
	vertical-align: middle;
}
/* Tables nested inside .source-row (the standard page-body layout used
   site-wide) get tighter padding and a different border colour than the
   generic table rule above — ported from source, placed after the
   .comparison-table rules above to match its cascade order (equal
   specificity, so source order decides: this wins the vertical-align tie
   for comparison-tables specifically). Missing this was why
   difference-between-accident-sickness-income-protection's 6-column table
   rendered wider than source and overflowed its .table-wrap between
   ~900-1050px. */
.source-row th,
.source-row td {
	padding: 12px;
	border: 1px solid #cfd6d0;
	text-align: left;
	vertical-align: top;
}
.cookie-category-table {
	width: 100%;
	table-layout: fixed;
}
.cookie-category-table td {
	vertical-align: top;
	overflow-wrap: break-word;
}
.legal-page {
	padding-top: 28px;
	padding-bottom: 32px;
	overflow-wrap: anywhere;
}
.legal-page h2,
.legal-page h3 {
	margin-top: 30px;
}
.legal-page li {
	margin-bottom: 10px;
}
.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 48px;
}
@media (max-width: 700px) {
	.sitemap-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 900px) {
	:is(.source-row, .blog-content) .comparison-table {
		display: block;
		border: 0;
		background: transparent;
	}
	.comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.comparison-table tbody {
		display: block;
	}
	.comparison-table tbody tr {
		display: block;
		margin-bottom: 28px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	.comparison-table tbody tr:last-child {
		margin-bottom: 0;
	}
	:is(.source-row, .blog-content) .comparison-table td {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		border: 0;
		border-bottom: 1px solid #ececec;
		padding: 14px 18px;
		text-align: right;
		overflow-wrap: anywhere;
		background: #f7f7f7;
	}
	.comparison-table td::before {
		content: attr(data-label);
		font-weight: 700;
		text-transform: uppercase;
		text-align: left;
	}
	:is(.source-row, .blog-content) .comparison-table td:nth-child(even) {
		background: #f2f2f2;
	}
	:is(.source-row, .blog-content) .comparison-table td.policy-type {
		background: var(--wp--preset--color--green);
		color: #fff;
	}
	.table-wrap:has(.comparison-table) {
		overflow: visible;
		margin-right: 0;
	}
}

/* Heading accent: a modifier applied per-instance to specific H2s, not a
   blanket rule — confirmed against source, only some headings get it. */
h2.heading-accent {
	border-left: 5px solid var(--wp--preset--color--green);
	padding-left: 16px;
}
@media (max-width: 600px) {
	h2.heading-accent {
		padding-left: 13px;
		border-left-width: 4px;
	}
}

/* Decorative oversized question mark, used as a graphic placeholder column. */
.question-mark {
	margin: 0;
	color: var(--wp--preset--color--green);
	font-size: clamp(180px, 25vw, 300px);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

/* Base heading sizes. theme.json's elements.heading can only set one shared
   style for all of h1-h6 (no per-level override), so the actual per-level
   sizes from source need plain CSS instead of relying on a `fontSize`
   attribute on every single heading instance (which is also easy to forget,
   as the homepage build just demonstrated). */
h1 {
	font-size: 32px;
}
h2 {
	font-size: 36px;
	line-height: 1.4;
}
h3 {
	font-size: 29px;
}
h4 {
	font-size: 24px;
}

/* Heading bottom margin: theme.json's elements.heading spacing.margin is being
   zeroed out by core's flow-layout child-spacing reset (margin-block-end:0 on
   every flow child, used to avoid double gaps between siblings) — verified via
   matched rules, same specificity but that rule's needs for unrelated children
   spacing win in practice. Set directly, matching the source's global
   h1,h2,h3,h4{margin:0 0 18px} rule. */
h1,
h2,
h3,
h4,
p {
	margin-bottom: 18px !important;
}

/* Main nav link color + item gap. theme.json's styles.blocks."core/navigation"
   has no effect here (Navigation doesn't declare supports.color, and its
   typography/spacing block-style targeting didn't apply either — verified via
   computed styles, not assumed), so this is set directly. */
.main-nav a,
.main-nav button,
.main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #1e1e1e;
}
.main-nav .wp-block-navigation__container {
	column-gap: 24px;
}

/* Nav indicator icons (hamburger + submenu chevrons) are brand green while link
   text is dark, per source design — theme.json can only set one text color for
   the whole Navigation block, so the icon-only override needs a CSS rule. */
.main-nav .wp-block-navigation__responsive-container-open svg,
.main-nav .wp-block-navigation-submenu__toggle svg {
	color: var(--wp--preset--color--green);
}

/* Hamburger icon: core renders a hardcoded 2-line SVG with no setting to
   change it, so it's hidden here and replaced with a 3-line icon drawn via
   gradient instead — avoids touching the block's own markup/JS. Three equal
   16.67%-tall green bands with 25%-tall transparent gaps between (adds to
   100%), which on this button's 24px box works out to ~4px-thick bars —
   visibly thicker than core's 1.5px ones, per request. Doesn't touch the
   close button's "X", which is a different element/class. */
.main-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.main-nav .wp-block-navigation__responsive-container-open {
	/* The button had no explicit size of its own — it was sized implicitly
	   by its 24x24 SVG child via flex. Hiding that SVG above collapsed it to
	   0x0, so the size needs restating explicitly here. */
	width: 24px;
	height: 24px;
	background-image: linear-gradient(
		var(--wp--preset--color--green) 0,
		var(--wp--preset--color--green) 16.67%,
		transparent 16.67%,
		transparent 41.67%,
		var(--wp--preset--color--green) 41.67%,
		var(--wp--preset--color--green) 58.33%,
		transparent 58.33%,
		transparent 83.33%,
		var(--wp--preset--color--green) 83.33%,
		var(--wp--preset--color--green) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Close "X": core renders it as a separate element in the overlay dialog,
   absolutely positioned at top:0/right:0 of the dialog — a different spot
   and size to the open button (which sits inline in the 80px-tall header
   row, inset 20px from the edge via .shell's fixed padding). Repositioned
   to land in the exact same 24x24 box the open button occupies: top:28px is
   (80px header min-height − 24px button) / 2, the same vertical centering
   the open button gets for free from the header's flex row; right:20px
   matches .shell's fixed horizontal inset (width:min(1080px,calc(100% -
   40px)), i.e. always 20px each side below 1120px — covers the whole
   mobile range, not just one viewport width tested at). Core's thin
   two-tone SVG "X" is hidden and replaced with two rotated bars at the same
   4px thickness and brand green as the hamburger's three bars, so open and
   close read as the same control. */
.main-nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.main-nav .wp-block-navigation__responsive-container-close {
	/* 25px, not 28px: `top` for an absolutely positioned child is measured
	   from its containing block's padding edge, and the dialog's own
	   border-top:3px (below) sits outside that padding edge — so 25px here
	   plus the 3px border lands the button exactly 28px from the viewport
	   edge, matching the open button. Confirmed via getBoundingClientRect,
	   not just arithmetic (first attempt at 28px landed 3px too low). */
	top: 25px;
	right: 20px;
	width: 24px;
	height: 24px;
	padding: 0;
}
.main-nav .wp-block-navigation__responsive-container-close::before,
.main-nav .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--wp--preset--color--green);
	border-radius: 2px;
}
.main-nav .wp-block-navigation__responsive-container-close::before {
	transform: translateY(-50%) rotate(45deg);
}
.main-nav .wp-block-navigation__responsive-container-close::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* Mobile menu overlay: minimal polish pass. Core's default overlay has zero
   padding (link text touches the viewport edge) and no dividers between
   items, both ported here; a brand-green top border on the dialog ties it
   back to the rest of the site's green accents. Deliberately not touching
   submenu behaviour/structure, just spacing and visual framing.
   Scoped to max-width:980px (matching the desktop-inline breakpoint at
   min-width:981px above) because .wp-block-navigation__responsive-container
   and its children are repositioned inline rather than swapped out at
   desktop widths — unscoped rules here (especially width:100% on nav items)
   leaked into and broke the horizontal desktop nav. */
@media (max-width: 980px) {
	.main-nav .wp-block-navigation__responsive-dialog {
		border-top: 3px solid var(--wp--preset--color--green);
	}
	.main-nav .wp-block-navigation__responsive-container-content {
		padding-left: 20px;
		padding-right: 20px;
	}
	.main-nav .wp-block-navigation__container.is-responsive > .wp-block-navigation-item {
		/* Plain-link items (e.g. "Home") are flex and shrink to their text
		   width by default, unlike submenu items which stretch full-width —
		   without this the divider below only spans the link text instead
		   of the row. */
		width: 100%;
		border-bottom: 1px solid #eee;
	}
	.main-nav .wp-block-navigation__container.is-responsive > .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}
	.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		padding: 14px 0;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-weight: 700;
	}
}

/* Site logo: source caps the logo at 200px below 980px; the Site Logo block's
   width is a fixed inline style with no responsive setting of its own. */
@media (max-width: 980px) {
	.wp-block-site-logo img {
		width: 200px !important;
		height: auto !important;
	}
}

/* Footer legal block: divider + spacing above the legal text. Authored here
   directly after the equivalent block-attribute JSON failed to serialize at
   all (no inline style was emitted) — verified via computed styles. Legal
   text is centred at every width (design decision, not source-matched). */
.site-footer .legal {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #444444;
	line-height: 1.55;
	text-align: center;
}
.site-footer .legal p {
	margin-bottom: 8px;
	/* Core's flow-layout blockGap also adds margin-top to every sibling after
	   the first, stacking with the margin-bottom above and doubling the gap
	   source only has a single 8px bottom margin, no top margin at all. */
	margin-top: 0 !important;
}

/* Footer, 601px and up (tablet through desktop): the 3 footer-grid items
   (lion logo, "Get In Touch", Movo logo) sit in 3 equal-width columns, each
   centred — one consistent design above 600px, no separate desktop treatment.
   text-align is set on the grid itself so it inherits into the "Get In Touch"
   group's heading/paragraph without needing a separate override. */
@media (min-width: 601px) {
	.footer-grid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
		justify-items: center;
		text-align: center;
	}
}

/* Footer: source collapses the 3-column footer grid to a single centred column
   below 600px; core's flex layout has wrap but no "stack + centre" breakpoint. */
@media (max-width: 600px) {
	.footer-grid {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Main nav: force the hamburger breakpoint at 980px to match the source design,
   since core Navigation's "overlayMenu" setting collapses based on available
   space rather than a fixed viewport width (no equivalent setting exists). The
   block is set to overlayMenu "always" so the toggle/overlay markup is always
   present; above 980px we render the menu inline instead of as an overlay. */
@media (min-width: 981px) {
	.main-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	.main-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.main-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}

/* FAQ accordion (core/details): border/shadow card look + the +/- toggle
   icon. Pseudo-element content and the open/closed icon swap aren't
   expressible via block supports. */
.faq-item {
	margin-top: 0 !important;
	margin-bottom: 14px;
	border: 1px solid #d7ded8;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-item summary {
	position: relative;
	padding: 19px 56px 19px 22px;
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 21px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	line-height: 26px;
	text-align: center;
	transform: translateY(-50%);
}
.faq-item[open] summary::after {
	content: "\2212";
}
.faq-item[open] summary {
	border-bottom: 1px solid #e4e8e5;
}
.faq-item p {
	padding: 0 24px;
	margin: 0 !important;
}
/* Multi-paragraph answers (e.g. self-employed-accident-and-sickness-insurance's
   "own occupation"/"suited occupation" FAQ) need the same gap between
   paragraphs as the page's main text — the blanket margin:0 above otherwise
   collapses them flush together. Matches the theme's blockGap (spacing--60,
   24px), the gap WP's own flow-layout margin-top gives ordinary paragraphs. */
.faq-item p + p {
	margin-top: var(--wp--preset--spacing--60) !important;
}
.faq-item p:first-of-type {
	padding-top: 20px;
}
.faq-item p:last-of-type {
	padding-bottom: 8px;
}
.faq-item summary:focus-visible {
	outline: 3px solid rgba(15, 137, 36, 0.3);
	outline-offset: 3px;
}
@media (max-width: 600px) {
	.faq-item summary {
		padding: 17px 50px 17px 17px;
		font-size: 16px;
	}
}

/* Numbered step list: CSS counter circles, not available via core/list supports. */
.numbered-circles {
	list-style: none;
	counter-reset: estimate-step;
	margin: 0 0 22px;
	padding: 0;
}
.numbered-circles li {
	position: relative;
	counter-increment: estimate-step;
	min-height: 42px;
	margin: 14px 0;
	padding: 7px 0 7px 54px;
}
.numbered-circles li::before {
	content: counter(estimate-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 3px 8px rgba(15, 137, 36, 0.25);
}

/* Contact page — contact details grid + static form + complaints box. */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 36px;
	padding: 42px 0;
	/* Grid items default to align-items:stretch, which was forcing the left
	   column's 3 short contact-item cards to match the much taller form's
	   height — large gaps of empty white space inside each card. */
	align-items: start;
}
/* Grid items default to min-width:auto, which stops them shrinking below
   their content's intrinsic width — a <select>'s own min-content width was
   wide enough to force the single mobile column past the container's own
   edge (confirmed via getComputedStyle: the resolved column came out wider
   than .contact-grid's own content box). Same fix as .source-col elsewhere
   in this file. */
.contact-grid > * {
	min-width: 0;
}
.contact-details {
	display: grid;
	gap: 18px;
}
.contact-item {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 17px;
	align-items: start;
	padding: 22px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.contact-item img {
	width: 46px;
	height: 46px;
}
.contact-item h4 {
	margin-bottom: 5px;
	font-size: 20px;
}
.static-form {
	padding: 30px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.static-form label {
	display: block;
	margin: 0 0 16px;
	color: #222;
	font-weight: 700;
}
.static-form input,
.static-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px;
	border: 1px solid #bcc4bd;
	border-radius: 5px;
	font: inherit;
}
.static-form textarea {
	min-height: 130px;
	resize: vertical;
}
.static-form .wp-block-button__link {
	border: 0;
}
.source-note {
	font-size: 13px;
}
.complaints {
	margin-top: 30px;
	padding: 28px;
	border-radius: 16px;
	background: #eceeef;
}
@media (max-width: 980px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* Quote forms (compare-quotes pages) — grid fields, DOB fieldset, consent row. */
.quote-form-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}
.quote-form label {
	margin: 0;
	font-size: 1rem;
}
.quote-form input:not([type="checkbox"]),
.quote-form select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	margin-top: 6px;
	padding: 12px;
	border: 1px solid #aeb7b0;
	border-radius: 5px;
	background: #fff;
	color: #222;
	font: inherit;
}
.quote-form-dob {
	grid-column: 1 / -1;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.quote-form-dob legend {
	padding: 0;
	margin-bottom: 6px;
}
.quote-form-date {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.quote-form-consent {
	grid-column: 1 / -1;
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}
.quote-form-consent input {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 3px 0 0;
	accent-color: var(--wp--preset--color--green);
}
.quote-form .cta-row {
	height: auto;
	width: auto;
	padding: 20px 0 0;
	margin: 0;
}
.quote-form :is(input, select, button):focus-visible {
	outline: 3px solid #12683c;
	outline-offset: 3px;
}
.quote-form [data-form-status] {
	padding: 15px;
	background: #f1f4f2;
	border-left: 4px solid #12683c;
}
.quote-form select {
	max-width: 100%;
}
@media (max-width: 600px) {
	.quote-form-fields {
		grid-template-columns: minmax(0, 1fr);
	}
	.quote-form {
		padding: 20px;
	}
	.contact-grid {
		padding: 20px;
	}
}

/* Real CF7-embedded quote forms (quotes, quotes/accident-only-construction).
   Separate from .quote-form above: that was built for the old placeholder
   form's markup (one <label> wrapping its input/select). CF7 always renders
   each field as two sibling <div>s instead — one for the <label>, one for
   the control (wrapped in a .wpcf7-form-control-wrap) — so the placeholder's
   grid-based selectors (.quote-form-fields, -dob, -date, -consent) never
   match here and this needs its own rules, single-column rather than
   2-column since label/control aren't one grid-able unit any more.
   compare-quotes and contact still use the old placeholder form, so
   .quote-form-* above is left untouched for them.
   Colors/spacing below are taken directly from the live form on
   blacklioninsurance.co.uk (inspected via computed styles), not invented —
   a distinct lighter green (#22d965/#0fae4a) from the site's main brand
   green (var(--wp--preset--color--green), #0f8924), specific to this
   component on the live site. */
.quote-form-section {
	width: min(550px, 100%);
	margin: 0 auto;
}
/* Mobile: full-bleed, not inset inside .shell's own padding like every other
   section. Confirmed against the live site (every quote-form page, not just
   accident-only-construction) via getBoundingClientRect — the grey card
   spans x:0 to the full viewport width below ~600px, and only picks up its
   own centering/max-width once the viewport is wide enough to show it at
   600px with room either side. Same full-bleed technique as .site-hero
   (break out of the parent's padding with a viewport-relative margin), but
   only below 600px — above that the base rule's width:min(550px,100%) and
   margin:0 auto resume naturally since this media query doesn't touch them. */
@media (max-width: 600px) {
	.quote-form-section {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}
.quote-form-banner {
	background: #22d965;
	text-align: center;
}
.quote-form-banner h2,
.quote-form-banner h3 {
	margin: 0;
	padding: 15px;
	color: #fff;
	font-size: 29px;
}
.quote-form-banner .form-subtitle {
	padding: 6px;
	background: #0fae4a;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
.cf7-quote-form {
	padding: 25px;
	background: #eeeeee;
}
.cf7-quote-form .wpcf7-form {
	/* flex, not inline-block, for .form-third below: inline-block leaves a
	   whitespace gap between elements from the newline in CF7's rendered
	   markup, which was just enough to push the third DOB field (YYYY) onto
	   its own line even though the math (3 × 33.333% width) fit exactly. */
	display: flex;
	flex-wrap: wrap;
}
.cf7-quote-form .wpcf7-form > div,
.cf7-quote-form .wpcf7-form > p {
	/* The submit button's wrapping <p> (and the response-output div after
	   it) are direct flex items of .wpcf7-form same as every field's <div>s
	   — without an explicit flex-basis a flex item defaults to shrink-to-fit
	   its content, so the button's own width:100% had nothing full-width to
	   resolve against and rendered content-sized instead. */
	flex: 1 0 100%;
	margin-bottom: 8px;
}
.cf7-quote-form .wpcf7-form p {
	margin: 0;
}
.cf7-quote-form .wpcf7-form label {
	display: block;
	margin-bottom: 4px;
	color: #685e5d;
	font-weight: 600;
}
.cf7-quote-form .wpcf7-form .required {
	color: #0fae4a;
}
.cf7-quote-form .wpcf7-form input:not([type="checkbox"]):not([type="submit"]),
.cf7-quote-form .wpcf7-form select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 41px;
	padding: 10px 15px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: inherit;
}
/* Native number-input spin buttons (the tiny up/down arrows) increment by 1
   — useless on a field like "Income Required Per Month" or "Amount of cover
   required", where the realistic range is 10,000–1,000,000+. Confirmed via
   computed styles that the live site hides them the same way on every
   number input in these forms (appearance:none), not just the ones the user
   happened to point at — type stays "number" so mobile still gets the
   numeric keypad, only the spinner UI is removed. Firefox honours
   appearance:none on the input itself; Chrome/Safari need the two
   pseudo-elements zeroed out as well. */
.cf7-quote-form .wpcf7-form input[type="number"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}
.cf7-quote-form .wpcf7-form input[type="number"]::-webkit-outer-spin-button,
.cf7-quote-form .wpcf7-form input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.cf7-quote-form .wpcf7-form select {
	max-width: 100%;
}
/* No existing rule styled textareas at all (every other CF7 form in this
   project only uses text/email/tel/select fields) — the Contact form's
   "How can we help?" field was falling back to the browser default textarea
   (20 cols x 2 rows, no width/padding), unusable next to the full-width
   styled inputs above it. Matches the input/select styling exactly, plus a
   taller default height since this field invites a longer answer. */
.cf7-quote-form .wpcf7-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 110px;
	padding: 10px 15px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: inherit;
	resize: vertical;
}
.cf7-quote-form .wpcf7-form .form-third {
	flex: 1 1 calc(33.333% - 8px);
	margin-right: 12px;
}
.cf7-quote-form .wpcf7-form .form-third.last {
	margin-right: 0;
}
.cf7-quote-form .wpcf7-form .wpcf7-list-item {
	margin: 0;
}
.cf7-quote-form .wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
}
.cf7-quote-form .wpcf7-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 3px 0 0;
	accent-color: #0fae4a;
}
.cf7-quote-form .wpcf7-form input[type="submit"] {
	display: block;
	margin-top: 12px;
	padding: 15px;
	width: 100%;
	background: #0fae4a;
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}
.cf7-quote-form .wpcf7-form input[type="submit"]:hover {
	filter: brightness(0.97);
}
.cf7-quote-form .wpcf7-form :is(input, select):focus-visible {
	outline: 3px solid #0fae4a;
	outline-offset: 3px;
}
.cf7-quote-form .wpcf7-response-output {
	margin-top: 16px;
	padding: 15px;
	background: #f1f4f2;
	border-left: 4px solid #0fae4a;
}
@media (max-width: 600px) {
	.cf7-quote-form {
		padding: 20px;
	}
	/* DOB stays 3-across even at mobile widths — confirmed against the live
	   site (every DOB field still sits in one row down to 375px, not
	   stacked); this theme previously stacked it here, which the user
	   flagged as a regression from what the live site actually does.
	   Narrower gap than the desktop 12px since there's much less room:
	   live's own gap at 375px is ~5px (measured via getBoundingClientRect
	   between adjacent fields), not a guess. */
	.cf7-quote-form .wpcf7-form .form-third {
		margin-right: 5px;
	}
}

/* .quote-form-compact: the 8 quote-form pages OTHER than
   quotes/accident-only-construction (originally excluded by the user from
   this whole batch of changes). That page has since had every one of these
   changes asked for separately too — banner colour, the gap under the
   subtitle, label-to-input spacing, brand-strip removal (a content change,
   not CSS — see build-quotes-accident-only-construction.php) and finally
   the submit-button restyle — just one or two requests later than the other
   8 pages, which is the only reason it has its own .quote-form-tight class
   instead of reusing .quote-form-compact directly: by the time each request
   landed it was simpler to extend the relevant selectors than to rename the
   class on that one page's markup each time. The two classes now apply
   identical CSS end to end. */
.quote-form-compact .quote-form-banner,
.quote-form-tight .quote-form-banner {
	/* was #22d965 (the lighter of the two live-site greens) — now the
	   site's own main brand green, per explicit request. */
	background: var(--wp--preset--color--green);
}
.quote-form-compact .cf7-quote-form,
.quote-form-tight .cf7-quote-form {
	/* WP's global-styles blockGap rule gives this (the section's 2nd flow
	   child) margin-top:24px, same fight as other blockGap overrides
	   elsewhere in this file — confirmed via getBoundingClientRect, not
	   assumed, that this was the entire visible gap under the banner. */
	margin-top: 0 !important;
}
.quote-form-compact .cf7-quote-form .wpcf7-form > div,
.quote-form-compact .cf7-quote-form .wpcf7-form > p,
.quote-form-tight .cf7-quote-form .wpcf7-form > div,
.quote-form-tight .cf7-quote-form .wpcf7-form > p {
	/* Base rule above gives every field a flat 8px margin-bottom regardless
	   of whether it's a label-div or a control-div. Live site (confirmed via
	   computed getBoundingClientRect on blacklioninsurance.co.uk/compare-
	   quotes/relevant-life/, the page the user named) has two different
	   gaps: ~5px between a label and its own control, ~16px between one
	   field's control and the next field's label — i.e. the label sits
	   close to its input, and the real breathing room is after the control.
	   Reproduced by giving every div/p a small default and overriding just
	   the control-divs (and the DOB .form-third row) back up to 16px. */
	margin-bottom: 2px;
}
.quote-form-compact .cf7-quote-form .wpcf7-form > div:has(.wpcf7-form-control-wrap),
.quote-form-tight .cf7-quote-form .wpcf7-form > div:has(.wpcf7-form-control-wrap) {
	margin-bottom: 16px;
}
.quote-form-compact .cf7-quote-form .wpcf7-form p,
.quote-form-tight .cf7-quote-form .wpcf7-form p {
	margin: 0 !important;
}
.quote-form-compact .cf7-quote-form .wpcf7-form label,
.quote-form-tight .cf7-quote-form .wpcf7-form label {
	margin-bottom: 2px;
}
.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"],
.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"] {
	/* Matches .wp-block-button__link (theme.css top + theme.json button
	   style) as closely as a native <input> can — colors, padding, radius,
	   shadow and hover lift are all real CSS properties so they carry over;
	   the arrow glyph on .wp-block-button__link is a ::after pseudo-element,
	   which <input> can't render (it's a replaced element, no generated
	   content), so that detail is the one thing left out. Kept full-width
	   and block, unlike the site's normal auto-width buttons — a quote
	   form's submit is conventionally full-width and nothing in the request
	   asked to change its width, just its look. Now shared with
	   .quote-form-tight too — accident-only-construction originally kept
	   its own flat button deliberately, but that's since been asked for
	   separately, so there's no remaining difference between the two
	   modifier classes other than which pages use which name. */
	display: block;
	box-sizing: border-box;
	padding: 13px 28px;
	background: var(--wp--preset--color--green);
	border: 1px solid var(--wp--preset--color--green);
	border-radius: 10px;
	color: var(--wp--preset--color--white, #fff);
	font-size: var(--wp--preset--font-size--regular, 16px);
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	box-shadow: 0 8px 18px rgba(15, 137, 36, 0.24), 0 2px 0 #096719;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"]:hover,
.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--green-dark);
	border-color: var(--wp--preset--color--green-dark);
	box-shadow: 0 11px 22px rgba(15, 137, 36, 0.3), 0 2px 0 #075516;
	transform: translateY(-2px);
	filter: none;
}
.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"]:active,
.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"]:active {
	box-shadow: 0 4px 10px rgba(15, 137, 36, 0.22);
	transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
	.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"],
	.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"] {
		transition: none;
	}
	.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"]:hover,
	.quote-form-compact .cf7-quote-form .wpcf7-form input[type="submit"]:active,
	.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"]:hover,
	.quote-form-tight .cf7-quote-form .wpcf7-form input[type="submit"]:active {
		transform: none;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Blog article styles, ported verbatim from the static checkpoint's blog.css.
   Scoped to blog templates and raw post-content markup. */
.blog-page {
	padding: 32px 20px 56px;
	background: #fff;
}
.blog-article {
	/* Deliberately deviates from source's 900px, per explicit request. */
	max-width: 700px;
	margin-inline: auto;
	overflow-wrap: anywhere;
}
.blog-meta {
	font-size: 14px;
	line-height: 1.5;
	padding-bottom: 24px;
	border-bottom: 1px solid #ddd;
}
.blog-content {
	display: flow-root;
	line-height: 1.75;
}
.blog-content h2 {
	margin: 32px 0 16px;
	font-size: 30px;
	line-height: 1.3;
	clear: both;
}
.blog-content h3 {
	margin: 28px 0 14px;
	font-size: 25px;
	line-height: 1.3;
	clear: both;
}
.blog-content figure {
	max-width: 100%;
	margin: 24px 0;
}
.blog-content img {
	height: auto;
	max-width: 100%;
}
.blog-content figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.blog-content .alignleft {
	float: left;
	max-width: 45%;
	margin: 8px 24px 16px 0;
}
.blog-content .alignright {
	float: right;
	max-width: 45%;
	margin: 8px 0 16px 24px;
}
.blog-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}
.blog-content blockquote {
	margin: 24px 0;
	padding: 12px 24px;
	border-left: 4px solid var(--wp--preset--color--green);
}
.blog-content iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
.blog-content .wp-block-spacer {
	height: 24px;
}
.blog-content .has-text-align-center {
	text-align: center;
}
.blog-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}
.blog-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.blog-card h2 {
	margin: 16px 0 10px;
	font-size: 24px;
	line-height: 1.3;
}
.blog-card p {
	margin-bottom: 12px;
}
.blog-content .comparison-table th {
	background: #eef0f1;
	color: var(--wp--preset--color--ink, #0f0f0f);
}
.blog-content .comparison-table td {
	vertical-align: top;
}
.blog-content .cta-row {
	width: 100%;
	height: auto;
	padding: 24px 0;
}
@media (max-width: 600px) {
	.blog-page {
		padding: 24px 15px 40px;
	}
	.blog-content h2 {
		font-size: 26px;
	}
	.blog-content h3 {
		font-size: 22px;
	}
	.blog-content .alignleft,
	.blog-content .alignright {
		float: none;
		max-width: 100%;
		margin: 24px auto;
	}
	.blog-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Premium estimator (reusable rate-table calculator, see premium-calculator.js) */
.premium-calculator {
	background: #f7f8fc;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 28px;
}
.premium-calculator__form-group {
	margin-bottom: 16px;
}
.premium-calculator__form-group label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}
.premium-calculator__form-group select {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 6px;
}
.premium-calculator__estimate-btn {
	width: 100%;
	min-height: 44px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--green);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(15, 137, 36, 0.24), 0 2px 0 #096719;
}
.premium-calculator__estimate-btn:hover {
	background: var(--wp--preset--color--green-dark);
}
.premium-calculator__summary {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	margin-bottom: 20px;
}
.premium-calculator__summary-row {
	display: flex;
	gap: 6px;
	align-items: baseline;
	flex-wrap: wrap;
}
.premium-calculator__summary-row + .premium-calculator__summary-row {
	margin-top: 6px;
}
.premium-calculator__summary-row dt {
	font-size: 14px;
	font-weight: 700;
	color: #333;
}
.premium-calculator__summary-row dd {
	font-size: 14px;
	color: #111;
	font-weight: 700;
	margin: 0;
}
.premium-calculator__disclaimer {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid #eee;
	font-size: 12px;
	color: #777;
	line-height: 1.55;
}
.premium-calculator__grid {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}
@media (min-width: 600px) {
	.premium-calculator__grid {
		grid-template-columns: 1fr 1fr;
	}
}
.premium-calculator__card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.premium-calculator__card-title {
	font-size: 18px;
	font-weight: 700;
	padding: 14px 20px;
	background: var(--wp--preset--color--green);
	color: #fff;
}
.premium-calculator__card-body {
	padding: 4px 20px 4px;
}
.premium-calculator__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid #eee;
}
.premium-calculator__row:first-child {
	border-top: none;
}
.premium-calculator__row span {
	color: #444;
}
.premium-calculator__row strong {
	font-size: 18px;
	color: #111;
}
.premium-calculator__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.premium-calculator__action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	min-height: 44px;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	flex: 1 1 auto;
}
.premium-calculator__action-btn--primary {
	background: var(--wp--preset--color--green);
	color: #fff;
}
.premium-calculator__action-btn--primary:hover {
	background: var(--wp--preset--color--green-dark);
}
.premium-calculator__action-btn--secondary {
	background: #fff;
	color: #333;
	border: 1px solid #d9d9d9;
}
.premium-calculator__action-btn--secondary:hover {
	background: #f7f7f7;
}
.premium-calculator--flash {
	animation: premiumCalculatorFlash 1.2s ease;
}
@keyframes premiumCalculatorFlash {
	0% {
		box-shadow: 0 0 0 rgba(15, 137, 36, 0);
	}
	30% {
		box-shadow: 0 0 0 6px rgba(15, 137, 36, 0.18);
	}
	100% {
		box-shadow: 0 0 0 rgba(15, 137, 36, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.premium-calculator--flash {
		animation: none;
	}
}
@media (max-width: 600px) {
	.premium-calculator {
		padding: 20px 16px;
	}
	.premium-calculator__action-btn {
		min-width: 0;
		width: 100%;
	}
}

/* Shared rate-table estimator (age x cover, see rate-table-calculator.js) — used by Keyman and Relevant Life */
.rate-table-calculator {
	background: #f7f8fc;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 28px;
}
/* Calculator title bar — user-requested to look identical to the
   .two-cards article > h4 style used further down the Keyman page
   ("Generally Allowable"/"Generally Disallowed": green background, white
   text, 22px, no extra font-weight beyond the h4 default). Negative margins
   extend the bar to the card's own edges despite .rate-table-calculator's
   own 28px padding, matching .two-cards' own full-bleed rounded-top-corners
   look (achieved differently there via padding:0 + overflow:hidden, which
   doesn't apply here since this card needs padding for its form fields). */
.rate-table-calculator__title {
	margin: -28px -28px 20px;
	padding: 17px 28px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: 22px;
	border-radius: 16px 16px 0 0;
}
.rate-table-calculator__form-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.rate-table-calculator__form-group label {
	font-weight: 700;
	width: 160px;
	flex-shrink: 0;
}
.rate-table-calculator__form-group select {
	flex: 1 1 160px;
	min-width: 140px;
	min-height: 44px;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}
.rate-table-calculator__radio-group {
	display: flex;
	align-items: center;
	gap: 16px;
}
.rate-table-calculator__radio-group label {
	font-weight: 400;
	width: auto;
}
.rate-table-calculator__estimate-btn {
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--green);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(15, 137, 36, 0.24), 0 2px 0 #096719;
}
.rate-table-calculator__estimate-btn:hover {
	background: var(--wp--preset--color--green-dark);
}
@media (max-width: 600px) {
	.rate-table-calculator {
		padding: 20px 16px;
	}
	.rate-table-calculator__title {
		margin: -20px -16px 16px;
		padding: 12px 16px;
	}
	.rate-table-calculator__form-group label {
		width: 100%;
	}
}

/* Rate-table estimate results page (see rate-table-estimate.js) */
.rate-table-estimate {
	background: #f7f8fc;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 28px;
	text-align: center;
}
.rate-table-estimate__mid {
	font-size: 36px;
	font-weight: 700;
	color: var(--wp--preset--color--green-dark);
	margin: 0 0 20px;
}
.rate-table-estimate__gauge {
	max-width: 100%;
	height: auto;
	margin: 0 auto 20px;
	display: block;
}
.rate-table-estimate__range {
	display: flex;
	justify-content: space-between;
	max-width: 320px;
	margin: 0 auto 24px;
	font-size: 18px;
	font-weight: 700;
}
.rate-table-estimate__recap {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: 6px 16px;
	text-align: left;
	margin: 0 0 20px;
	font-size: 15px;
}
.rate-table-estimate__recap dt {
	font-weight: 700;
	color: #333;
}
.rate-table-estimate__recap dd {
	margin: 0;
	color: #111;
}
.rate-table-estimate .cta-row {
	justify-content: center;
}

/* Insurer review/claim-reason charts (Chart.js, see insurer-charts.js) */
.insurer-chart {
	margin: 32px 0;
	max-width: 520px;
}
.insurer-chart--doughnut {
	height: 300px;
	position: relative;
}
@media (max-width: 600px) {
	.insurer-chart {
		max-width: 100%;
	}
}

/* Form-success confirmation page (/quotes/email-sent/). Source uses a Divi
   icon-font glyph we don't ship here — a plain outline-envelope SVG in the
   theme's own icon style reproduces the same centred green-icon look. */
.email-sent-section {
	padding-top: 56px;
}
@media (max-width: 600px) {
	.email-sent-section {
		padding-top: 36px;
	}
}
.email-sent-icon {
	display: block;
	width: 96px;
	height: 96px;
	margin: 40px auto 0;
	color: var(--wp--preset--color--green);
}
.email-sent-icon svg {
	width: 100%;
	height: 100%;
}

/* HardyPress-only: Google reCAPTCHA (added for CF7 forms by the hosting
   provider's requirement) renders its badge in the bottom-right corner of
   every page. Hidden sitewide per request — the required disclosure text
   is added directly below each form instead, which satisfies Google's
   terms without needing the visible badge. Not present in the local repo's
   theme.css: reCAPTCHA is a HardyPress-only addition. */
.grecaptcha-badge {
	display: none !important;
}