/*
Theme Name: Life Insurance Smarter
Theme URI: https://example.com/lifeinsurance-smarter
Author: SQLR Studio
Author URI: https://example.com
Description: A modern, editorial-style WordPress block theme (FSE) for a Life Insurance media + comparison blog. Inspired by NerdWallet's clean, trustworthy aesthetic — forest-green + lime-accent palette, mint-tinted card surfaces, bold geometric sans-serif typography. Light mode only. Built for WordPress 6.4+.
Version: 1.1.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lifeinsurance-smarter
Tags: blog, news, education, full-site-editing, block-styles, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, one-column, two-columns, three-columns, four-columns, rtl-language-support, threaded-comments, translation-ready, wide-blocks

Life Insurance Smarter WordPress Theme, (C) 2026 SQLR Studio.
Life Insurance Smarter is distributed under the terms of the GNU GPL.
*/

/*
 * Block theme — most styling is handled via theme.json.
 * Keep this file lean: only utility classes, motion/marquee animations,
 * and small overrides that cannot be expressed in theme.json.
 */

/* ------------------------------------------------------------------ *
 * 1. Accessibility utilities
 * ------------------------------------------------------------------ */

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

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #0B5FA5;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: 0 4px 12px rgba(15, 23, 34, 0.12);
	border-radius: 999px;
}

/* Skip link — visible only on keyboard focus */
.skip-link:focus {
	outline: 3px solid #7CC6FF;
	outline-offset: 2px;
}

/* Focus-visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #7CC6FF;
	outline-offset: 2px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ *
 * 2. Marquee band animation (lime tagline scroller)
 * ------------------------------------------------------------------ */

/* Marquee = two full-bleed bands that CROSS in an X. Each band is wider
   than the viewport and tilted opposite directions, so they overlap in
   the middle. The wrapper clips the overflow. Fully responsive — width is
   in vw so it scales from phone to ultra-wide monitors. */
.lis-marquee {
	position: relative;
	height: clamp(150px, 16vw, 230px);
	overflow: hidden;        /* clip the rotated band ends */
	/* No explicit width: let the block's `align:full` (max-width:none +
	   negative margins) stretch it edge-to-edge. Setting width:100% here
	   would pin it to the content box and leave a gap on the right. */
}

.lis-marquee__band {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130vw;            /* always wider than viewport so corners stay covered */
	margin: 0;               /* kill WP flow-layout blockGap that nudged band B down 24px */
	padding: 14px 0;
	overflow: hidden;        /* clip the scrolling track inside the band */
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(15, 23, 34, 0.12);
}

/* Band A — lime, tilts up to the right, scrolls left */
.lis-marquee__band--a {
	transform: translate(-50%, -50%) rotate(-4deg);
	background: #7CC6FF;
	color: #0A1622;
	z-index: 2;
}

/* Band B — green gradient, tilts down to the right, scrolls right; crosses A */
.lis-marquee__band--b {
	transform: translate(-50%, -50%) rotate(4deg);
	background: linear-gradient(90deg, #0B5FA5 0%, #1E88E5 50%, #0B5FA5 100%);
	color: #FFFFFF;
	z-index: 1;
}

.lis-marquee .marquee-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: lis-marquee 38s linear infinite;
	font-weight: 800;
	font-size: clamp(16px, 1.9vw, 28px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	will-change: transform;
}

.lis-marquee .marquee-track--reverse {
	animation-direction: reverse;
}

.lis-marquee .marquee-seg {
	display: inline-block;
	padding-right: 0;
	flex: 0 0 auto;
}

.lis-marquee:hover .marquee-track {
	animation-play-state: paused;
}

@keyframes lis-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ *
 * 3. Card hover lift (mint card + post card)
 * ------------------------------------------------------------------ */

.is-style-mint-card,
.is-style-lift-on-hover {
	transition: transform 300ms ease, box-shadow 300ms ease;
	will-change: transform;
}

.is-style-mint-card:hover,
.is-style-lift-on-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(11, 95, 165, 0.12);
}

/* ------------------------------------------------------------------ *
 * 4. Scroll-reveal (fade-up on section entry)
 * ------------------------------------------------------------------ */

.lis-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
}

.lis-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 * 5. Reduced motion — kill animations
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* The brand marquee is a core design element the site owner wants always
	   moving, so we explicitly KEEP it scrolling even under reduced motion.
	   This re-declaration overrides the blanket `* { animation-duration }`
	   rule above (higher specificity + !important). */
	.lis-marquee .marquee-track {
		animation: lis-marquee 38s linear infinite !important;
		animation-iteration-count: infinite !important;
	}

	.lis-marquee .marquee-track--reverse {
		animation-direction: reverse !important;
	}

	.lis-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Smooth scroll + anchor offset for sticky header
 * ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

/* NOTE: we deliberately do NOT clip overflow on #main. The marquee bands
   (130vw, absolutely positioned) are already clipped by their own
   .lis-marquee { overflow:hidden } wrapper, so they never cause page
   scroll. Clipping #main here previously also clipped the marquee's
   alignfull breakout, leaving a gap on the right edge — so it's removed. */

/* Make the sticky header actually stick.
   WordPress wraps each template part in its own <header class="wp-block-
   template-part"> box. That wrapper is only as tall as the header, so a
   position:sticky child can't travel — it unsticks instantly. Collapsing
   the wrapper with display:contents promotes .site-header to a direct
   child of the tall .wp-site-blocks, restoring sticky behavior.
   Scoped with :has() so only the header wrapper collapses (not footer). */
.wp-block-template-part:has(> .site-header) {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * 7. Editorial body — list bullets in brand green, link underline on hover
 * ------------------------------------------------------------------ */

.entry-content ul > li::marker,
.entry-content ol > li::marker {
	color: #0B5FA5;
}

.entry-content a:not(.wp-block-button__link) {
	color: #0B5FA5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:not(.wp-block-button__link):hover {
	color: #073B73;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ *
 * 8. Pull-quote accent (lime highlight on key phrase)
 * ------------------------------------------------------------------ */

.has-lime-highlight {
	background: linear-gradient(180deg, transparent 60%, #7CC6FF 60%);
	padding: 0 4px;
}

/* ------------------------------------------------------------------ *
 * 9. Star rating (testimonials)
 * ------------------------------------------------------------------ */

.lis-stars {
	color: #F2B600;
	letter-spacing: 2px;
	font-size: 16px;
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * 10. Site header — nav + actions
 * ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* NOTE: no backdrop-filter here — it would create a containing block for
	   the mobile nav's position:fixed overlay, trapping it inside the 72px
	   header instead of covering the full viewport. The header is solid white
	   anyway, so a blur isn't needed. */
}

.site-header__brand a,
.site-header__brand a:hover {
	text-decoration: none;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* New brand wordmark logo (inline SVG). */
.site-header__logo {
	display: block;
	height: 28px;
	width: auto;
}

.site-header__logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.site-header__wordmark {
	font-family: 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: #0F1722;
	text-transform: lowercase;
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-footer__logo-mark {
	display: inline-block;
	margin-bottom: 0;
}

/* New footer wordmark logo (matches the header). */
.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	height: 32px;
	width: auto;
}

/* Guarantee every header group shares one vertical centre line (kills any
   perceived "top space" / misalignment between logo, nav and buttons).
   margin-block:0 removes the 24px block-gap WordPress adds because the inner
   follows the skip-link inside the constrained header — that gap was the
   "top space". */
.site-header__inner {
	min-height: 72px;
	align-items: center;
	margin-block: 0 !important;
}

.site-header__inner > * {
	display: flex;
	align-items: center;
}

.site-header__nav .wp-block-navigation__container {
	gap: 28px;
	align-items: center;
}

/* Bolder, slightly larger nav links — matches the example's substantial nav. */
.site-header__nav a,
.site-header__nav .wp-block-navigation-item__content {
	color: #1374B8; /* match the logo */
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	transition: color 200ms ease;
}

/* Active page (current) + hover = black. */
.site-header__nav a:hover,
.site-header__nav .current-menu-item > a,
.site-header__nav .current-menu-item .wp-block-navigation-item__content,
.site-header__nav .current_page_item > a,
.site-header__nav [aria-current] {
	color: #0F1722;
}

.site-header__search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: #0F1722;
	transition: background-color 200ms ease, color 200ms ease;
}

/* Header search: the icon is a button that reveals an expanding input.
   Typing + Enter (or clicking the icon again) submits to the search results. */
button.site-header__search-icon {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.site-header__search-form {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-header__search-input {
	width: 0;
	min-width: 0;
	padding: 0;
	border: 1px solid transparent;
	outline: 0;
	background: transparent;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	color: #0F1722;
	opacity: 0;
	transition: width 240ms ease, opacity 200ms ease, padding 240ms ease;
}

.site-header__search.is-open .site-header__search-input {
	width: 220px;
	max-width: 46vw;
	padding: 9px 16px;
	opacity: 1;
	background: #F4F7FB;
	border-color: #CDD3D1;
	border-radius: 999px;
}

.site-header__search.is-open .site-header__search-input:focus {
	background: #FFFFFF;
	border-color: #0B5FA5;
}

.site-header__search-icon:hover {
	background-color: #E6F0FB;
	color: #0B5FA5;
}

/* Responsive nav is handled natively by the core Navigation block
   (overlayMenu = mobile → hamburger + full-screen overlay below its
   breakpoint). We don't hide the inline container ourselves anymore — that
   was also hiding the links INSIDE the open overlay. */

/* Tighten the inline nav on medium screens so 7 items still fit before the
   hamburger takes over. */
@media (max-width: 1100px) {
	.site-header__nav .wp-block-navigation__container {
		gap: 18px;
	}
	.site-header__nav a,
	.site-header__nav .wp-block-navigation-item__content {
		font-size: 15px;
	}
}

/* Below 900px the 7 inline items no longer fit, so force the hamburger +
   full-screen overlay (extends the core block's mobile behavior up to 900px).
   Scoped with :not(.is-menu-open) so the OPEN overlay's links stay visible. */
@media (max-width: 899px) {
	.site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Full-screen mobile overlay menu: large tappable links, centered. */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 8px;
	font-size: 20px;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: 20px;
	color: #FFFFFF;
	padding: 8px 0;
}

/* ------------------------------------------------------------------ *
 * 11. Button block styles — ghost + lime-accent hover states
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: #0F1722;
	border: 1px solid #0F1722;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: #0F1722;
	color: #FFFFFF;
}

.wp-block-button.is-style-lime-accent .wp-block-button__link {
	background-color: #7CC6FF;
	color: #0F1722;
	transition: background-color 200ms ease, transform 200ms ease;
}

.wp-block-button.is-style-lime-accent .wp-block-button__link:hover,
.wp-block-button.is-style-lime-accent .wp-block-button__link:focus {
	background-color: #5BB0F5;
	color: #0A1622;
	transform: translateY(-1px);
}

.wp-block-button.is-style-pill-chip .wp-block-button__link {
	background-color: #FFFFFF;
	color: #0F1722;
	border: 1px solid #CDD3D1;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 500;
}

.wp-block-button.is-style-pill-chip .wp-block-button__link:hover,
.wp-block-button.is-style-pill-chip.is-active .wp-block-button__link {
	background-color: #7CC6FF;
	border-color: #7CC6FF;
	color: #0A1622;
}

/* ------------------------------------------------------------------ *
 * 12. Paragraph block styles — eyebrow tag
 * ------------------------------------------------------------------ */

p.is-style-eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6B7280;
}

/* ------------------------------------------------------------------ *
 * 13. Heading block style — lime highlight on key phrase
 * ------------------------------------------------------------------ */

.wp-block-heading.is-style-lime-highlight em,
.wp-block-heading.is-style-lime-highlight mark,
.wp-block-heading.is-style-lime-highlight .lime {
	background: linear-gradient(180deg, transparent 60%, #7CC6FF 60%);
	color: inherit;
	font-style: normal;
	padding: 0 4px;
}

/* ------------------------------------------------------------------ *
 * 14. Group block style — mint card surface
 * ------------------------------------------------------------------ */

.wp-block-group.is-style-mint-card {
	background-color: #E6F0FB;
	border-radius: 16px;
	padding: 24px;
}

/* ------------------------------------------------------------------ *
 * 15. Footer — link hover + social icon spacing
 * ------------------------------------------------------------------ */

.site-footer__nav .wp-block-navigation__container a {
	color: #0F1722;
	text-decoration: none;
	transition: color 200ms ease;
	font-size: 14px;
	font-weight: 500;
}

.site-footer__nav .wp-block-navigation__container a:hover {
	color: #0B5FA5;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer .wp-block-social-links {
	gap: 16px;
}

.site-footer .wp-block-social-link {
	background: transparent;
}

.site-footer .wp-block-social-link svg {
	fill: #0F1722;
	transition: fill 200ms ease, transform 200ms ease;
}

.site-footer .wp-block-social-link:hover svg {
	fill: #0B5FA5;
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * 16. Disclaimer strip — sits above footer on every template
 * ------------------------------------------------------------------ */

.disclaimer-strip {
	font-feature-settings: "ss01";
}

.disclaimer-strip strong {
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ================================================================== *
 * PATTERN STYLES — section-level CSS that block-markup can't express  *
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 20. Hero — full-bleed photo + green gradient overlay (NerdWallet style)
 * ------------------------------------------------------------------ */

.lis-hero {
	position: relative;
	overflow: hidden;
	background-color: #0B5FA5;
	background-size: 77%;
	background-position: 105% 32%;
	background-repeat: no-repeat;
	min-height: 520px;
	display: flex;
	align-items: center;
}

/* Green gradient: solid dark-green on the left (text area) fading to reveal
   the photo on the right. */
.lis-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		#062E5C 0%,
		#0A4E8A 26%,
		rgba(11, 95, 165, 0.82) 40%,
		rgba(11, 95, 165, 0.35) 54%,
		rgba(11, 95, 165, 0) 68%
	);
}

/* Centre the hero's inner area on the SAME 1200px line as the header and the
   category grid, so the text's left edge lines up with the logo + cards
   instead of sticking out to the viewport edge. box-sizing + the padding in
   the max-width keeps the content box exactly 1200px wide. */
.lis-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(1200px + 2 * var(--wp--preset--spacing--container-x));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Text column sits on the LEFT of that centred 1200px area. */
.lis-hero__content {
	max-width: 680px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.lis-hero__headline {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Lime-text accent on the headline keyword (NerdWallet style). Lime on the
   dark-green hero clears AA for large text. */
.lis-hero__accent {
	color: #7CC6FF;
}

/* "Ask" box = white rounded-rect search on top + green→lime gradient brand
   bar attached below (NerdWallet's search + NERD-AI bar). */
.lis-hero__ask {
	max-width: 480px;
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.lis-hero__ask-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 13px 13px 20px;
}

.lis-hero__ask-form input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #0F1722;
}

.lis-hero__ask-form input::placeholder {
	color: #6B7280;
}

.lis-hero__send {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #EDF1F6;
	color: #374151;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease;
}

.lis-hero__send:hover {
	background: #7CC6FF;
	color: #0A1622;
}

.lis-hero__aibar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	background: linear-gradient(90deg, #0B2E52 0%, #0B5FA5 32%, #4AA3E0 66%, #7CC6FF 100%);
}

.lis-hero__aibar-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: #7CC6FF;
	color: #0B2E52;
	font-weight: 900;
	font-size: 13px;
	line-height: 1;
	flex-shrink: 0;
}

.lis-hero__aibar-text {
	color: #FFFFFF;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* On phones the photo is mostly hidden behind a near-solid green so the
   headline stays readable; the gradient covers the whole width. */
@media (max-width: 900px) {
	.lis-hero {
		background-position: center center;
		min-height: 0;
	}
	.lis-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(7, 59, 115, 0.92) 0%,
			rgba(11, 95, 165, 0.92) 100%
		);
	}
	.lis-hero__content {
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------------------ *
 * 21. Category card grid
 * ------------------------------------------------------------------ */

/* The hero is position:relative, so it paints ABOVE this (non-positioned)
   section and clips the cards' tops where they overlap (-60px). Promote the
   grid to a positioned element with a higher z-index so it sits on top. */
.lis-categories {
	position: relative;
	z-index: 3;
}

.lis-cat-card__inner {
	height: 100%;
	transition: transform 300ms ease, box-shadow 300ms ease;
	box-shadow: 0 1px 2px rgba(15, 23, 34, 0.04);
}

.lis-cat-card:hover .lis-cat-card__inner {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(11, 95, 165, 0.14);
}

.lis-cat-card__icon svg {
	display: block;
}

.lis-cat-card:hover .lis-cat-card__arrow {
	transform: translateX(2px);
}

.lis-cat-card__arrow {
	transition: transform 200ms ease;
	display: inline-flex;
}

@media (max-width: 1023px) {
	.lis-categories__row-1,
	.lis-categories__row-2 {
		flex-wrap: wrap !important;
	}
	.lis-categories .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
	}
}

@media (max-width: 640px) {
	.lis-categories .wp-block-column {
		flex-basis: 100% !important;
	}
	.lis-categories {
		margin-top: -32px !important;
	}
}

/* ------------------------------------------------------------------ *
 * 21.7 Trust stats + partner strip
 * ------------------------------------------------------------------ */

/* Portrait gets a floating "reviewed by" badge for a more dynamic, trustworthy
   feel (like the example's overlapping trust chips). */
.lis-trust__portrait-wrap {
	position: relative;
}

.lis-trust__portrait-badge {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	background: #FFFFFF;
	color: #0F1722;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(15, 23, 34, 0.16);
}

.lis-trust__portrait-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #0B5FA5;
	color: #FFFFFF;
	flex-shrink: 0;
}

/* Each stat gets a short lime accent bar above the number — gives the trio a
   designed, intentional look instead of bare floating numbers. */
.lis-trust__stats .wp-block-column {
	position: relative;
	padding-top: 18px;
}

.lis-trust__stats .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 4px;
	border-radius: 999px;
	background: #7CC6FF;
}

/* Keep the headline on ONE line on desktop — scales down to fit the column. */
.lis-trust h2 {
	font-size: clamp(22px, 2.6vw, 33px) !important;
	white-space: nowrap;
}

/* Partner strip — all logos on ONE line, evenly spread (shield glyph + name). */
.lis-trust__logo-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.lis-partner-logo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: #6B7280;
	opacity: 0.85;
	white-space: nowrap;
	transition: color 200ms ease, opacity 200ms ease;
}

.lis-partner-logo__mark {
	width: 15px;
	height: 15px;
	color: #9AA3A0;
	flex-shrink: 0;
	transition: color 200ms ease;
}

/* On tablet/phone the headline + partner strip wrap again so nothing overflows. */
@media (max-width: 900px) {
	.lis-trust h2 {
		white-space: normal;
	}
	.lis-trust__logo-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 28px;
	}
}

.lis-partner-logo:hover {
	color: #0B5FA5;
	opacity: 1;
}

.lis-partner-logo:hover .lis-partner-logo__mark {
	color: #0B5FA5;
}

.lis-partner-logo__img {
	max-height: 32px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity 200ms ease, filter 200ms ease;
}

.lis-partner-logo__img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * 22. News carousel
 * ------------------------------------------------------------------ */

/* Centered header (eyebrow + title + text "view all" link) */
.lis-news__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	max-width: 720px;
	margin: 0 auto 40px;
}

.lis-news__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0B5FA5;
}

.lis-news__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #0F1722;
}

.lis-news__viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0B5FA5;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
	transition: color 200ms ease, gap 200ms ease;
}

.lis-news__viewall:hover {
	color: #073B73;
	gap: 10px;
}

/* Coverflow viewport — clips the track; cards peek on either side */
.lis-news__viewport {
	overflow: hidden;
	padding: 24px 0;
}

.lis-news__track {
	display: flex;
	gap: 20px;
	align-items: center;
	width: max-content;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.lis-news-card {
	flex: 0 0 auto;
	width: clamp(230px, 24vw, 300px);
	aspect-ratio: 4/5;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #0F1722;
	box-shadow: 0 8px 24px rgba(11, 95, 165, 0.18);
	/* Default = outer state (faded, small). JS promotes active/adjacent. */
	transform: scale(0.7);
	opacity: 0.35;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease, box-shadow 500ms ease;
}

.lis-news-card.is-adjacent {
	transform: scale(0.85);
	opacity: 0.65;
}

.lis-news-card.is-active {
	transform: scale(1);
	opacity: 1;
	z-index: 3;
	box-shadow: 0 18px 44px rgba(11, 95, 165, 0.28);
}

/* Before JS runs, show a sensible static peek (center = 3rd card) */
.lis-news .no-js-fallback {
	display: none;
}

.lis-news-card__link {
	display: block;
	height: 100%;
	color: #FFFFFF;
	text-decoration: none;
	position: relative;
}

.lis-news-card__art {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 600ms ease;
	opacity: 0.5;
}

.lis-news-card__art svg {
	width: 60%;
	height: auto;
	max-width: 200px;
}

.lis-news-card:hover .lis-news-card__art {
	transform: scale(1.08);
	opacity: 0.65;
}

.lis-news-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,34,0) 0%, rgba(15,23,34,0.75) 100%);
}

.lis-news-card__meta {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
}

.lis-news-card__cat {
	display: inline-block;
	background: rgba(255,255,255,0.95);
	color: #0B5FA5;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.lis-news-card__body {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
}

.lis-news-card__title {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px 0;
	color: #FFFFFF;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lis-news-card__author {
	font-size: 12px;
	color: rgba(255,255,255,0.85);
	margin: 0;
	line-height: 1.4;
}

/* Navigation — circular arrows + lime dots, centered */
.lis-news__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 28px;
}

.lis-news__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid #CDD3D1;
	background: #FFFFFF;
	color: #0F1722;
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.lis-news__arrow:hover:not(:disabled) {
	background: #E6F0FB;
	border-color: #0B5FA5;
	color: #0B5FA5;
	transform: translateY(-1px);
}

.lis-news__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.lis-news__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lis-news__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #CDD3D1;
	cursor: pointer;
	transition: background 200ms ease, width 200ms ease;
}

.lis-news__dot:hover {
	background: #0B5FA5;
}

.lis-news__dot.is-active {
	background: #7CC6FF;
	width: 26px;
}

@media (max-width: 768px) {
	.lis-news-card {
		width: 78vw;
		max-width: 320px;
	}
	/* On small screens fade is gentler so the active card dominates cleanly */
	.lis-news-card {
		opacity: 0.5;
	}
}

/* ------------------------------------------------------------------ *
 * 23. Premium comparison — tabs + rate cards
 * ------------------------------------------------------------------ */

.lis-rates__tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
	border-bottom: 1px solid #D2E4F5;
}

.lis-rates__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	color: #6B7280;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 20px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 200ms ease, border-color 200ms ease;
}

.lis-rates__tab:hover {
	color: #0B5FA5;
}

.lis-rates__tab.is-active {
	color: #0B5FA5;
	border-bottom-color: #0B5FA5;
}

.lis-rates__panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.lis-rates__panel[hidden] {
	display: none;
}

.lis-rate-card {
	position: relative;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 24px 20px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(11, 95, 165, 0.06);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.lis-rate-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(11, 95, 165, 0.12);
}

.lis-rate-card.is-popular {
	border: 2px solid #0B5FA5;
}

.lis-rate-card__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #7CC6FF;
	color: #0F1722;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.lis-rate-card__cov-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B7280;
	margin: 0 0 4px 0;
}

.lis-rate-card__cov {
	font-size: 22px;
	font-weight: 800;
	color: #0F1722;
	margin: 0 0 16px 0;
	line-height: 1;
}

.lis-rate-card__rate {
	font-size: 36px;
	font-weight: 800;
	color: #0B5FA5;
	margin: 0 0 4px 0;
	line-height: 1;
}

.lis-rate-card__rate span {
	font-size: 16px;
	font-weight: 500;
	color: #374151;
}

.lis-rate-card__mkt {
	font-size: 13px;
	color: #6B7280;
	margin: 0 0 16px 0;
}

.lis-rate-card__mkt strong {
	color: #374151;
}

.lis-rate-card__sub {
	font-size: 12px;
	color: #6B7280;
	margin: 0;
	border-top: 1px solid #E5E7EB;
	padding-top: 12px;
}

.lis-rates__trust {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.lis-rates__trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #0B5FA5;
}

@media (max-width: 768px) {
	.lis-rates__panel {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * 24. Promo block — floating coverage card
 * ------------------------------------------------------------------ */

.lis-promo__media {
	position: relative;
	border-radius: 20px;
	overflow: visible;
}

.lis-promo__media img {
	width: 100%;
	border-radius: 20px;
	display: block;
}

.lis-promo__float-card {
	position: absolute;
	bottom: 24px;
	right: -24px;
	background: #FFFFFF;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 12px 32px rgba(15, 23, 34, 0.18);
	min-width: 240px;
	border: 1px solid #E6F0FB;
}

.lis-promo__float-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B7280;
	margin: 0 0 4px 0;
}

.lis-promo__float-num {
	font-size: 36px;
	font-weight: 800;
	color: #0B5FA5;
	margin: 0 0 4px 0;
	line-height: 1;
}

.lis-promo__float-sub {
	font-size: 12px;
	color: #6B7280;
	margin: 0 0 12px 0;
}

.lis-promo__float-bar {
	height: 6px;
	background: #E6F0FB;
	border-radius: 999px;
	overflow: hidden;
}

.lis-promo__float-bar span {
	display: block;
	width: 75%;
	height: 100%;
	background: linear-gradient(90deg, #0B5FA5 0%, #7CC6FF 100%);
	border-radius: 999px;
}

@media (max-width: 768px) {
	.lis-promo__float-card {
		right: 16px;
		bottom: 16px;
		min-width: 200px;
	}
}

/* ------------------------------------------------------------------ *
 * 25. Resource tabs (vertical)
 * ------------------------------------------------------------------ */

.lis-restabs__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lis-restabs__tab {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 16px 20px;
	border-radius: 12px;
	color: #0F1722;
	font-size: 16px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
	text-align: left;
}

.lis-restabs__tab:hover {
	background: #F4F7FB;
}

.lis-restabs__tab.is-active {
	background: #FFFFFF;
	color: #0B5FA5;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(11, 95, 165, 0.06);
}

.lis-restabs__tab.is-active svg {
	color: #0B5FA5;
}

.lis-restabs__tab svg {
	color: #6B7280;
	flex-shrink: 0;
}

.lis-restabs__img {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}

.lis-restabs__sublinks {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #D2E4F5;
}

.lis-restabs__sublinks li {
	border-bottom: 1px solid #D2E4F5;
}

.lis-restabs__sublinks li:last-child {
	border-bottom: 0;
}

.lis-restabs__sublinks a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	color: #0F1722;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: color 200ms ease;
}

.lis-restabs__sublinks a:hover {
	color: #0B5FA5;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lis-restabs__arrow {
	color: #0B5FA5;
	font-weight: 700;
}

/* Tab panels — all panels stack in one grid cell so the card height stays
   fixed to the TALLEST panel. Switching tabs then can't grow/shrink the box,
   which stops the layout from jumping. theme.js toggles [hidden]. */
.lis-restabs__panels {
	display: grid;
}

.lis-restabs__panel {
	grid-area: 1 / 1;          /* every panel occupies the same cell */
}

/* Inactive panel: keep it in the cell (so it still contributes height) but
   make it invisible & non-interactive — not display:none, which would collapse
   the height and reintroduce the jump. visibility:hidden also removes it from
   the tab order and the accessibility tree. */
.lis-restabs__panel[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/* Category icon sits centered at a consistent size across all panels */
.lis-restabs__img svg {
	width: 80px;
	height: 80px;
}

/* Keep the CTA left-aligned and spaced above the quick-links list
   (raw-HTML panels don't inherit the editor blockGap, so set it here) */
.lis-restabs__panel .wp-block-buttons {
	justify-content: flex-start;
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------ *
 * 26. App / calculator block — phone mockup + mini stats
 * ------------------------------------------------------------------ */

.lis-app__stats {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.lis-app__stat-num {
	font-size: 28px;
	font-weight: 800;
	color: #0B5FA5;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.01em;
}

.lis-app__stat-label {
	font-size: 13px;
	color: #6B7280;
	margin: 4px 0 0 0;
}

.lis-app__phone {
	display: flex;
	justify-content: center;
}

.lis-app__phone-frame {
	width: 260px;
	border-radius: 36px;
	background: #0F1722;
	padding: 14px;
	box-shadow: 0 24px 48px rgba(15, 23, 34, 0.18);
	position: relative;
	overflow: hidden;
}

.lis-app__phone-notch {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 18px;
	background: #0F1722;
	border-radius: 0 0 12px 12px;
	z-index: 2;
}

.lis-app__phone-screen {
	background: #FFFFFF;
	border-radius: 24px;
	padding: 36px 20px 24px;
	min-height: 420px;
}

.lis-app__phone-eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B7280;
	margin: 0 0 4px 0;
}

.lis-app__phone-num {
	font-size: 42px;
	font-weight: 800;
	color: #0B5FA5;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.02em;
}

.lis-app__phone-sub {
	font-size: 11px;
	color: #6B7280;
	margin: 4px 0 16px 0;
}

.lis-app__phone-bar {
	height: 6px;
	background: #E6F0FB;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 20px;
}

.lis-app__phone-bar span {
	display: block;
	width: 65%;
	height: 100%;
	background: linear-gradient(90deg, #0B5FA5 0%, #7CC6FF 100%);
}

.lis-app__phone-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lis-app__phone-rows > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}

.lis-app__phone-rows span {
	color: #6B7280;
}

.lis-app__phone-rows strong {
	color: #0F1722;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 27. Newsletter form
 * ------------------------------------------------------------------ */

.lis-newsletter__form {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.lis-newsletter__form input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 16px;
	font-size: 15px;
	font-family: 'Inter', sans-serif;
	color: #0F1722;
}

.lis-newsletter__form button {
	background: #7CC6FF;
	color: #0F1722;
	border: 0;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	padding: 12px 24px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.lis-newsletter__form button:hover {
	background: #5BB0F5;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * 28. Comparison table
 * ------------------------------------------------------------------ */

.lis-cmp__scroller {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
}

.lis-cmp__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #FFFFFF;
}

.lis-cmp__table thead th {
	background: #E6F0FB;
	color: #0F1722;
	font-weight: 700;
	text-align: left;
	padding: 16px 20px;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.lis-cmp__table th[scope="row"] {
	background: #F4F7FB;
	font-weight: 600;
	text-align: left;
	width: 30%;
}

.lis-cmp__table td,
.lis-cmp__table th {
	padding: 14px 20px;
	border-bottom: 1px solid #E5E7EB;
	vertical-align: top;
}

.lis-cmp__table tbody tr:nth-child(even) td {
	background: #FAFBFD;
}

.lis-cmp__table tbody tr:last-child td,
.lis-cmp__table tbody tr:last-child th {
	border-bottom: 0;
}

.lis-cmp__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #E6F0FB;
	color: #0B5FA5;
	font-weight: 700;
	font-size: 12px;
	margin-right: 6px;
}

.lis-cmp__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #FEE2E2;
	color: #DC2626;
	font-weight: 700;
	font-size: 12px;
	margin-right: 6px;
}

/* ------------------------------------------------------------------ *
 * 29. FAQ accordion
 * ------------------------------------------------------------------ */

.lis-faq__list {
	border-top: 1px solid #E5E7EB;
}

.lis-faq__item {
	border-bottom: 1px solid #E5E7EB;
}

.lis-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 4px;
	font-size: 17px;
	font-weight: 700;
	color: #0F1722;
	cursor: pointer;
	list-style: none;
	transition: color 200ms ease;
}

.lis-faq__item summary::-webkit-details-marker { display: none; }

.lis-faq__item summary:hover {
	color: #0B5FA5;
}

.lis-faq__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #E6F0FB;
	color: #0B5FA5;
	position: relative;
	transition: background 200ms ease, transform 300ms ease;
}

.lis-faq__icon::before,
.lis-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: #0B5FA5;
	transform: translate(-50%, -50%);
	transition: transform 200ms ease;
}

.lis-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lis-faq__item[open] .lis-faq__icon {
	background: #0B5FA5;
}

.lis-faq__item[open] .lis-faq__icon::before,
.lis-faq__item[open] .lis-faq__icon::after {
	background: #FFFFFF;
}

.lis-faq__item[open] .lis-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.lis-faq__answer {
	padding: 0 4px 24px;
	color: #374151;
	font-size: 16px;
	line-height: 1.6;
}

.lis-faq__answer p {
	margin: 0;
}

/* ================================================================== *
 * BLOG TEMPLATE STYLES — single, archive, index, search, 404, sidebar *
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 30. Breadcrumb
 * ------------------------------------------------------------------ */

.lis-breadcrumb {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B7280;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.lis-breadcrumb a {
	color: #6B7280;
	text-decoration: none;
	transition: color 200ms ease;
}

.lis-breadcrumb a:hover {
	color: #0B5FA5;
}

.lis-breadcrumb--light,
.lis-breadcrumb--light a {
	color: rgba(255,255,255,0.75);
}

.lis-breadcrumb--light a:hover {
	color: #7CC6FF;
}

/* ------------------------------------------------------------------ *
 * 31. Article share row
 * ------------------------------------------------------------------ */

.lis-article__share {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.lis-article__share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	color: #6B7280;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.lis-article__share a:hover {
	background: #E6F0FB;
	color: #0B5FA5;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * 32. Category chips (archive + index + search empty-state)
 * ------------------------------------------------------------------ */

.lis-chips__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 0;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #CDD3D1 transparent;
}

.lis-chips__row::-webkit-scrollbar {
	height: 4px;
}

.lis-chips__row::-webkit-scrollbar-thumb {
	background: #CDD3D1;
	border-radius: 999px;
}

.lis-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	background: #FFFFFF;
	color: #0F1722;
	border: 1px solid #CDD3D1;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.lis-chip:hover {
	background: #E6F0FB;
	border-color: #0B5FA5;
	color: #0B5FA5;
}

.lis-chip.is-active {
	background: #7CC6FF;
	color: #0F1722;
	border-color: #7CC6FF;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 33. Post card hover (used in single related + archive + index)
 * ------------------------------------------------------------------ */

.lis-post-card {
	transition: transform 300ms ease, box-shadow 300ms ease;
	box-shadow: 0 2px 8px rgba(11, 95, 165, 0.06);
	overflow: hidden;
}

.lis-post-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(11, 95, 165, 0.12);
}

.lis-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.lis-post-card .wp-block-post-featured-image img {
	transition: transform 600ms ease;
}

/* No zoom-on-hover: the featured images have the category pill + brand logo
   baked into their corners, which the 1.04 zoom pushed past the overflow:hidden
   edge and clipped on hover. The card lift is feedback enough. */
.lis-post-card:hover .wp-block-post-featured-image img {
	transform: none;
}

.lis-post-card .wp-block-post-title a {
	color: #0F1722;
	text-decoration: none;
	transition: color 200ms ease;
}

.lis-post-card:hover .wp-block-post-title a {
	color: #0B5FA5;
}

/* ------------------------------------------------------------------ *
 * 34. Featured post card (index hero)
 * ------------------------------------------------------------------ */

.lis-featured-card {
	box-shadow: 0 4px 16px rgba(11, 95, 165, 0.08);
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.lis-featured-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(11, 95, 165, 0.14);
}

.lis-featured-card .wp-block-post-title a {
	color: #0F1722;
	text-decoration: none;
}

.lis-featured-card .wp-block-post-title a:hover {
	color: #0B5FA5;
}

@media (max-width: 768px) {
	.lis-featured-card .wp-block-columns {
		flex-direction: column;
	}
	.lis-featured-card .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ *
 * 35. Search results — horizontal result cards
 * ------------------------------------------------------------------ */

.lis-result-card {
	box-shadow: 0 2px 8px rgba(11, 95, 165, 0.06);
}

.lis-result-card .wp-block-post-title a {
	color: #0F1722;
	text-decoration: none;
}

.lis-result-card:hover .wp-block-post-title a {
	color: #0B5FA5;
}

/* Left column = thumbnail tile. Posts without a featured image still get a
   branded gradient tile + shield icon (matches the news-carousel fallback),
   so the result list never shows a blank left gap. A real featured image,
   when present, fills the tile and covers the gradient/icon. */
.lis-result-card .wp-block-columns {
	align-items: stretch;
}

.lis-result-card .wp-block-column:first-child {
	align-self: stretch;
	position: relative;
	min-height: 150px;
	overflow: hidden;
	background: linear-gradient(135deg, #0B5FA5 0%, #073B73 100%);
}

/* Centered shield watermark — hidden behind a real image when one exists. */
.lis-result-card .wp-block-column:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 54px 54px;
	opacity: 0.9;
	pointer-events: none;
}

/* Real featured image (if set) fills the tile and sits above the watermark. */
.lis-result-card .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
	height: 100%;
	margin: 0;
}

.lis-result-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.lis-result-card .wp-block-columns {
		flex-direction: column;
	}
	.lis-result-card .wp-block-column {
		flex-basis: 100% !important;
	}
	.lis-result-card .wp-block-column:first-child {
		min-height: 120px;
	}
}

/* WP core search block in forest-green search hero */
.lis-search__form .wp-block-search__inside-wrapper {
	background: #FFFFFF;
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
	border: 0;
}

.lis-search__form input.wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 16px;
	padding: 10px 16px;
}

.lis-search__form button.wp-block-search__button {
	background: #0B5FA5;
	color: #FFFFFF;
	border-radius: 999px;
	padding: 12px 20px;
	font-weight: 700;
}

.lis-search__form button.wp-block-search__button:hover {
	background: #073B73;
}

/* ------------------------------------------------------------------ *
 * 36. Pagination — query pagination links
 * ------------------------------------------------------------------ */

.wp-block-query-pagination {
	gap: 8px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0F1722;
	border: 1px solid #CDD3D1;
	font-weight: 600;
	text-decoration: none;
	transition: all 200ms ease;
}

.wp-block-query-pagination a:hover {
	background: #E6F0FB;
	border-color: #0B5FA5;
	color: #0B5FA5;
}

.wp-block-query-pagination .current {
	background: #7CC6FF;
	border-color: #7CC6FF;
	color: #0F1722;
}

/* ------------------------------------------------------------------ *
 * 37. 404 — extra polish
 * ------------------------------------------------------------------ */

/* Shield illustration — centered, gentle float */
.lis-404__art {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
}

.lis-404__art svg {
	width: clamp(140px, 30vw, 200px);
	height: auto;
	animation: lis-404-float 4s ease-in-out infinite;
}

@keyframes lis-404-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.lis-404__art svg { animation: none; }
}

/* Popular "try instead" cards — 3-col grid, stacks on mobile */
.lis-404-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.lis-404-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 20px;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	box-shadow: 0 2px 8px rgba(11, 95, 165, 0.05);
	text-decoration: none;
	transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.lis-404-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(11, 95, 165, 0.14);
	border-color: #0B5FA5;
}

.lis-404-card__icon {
	display: inline-flex;
	margin-bottom: 6px;
}

.lis-404-card__icon svg { display: block; }

.lis-404-card__title {
	font-size: 16px;
	font-weight: 700;
	color: #0B5FA5;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lis-404-card__arrow {
	transition: transform 200ms ease;
}

.lis-404-card:hover .lis-404-card__arrow {
	transform: translateX(3px);
}

.lis-404-card__desc {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.5;
}

@media (max-width: 720px) {
	.lis-404-cards {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * 38. Sidebar — TOC + mini-newsletter
 * ------------------------------------------------------------------ */

.lis-sidebar {
	position: sticky;
	top: 96px;
}

.lis-toc__list {
	list-style: none;
	counter-reset: lis-toc;
	margin: 0;
	padding: 0;
	border-top: 1px solid #D2E4F5;
}

.lis-toc__list li {
	counter-increment: lis-toc;
	border-bottom: 1px solid #D2E4F5;
}

.lis-toc__list li:last-child {
	border-bottom: 0;
}

.lis-toc__list a {
	display: block;
	padding: 10px 0 10px 28px;
	color: #0F1722;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	transition: color 200ms ease;
}

.lis-toc__list a::before {
	content: counter(lis-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	color: #0B5FA5;
	font-weight: 700;
	font-size: 12px;
	font-feature-settings: "tnum";
}

.lis-toc__list a:hover {
	color: #0B5FA5;
}

.lis-sidebar__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.lis-sidebar__newsletter-form input {
	background: rgba(255,255,255,0.95);
	border: 0;
	outline: 0;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: #0F1722;
}

.lis-sidebar__newsletter-form button {
	background: #7CC6FF;
	color: #0F1722;
	border: 0;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 200ms ease;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lis-sidebar__newsletter-form button:hover {
	background: #5BB0F5;
}

/* ------------------------------------------------------------------ *
 * 39. Author bio card
 * ------------------------------------------------------------------ */

.lis-author-bio .wp-block-avatar img {
	border-radius: 999px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.lis-author-bio .wp-block-post-author-name a,
.lis-author-bio .wp-block-post-author-name {
	color: #0F1722;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 640px) {
	.lis-author-bio .wp-block-columns {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------ *
 * 40. Article meta (single hero)
 * ------------------------------------------------------------------ */

.lis-article__meta .wp-block-avatar img {
	border-radius: 999px;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.lis-article__meta .wp-block-post-author-name a,
.lis-article__meta .wp-block-post-author-name {
	color: #0F1722;
	text-decoration: none;
}

.lis-article__meta .wp-block-post-author-name a:hover {
	color: #0B5FA5;
}

/* ------------------------------------------------------------------ *
 * 41.5. WCAG AA fix — footer muted text on sand background
 *        Default text-muted (#6B7280) on footer-bg (#F5EFE0) = 4.21:1,
 *        which fails AA for normal text. Bump to a darker muted that
 *        still reads as "secondary" but clears 4.5:1.
 * ------------------------------------------------------------------ */

.site-footer .has-text-muted-color,
.site-footer p.has-text-muted-color,
.site-footer .has-tiny-font-size.has-text-muted-color {
	color: #4B5563 !important; /* 6.04:1 on #F5EFE0 — clears AA */
}

/* ------------------------------------------------------------------ *
 * 42. (Reserved) — content-visibility was removed.
 *
 * Earlier we used `content-visibility: auto` here to paint-skip below-
 * the-fold sections. It caused those sections to render as empty boxes
 * (collapsed to their contain-intrinsic-size) until scrolled into view,
 * which broke full-page rendering. Removed for correctness; lazy images
 * + deferred JS already cover the performance budget.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 43. Lazy image fade-in (avoid CLS while images load)
 * ------------------------------------------------------------------ */

img[loading="lazy"] {
	background-color: #F4F7FB;
}

/* ------------------------------------------------------------------ *
 * 44. Archive grid — responsive column count
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.lis-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.lis-grid .wp-block-post-template.is-layout-grid,
	.lis-related .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ================================================================== *
 * BRAND ACCENT LAYER — icons + buttons use the brand blue on the UI    *
 * (Appended override; loads last so it wins over the base.)            *
 * NOTE: var names kept as --lis-green* for history; values are blue.   *
 * ================================================================== */

:root { --lis-green: #0B5FA5; --lis-green-dark: #073B73; --lis-mint: #E6F0FB; --lis-lime: #7CC6FF; }

/* ---- Icon chips coloured via CSS (not inline SVG) ---- */
.lis-faq__icon { background: var(--lis-mint); color: var(--lis-green); }
.lis-faq__icon::before,
.lis-faq__icon::after { background: var(--lis-green); }
.lis-faq__item[open] .lis-faq__icon { background: var(--lis-green); }
.lis-faq__item[open] .lis-faq__icon::before,
.lis-faq__item[open] .lis-faq__icon::after { background: #FFFFFF; }

.lis-cmp__check { background: var(--lis-mint); color: var(--lis-green); }

.lis-trust__portrait-badge-icon { background: var(--lis-green); color: #FFFFFF; }

.lis-hero__aibar-mark { background: var(--lis-lime); color: #0B2E52; }

.site-header__search-icon:hover { background: var(--lis-mint); color: var(--lis-green); }

.lis-rates__trust-badge { color: #073B73; }

/* ---- Buttons: brand-blue action colour ---- */
.wp-block-button:not(.is-style-ghost):not(.is-style-pill-chip) > .wp-block-button__link,
.wp-block-button.is-style-lime-accent > .wp-block-button__link {
	background-color: var(--lis-green) !important;
	color: #FFFFFF !important;
}
.wp-block-button:not(.is-style-ghost):not(.is-style-pill-chip) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-ghost):not(.is-style-pill-chip) > .wp-block-button__link:focus,
.wp-block-button.is-style-lime-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-lime-accent > .wp-block-button__link:focus {
	background-color: var(--lis-green-dark) !important;
	color: #FFFFFF !important;
}

/* Custom HTML form buttons (newsletter band + sidebar + search submit) */
.lis-newsletter__form button,
.lis-sidebar__newsletter-form button,
.lis-search__form button.wp-block-search__button {
	background: var(--lis-green);
	color: #FFFFFF;
}
.lis-newsletter__form button:hover,
.lis-sidebar__newsletter-form button:hover,
.lis-search__form button.wp-block-search__button:hover {
	background: var(--lis-green-dark);
	color: #FFFFFF;
}

/* Hero search send icon-button */
.lis-hero__send:hover { background: var(--lis-green); color: #FFFFFF; }
/* ------------------------------------------------------------------ *
 * Category cards — centered layout + whole-card clickable (stretched link)
 * ------------------------------------------------------------------ */
.lis-cat-card__inner {
	position: relative;       /* anchor for the stretched link + corner arrow */
	align-items: center;      /* center icon/title/text horizontally */
	text-align: center;
}

.lis-cat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 2px;
}

/* Arrow indicator → top-right corner, out of the centered flow */
.lis-cat-card__arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	color: #6B7280;
	z-index: 2;
}

/* Stretched link: the title's <a> expands to cover the entire card,
   so a click anywhere on the box follows the link. */
.lis-cat-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 16px;
}
/* Arrow is decorative — let clicks pass through to the stretched card link */
.lis-cat-card__arrow { pointer-events: none; }
/* ------------------------------------------------------------------ *
 * Accent NUMBERS in green (stat figures, sample rates, calculator)
 * ------------------------------------------------------------------ */
.lis-trust__stats h3 { color: #073B73 !important; }   /* 2M+ / 50+ / 15yrs */
.lis-rate-card__rate { color: #073B73; }               /* $18 / $28 / $52 (term + whole) */
.lis-promo__float-num { color: #073B73; }              /* $500,000 floating card */
.lis-app__stat-num { color: #073B73; }                 /* 2-min / 100% / 0 */
.lis-app__phone-num { color: #073B73; }                /* $500K phone mockup */

/* ================================================================== *
 * 46. PAGE SECTIONS — consistent vertical rhythm                      *
 * The embedded patterns (rates, FAQ, newsletter) ship with large      *
 * front-page margins (section-y ≈ 96px). Inside a page they stacked    *
 * with the bands' padding to make uneven 150–200px gaps. On pages,     *
 * collapse those external margins so the bands' padding sets one       *
 * consistent rhythm.                                                   *
 * ================================================================== */
body.page .entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The FAQ accordion has margins but no padding — give it padding on pages
   so its spacing matches the padded sections around it. */
body.page .entry-content > .lis-faq {
	padding-top: 8px !important;
	padding-bottom: 32px !important;
}

/* The rates band is a contained, rounded card (not a full-width band), so with
   the margins above collapsed to 0 it sat flush against the block above and the
   coloured band below. Restore breathing room around the card so it doesn't
   touch top or bottom. */
body.page .entry-content > .lis-rates {
	margin-top: 48px !important;
	margin-bottom: 48px !important;
}

/* Eyebrows that START a new sub-section inside a shared band were cramped
   against the block above (only 8–16px). Give every in-band section the same
   generous space above it. Scoped to primary-coloured eyebrows that are NOT
   the first child, so the hero eyebrow, each band's leading eyebrow, and the
   takeaways callout are left alone. */
body.page .entry-content > section:not(:first-child) > p.is-style-eyebrow.has-primary-color:not(:first-child) {
	margin-top: 64px !important;
}

/* Safety net: a custom border color must never recolor an element's TEXT.
   (WordPress' border-support class is `has-border-color`; we renamed the
   palette slug away from `border` to avoid the collision, but keep this so
   any future border-colored block stays legible.) */
.has-border-color {
	border-color: var(--wp--preset--color--line);
}

/* ================================================================== *
 * 47. News-carousel cards — hover brings a dimmed peek-card forward   *
 * The coverflow dims side cards (opacity 0.35–0.65). With no hover    *
 * rule, hovering a dimmed card left it faded/unreadable. Brighten it  *
 * to full opacity and lift it above its neighbours on hover.          *
 * ================================================================== */
.lis-news-card:hover {
	opacity: 1 !important;
	z-index: 4;
}

/* ================================================================== *
 * 48. Blog index post-cards inside .entry-content                     *
 * The /blog/ page renders its post grid inside .entry-content (the    *
 * page post-content), so the article-body link styling (brand-blue +  *
 * underline, plus the thick-underline hover) bled onto the post-card  *
 * title + category links. Reset card links so they read as cards, not *
 * body-text links — matching the homepage cards.                      *
 * ================================================================== */
.entry-content .lis-post-card a {
	color: inherit;
	text-decoration: none !important;
}
.entry-content .lis-post-card a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none !important;
}

.entry-content .wp-block-post-template.is-layout-grid {
	gap: 40px !important;
}

/* ================================================================== *
 * 49. Reusable post-card media — gradient + DYNAMIC overlays          *
 * Instead of baking the category + brand into the featured image, the *
 * media is a brand gradient with a book icon, and the category pill   *
 * (bottom-left, pulled live from the post) + brand wordmark (bottom-  *
 * right) are overlaid as HTML. Works for any post/category.           *
 * ================================================================== */
/* The card is a vertical flex container that aligns children to the start, so
   force the media + body to full width (otherwise the media shrinks to the
   icon's width and aspect-ratio collapses it to a sliver). */
.lis-post-card__media,
.lis-post-card__body {
	width: 100%;
	box-sizing: border-box;
}

.lis-post-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #0B5FA5 0%, #073B73 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lis-post-card__icon {
	display: flex;
	color: rgba(255, 255, 255, 0.82);
}

.lis-post-card__icon svg {
	width: 62px;
	height: 62px;
}

.lis-post-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(7, 46, 82, 0) 0%, rgba(7, 46, 82, 0.5) 100%);
}

/* Category pill (bottom-left) — the post-terms block, restyled. */
.lis-post-card__cat {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lis-post-card__cat::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #0B5FA5;
	margin-right: 7px;
}

.lis-post-card__cat a,
.lis-post-card__cat {
	color: #0B5FA5 !important;
	text-decoration: none !important;
}

/* Brand wordmark (bottom-right). */
.lis-post-card__brand {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	opacity: 0.92;
	white-space: nowrap;
}

.lis-post-card__brand span {
	color: #7CC6FF;
}

/* Card text area — comfortable padding (esp. bottom so the date isn't tight). */
.lis-post-card__body {
	padding: 20px 20px 24px !important;
}