/* stylelint-disable no-descending-specificity --
 * Section ordering in this file is intentional: tokens (sections 1-10) →
 * site-end / smooth scroll (11-12) → late spec-conformance + button hover
 * floor (13-14). Later high-specificity selectors (e.g. `.trustd-hero
 * .trustd-button`) intentionally appear before low-specificity catch-alls
 * — that's the override-cascade pattern this file is built on. Disabling
 * the rule for this throwaway file. */

/**
 * TAPA event-theme overrides.
 *
 * Disposable reskin of the Trustd block theme to the client's flat "app
 * design system". Loaded AFTER tokens.css + all block styles (enqueued as
 * `trustd-tapa-overrides`, dependent on `trustd-tokens`) so these targeted
 * component rules win the cascade where tokens alone can't reach.
 *
 * Scope: flatten COLOURS and DECORATION only. Every animation (hero shield
 * pulse, heading word fly-in, persona shuffle, ticker scroll, button drift)
 * is left untouched — we never disable motion, only repaint it flat.
 *
 * Exact brand hexes used directly (the token remap is a separate concern):
 *   navy            #003C79
 *   cyan            #54E3EF
 *   light surface   #F0F5FA
 *   card border     #D3DCE5
 *   body grey       #6B7684 / #1F2B37
 */

/* ===========================================================================
 * 1. HEADER / NAV — transparent over the hero at the top, white bar on scroll
 *
 * Client direction (updated): the bar is SEE-THROUGH at the top so the navy
 * hero shows behind it (logo + links + CTA render white via the theme's native
 * `is-style-inverse` transparent state), then docks to a SOLID WHITE bar with
 * brand-navy logo / links / CTA once the user scrolls (`data-scrolled='true'`).
 * So every "white bar / navy contents" rule below is gated to the scrolled
 * state; the top state is left to the theme's native transparent + inverse
 * treatment. Hover / active / press link effects stay stripped in both states.
 * ======================================================================== */

.trustd-header {
	background: transparent;
}

/* Docked (scrolled) bar = solid white, hairline border, no glass blur. At the
 * top the native `--state-transparent` / `trustd-hero-lead` rules keep the
 * container see-through. */
.trustd-header[data-scrolled='true'] .trustd-header__container {
	background: #fff;
	border-color: #d3dce5;
	box-shadow: none;
	backdrop-filter: none;
}

/* Docked: nav links + the Log in link render in brand navy on the white bar.
 * At the top they inherit the native inverse (white) treatment. */
.trustd-header[data-scrolled='true'] .trustd-navigation-link,
.trustd-header[data-scrolled='true'] .trustd-navigation-link__label,
.trustd-header[data-scrolled='true'] .trustd-header__nav a,
.trustd-header[data-scrolled='true'] .trustd-header__cta .trustd-navigation-link,
.trustd-header[data-scrolled='true'] .trustd-header__cta .trustd-navigation-link__label {
	color: #003c79;
}

/* Docked: logo flips to brand navy (navy shield, white check, navy wordmark).
 * At the top the native inverse logo (white shield + wordmark) shows. */
.trustd-header[data-scrolled='true'] .trustd-logo {
	color: #003c79;
}

.trustd-header[data-scrolled='true'] .trustd-logo__shield {
	fill: #003c79;
}

.trustd-header[data-scrolled='true'] .trustd-logo__check {
	fill: #fff;
}

.trustd-header[data-scrolled='true'] .trustd-logo__wordmark {
	fill: #003c79;
}

/* Over the hero (transparent + inverse): white shield with a brand-navy check
 * knocked out of it (matches the footer logo). The base inverse `on-primary`
 * check reads near-black, so pin it to brand navy #003C79. Scoped to
 * `.is-style-inverse` (present only at hero-top — view.ts strips it on engage)
 * so idle white-bar headers on non-hero pages keep their white check on the
 * navy shield. */
.trustd-header.is-style-inverse .trustd-logo__check {
	fill: #003c79;
}

/* Strip every nav-link state: no outline pill on hover, no filled active pill,
 * no chevron nudge, no press scale. Plain text links. */
.trustd-header .trustd-navigation-link::before,
.trustd-header .trustd-navigation-link:hover::before,
.trustd-header .trustd-navigation-link:focus-visible::before,
.trustd-header .trustd-navigation-link.is-active::before {
	background: transparent;
	border-color: transparent;
}

.trustd-header[data-scrolled='true'] .trustd-navigation-link.is-active {
	color: #003c79;
}

.trustd-header .trustd-navigation-link:active .trustd-navigation-link__inner {
	scale: 1;
}

.trustd-header .trustd-navigation-link:hover .trustd-navigation-link__icon,
.trustd-header .trustd-navigation-link:focus-visible .trustd-navigation-link__icon {
	transform: none;
}

/* ===========================================================================
 * 2. HERO — navy background, flat cyan accent, white-ish body
 *
 * Keep the animated shield backdrop (__particles / __shield run on their own
 * canvas — left untouched). Only repaint the section + flatten the gradient
 * emphasis to solid cyan.
 * ======================================================================== */

.trustd-hero,
.trustd-hero.is-style-inverse {
	background: #003c79;
}

/* Flatten the cyan→navy headline gradient to SOLID cyan. The emphasis spans
 * paint via background-clip:text + transparent fill, so we both set the
 * colour and reset -webkit-text-fill-color back to the colour. */
.trustd-hero .trustd-hero__heading-emphasis,
.trustd-hero .trustd-statement__heading-emphasis,
.trustd-hero .trustd-text-gradient {
	background-image: none;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	color: #54e3ef;
	-webkit-text-fill-color: #54e3ef;
}

/* Hero body copy. */
.trustd-hero .trustd-hero__body,
.trustd-hero .trustd-hero__body > p,
.trustd-hero .trustd-statement__body,
.trustd-hero .trustd-statement__body > p {
	color: rgba(255, 255, 255, 0.82);
}

/* ===========================================================================
 * 3. "HOW IT WORKS" — the one content section that must stay LIGHT
 *
 * It ships with `is-style-inverse`, which paints a dark surface. Force it
 * back to the light app surface with navy headings and grey body. Higher
 * specificity + later load beats `.trustd-section.is-style-inverse`.
 * ======================================================================== */

.trustd-section.trustd-section--how-it-works,
.trustd-section--how-it-works.is-style-inverse {
	background-color: #f0f5fa;
	color: #1f2b37;
}

.trustd-section--how-it-works .trustd-statement__heading,
.trustd-section--how-it-works .trustd-heading,
.trustd-section--how-it-works h1,
.trustd-section--how-it-works h2,
.trustd-section--how-it-works h3 {
	color: #003c79;
}

.trustd-section--how-it-works .trustd-statement__body,
.trustd-section--how-it-works .trustd-statement__body > p {
	color: #6b7684;
}

.trustd-section--how-it-works p {
	color: #1f2b37;
}

/* Subtle (grey) section tone — the light grey #F0F5FA band used to alternate
 * product sections (spec §F). Registered as the `subtle` block style on
 * trustd/section in functions.php; editors pick "Subtle (grey)" in the Styles
 * panel to turn a section into a grey band (white sections stay default). */
.trustd-section.is-style-subtle {
	background-color: #f0f5fa;
}

/* ===========================================================================
 * 4. EYEBROW / BADGE — strip the pill, navy text + shield glyph
 *
 * Remove background / border / radius / padding box. Prepend a 16x16 navy
 * shield-with-white-tick (sourced from the logo shield + check paths,
 * viewBox 0 0 33 40) as an inline-SVG background-image, 7px from the label.
 * ======================================================================== */

.trustd-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: #003c79;
	letter-spacing: 1.5px;
}

.trustd-badge::before {
	content: '';
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2033%2040'%3E%3Cpath%20fill='%23003C79'%20d='M32.7804%208.27302L32.5476%207.1892L16.5959%200L0.644197%207.1892L0.415136%208.27302C0.370074%208.46803%20-3.66667%2028.0518%2014.4067%2038.7812C14.7409%2038.9799%2015.0826%2039.1749%2015.4468%2039.3775L16.5959%2040L17.6248%2039.4412C36.8735%2028.9631%2032.8217%208.48303%2032.7767%208.27302H32.7804Z'/%3E%3Cpath%20fill='%23FFFFFF'%20d='M25.7847%2015.4172L14.0575%2027.2605C13.697%2027.6242%2013.205%2027.8305%2012.6906%2027.8342C12.1761%2027.8342%2011.6842%2027.628%2011.3237%2027.2605L7.41466%2023.3115C6.65989%2022.5427%206.65989%2021.3126%207.41466%2020.5475C8.15817%2019.7937%209.37483%2019.7825%2010.1296%2020.525C10.1371%2020.5325%2010.1446%2020.54%2010.1521%2020.5475L12.6906%2023.1127L23.0472%2012.6533C23.4077%2012.2895%2023.8996%2012.0833%2024.414%2012.0833H24.4216C25.2064%2012.087%2025.9086%2012.5633%2026.2052%2013.2908C26.5056%2014.0184%2026.3404%2014.8547%2025.7884%2015.4172H25.7847Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* On dark / inverse surfaces (the hero) the eyebrow paints in solid WHITE
 * with a WHITE shield + NAVY tick — reverse of the light-surface variant. */
.is-style-inverse .trustd-badge {
	color: #fff;
	background-color: transparent;
}

.is-style-inverse .trustd-badge::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2033%2040'%3E%3Cpath%20fill='%23FFFFFF'%20d='M32.7804%208.27302L32.5476%207.1892L16.5959%200L0.644197%207.1892L0.415136%208.27302C0.370074%208.46803%20-3.66667%2028.0518%2014.4067%2038.7812C14.7409%2038.9799%2015.0826%2039.1749%2015.4468%2039.3775L16.5959%2040L17.6248%2039.4412C36.8735%2028.9631%2032.8217%208.48303%2032.7767%208.27302H32.7804Z'/%3E%3Cpath%20fill='%23003C79'%20d='M25.7847%2015.4172L14.0575%2027.2605C13.697%2027.6242%2013.205%2027.8305%2012.6906%2027.8342C12.1761%2027.8342%2011.6842%2027.628%2011.3237%2027.2605L7.41466%2023.3115C6.65989%2022.5427%206.65989%2021.3126%207.41466%2020.5475C8.15817%2019.7937%209.37483%2019.7825%2010.1296%2020.525C10.1371%2020.5325%2010.1446%2020.54%2010.1521%2020.5475L12.6906%2023.1127L23.0472%2012.6533C23.4077%2012.2895%2023.8996%2012.0833%2024.414%2012.0833H24.4216C25.2064%2012.087%2025.9086%2012.5633%2026.2052%2013.2908C26.5056%2014.0184%2026.3404%2014.8547%2025.7884%2015.4172H25.7847Z'/%3E%3C/svg%3E");
}

/* Hero eyebrow is the one sanctioned cyan use (spec §2, §D): Bright Blue
 * #54E3EF text + a CYAN shield with a brand-navy tick. Overrides the white inverse
 * variant above (same specificity, later in source so it wins) — scoped to the
 * hero so other inverse eyebrows keep the white-on-dark treatment. */
.trustd-hero .trustd-badge {
	color: #54e3ef;
}

.trustd-hero .trustd-badge::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2033%2040'%3E%3Cpath%20fill='%2354E3EF'%20d='M32.7804%208.27302L32.5476%207.1892L16.5959%200L0.644197%207.1892L0.415136%208.27302C0.370074%208.46803%20-3.66667%2028.0518%2014.4067%2038.7812C14.7409%2038.9799%2015.0826%2039.1749%2015.4468%2039.3775L16.5959%2040L17.6248%2039.4412C36.8735%2028.9631%2032.8217%208.48303%2032.7767%208.27302H32.7804Z'/%3E%3Cpath%20fill='%23003C79'%20d='M25.7847%2015.4172L14.0575%2027.2605C13.697%2027.6242%2013.205%2027.8305%2012.6906%2027.8342C12.1761%2027.8342%2011.6842%2027.628%2011.3237%2027.2605L7.41466%2023.3115C6.65989%2022.5427%206.65989%2021.3126%207.41466%2020.5475C8.15817%2019.7937%209.37483%2019.7825%2010.1296%2020.525C10.1371%2020.5325%2010.1446%2020.54%2010.1521%2020.5475L12.6906%2023.1127L23.0472%2012.6533C23.4077%2012.2895%2023.8996%2012.0833%2024.414%2012.0833H24.4216C25.2064%2012.087%2025.9086%2012.5633%2026.2052%2013.2908C26.5056%2014.0184%2026.3404%2014.8547%2025.7884%2015.4172H25.7847Z'/%3E%3C/svg%3E");
}

/* ===========================================================================
 * 5. BUTTONS — text only, no arrows, no icon-nudge
 * ======================================================================== */

.trustd-button .trustd-button__icon {
	display: none;
}

/* Neutralise the hover icon-nudge (the icon is gone, but keep the transform
 * dead in case any variant re-shows it). */
.trustd-button:hover .trustd-button__icon,
.trustd-button:focus-visible .trustd-button__icon {
	transform: none;
}

/* Flatten the gradient CTA to a solid fill (client: no gradients, flat solid).
 * Default = brand navy / white text; the drifting + hover gradient layers and
 * the teal glow are removed. */
.trustd-button--variant-primary {
	background: #003c79;
	color: #fff;
	box-shadow: none;
}

.trustd-button--variant-primary::before,
.trustd-button--variant-primary::after {
	display: none;
}

.trustd-button--variant-primary:hover,
.trustd-button--variant-primary:focus-visible {
	box-shadow: none;
}

.trustd-button--variant-secondary {
	background: #003c79;
	color: #fff;
}

/* Where a brand-navy button sits on a dark / navy surface (hero, CTA banner,
 * footer, site-end) flip it to solid white with navy text for contrast. */
.is-style-inverse .trustd-button--variant-primary,
.trustd-hero .trustd-button,
.trustd-footer .trustd-button,
.trustd-site-end .trustd-button {
	background: #fff;
	color: #003c79;
}

/* The header bar is white, so its CTA stays brand-navy even though the header
 * carries the inverse flag (which would otherwise whiten it above). */
.trustd-header .trustd-button--variant-primary {
	background: #003c79;
	color: #fff;
}

/* ===========================================================================
 * 6. CARDS — flat white surface, hairline border, subtle shadow, no glow
 *
 * Covers the persona panel shell + its inner feature/image cards and the
 * persona-stack cards. Strip gradient/tint/glow/decoration fills.
 * ======================================================================== */

.trustd-persona-panel,
.trustd-persona-panel__features-card,
.trustd-persona-panel__image-card,
.trustd-persona-stack-card {
	background: #fff;
	border: 1px solid #d3dce5;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 60, 121, 0.06);
}

/* The features card paints a 90%-alpha surface-container tint + a decoration
 * layer; flatten both. */
.trustd-persona-panel__features-card {
	background: #fff;
}

.trustd-persona-panel__decoration {
	display: none;
}

/* Feature pills carry a primary-container tint — flatten to the light app
 * surface so the card reads uniformly flat. */
.trustd-persona-panel__feature {
	background: #f0f5fa;
}

/* PersonaStack card is built in layers: a frosted 90%-alpha `__bg`, an opaque
 * `__content` surface, and two blurred gradient-glow `__decoration` blobs.
 * Flatten the surfaces to white and drop the glow blobs + the frosted blur so
 * the card reads as a flat white tile (the shuffle animation is untouched). */
.trustd-persona-stack-card__bg,
.trustd-persona-stack-card__content {
	background: #fff;
	backdrop-filter: none;
}

.trustd-persona-stack-card__decoration {
	display: none;
}

/* ===========================================================================
 * 7. FOOTER — navy with muted-white links
 * ======================================================================== */

.trustd-footer {
	background: #003c79;
	color: #fff;
}

.trustd-footer a,
.trustd-footer .trustd-footer-link,
.trustd-footer .trustd-footer-link__label,
.trustd-footer .trustd-footer__social {
	color: rgba(255, 255, 255, 0.75);
}

.trustd-footer a:hover,
.trustd-footer a:focus-visible,
.trustd-footer .trustd-footer-link:hover,
.trustd-footer .trustd-footer-link:hover .trustd-footer-link__label,
.trustd-footer .trustd-footer-link:focus-visible,
.trustd-footer .trustd-footer-link:focus-visible .trustd-footer-link__label,
.trustd-footer .trustd-footer__social:hover,
.trustd-footer .trustd-footer__social:focus-visible {
	color: #fff;
}

/* The footer also paints heading + paragraph copy via on-surface tokens.
 * Force them readable on navy. */
.trustd-footer .trustd-footer__heading,
.trustd-footer .trustd-footer__paragraph,
.trustd-footer .trustd-footer__legal {
	color: #fff;
}

/* Footer heading accent is a cyan→navy gradient run — the navy end vanishes
 * on the navy footer. Flatten to solid cyan like the hero accent. */
.trustd-footer .trustd-footer__heading-accent,
.trustd-footer .trustd-text-gradient {
	background-image: none;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	color: #54e3ef;
	-webkit-text-fill-color: #54e3ef;
}

/* Dividers / borders inside the footer. */
.trustd-footer,
.trustd-footer .trustd-footer-menu,
.trustd-footer .trustd-footer__bottom,
.trustd-footer .trustd-footer__legal {
	border-color: rgba(255, 255, 255, 0.12);
}

/* Footer brand logo: solid-white variant on the navy footer (white shield +
 * white wordmark, navy check knockout). The default brand logo is navy and
 * vanishes against the navy surface. */
.trustd-footer .trustd-logo {
	color: #fff;
}

.trustd-footer .trustd-logo__shield,
.trustd-footer .trustd-logo__wordmark {
	fill: #fff;
}

.trustd-footer .trustd-logo__check {
	fill: #003c79;
}

/* ===========================================================================
 * 8. TEXT ALIGNMENT — left-align all copy
 *
 * The theme centres the hero/statement flex columns. Force left.
 * ======================================================================== */

/* Hero __inner is a row flex (content column + shield column). Centre the
 * columns vertically against each other so the text + shield read aligned. */
.trustd-hero__inner {
	align-items: center;
	text-align: left;
}

.trustd-hero__statement,
.trustd-statement,
.trustd-statement__group {
	align-items: flex-start;
	text-align: left;
}

.trustd-hero__heading,
.trustd-hero__body,
.trustd-statement__heading,
.trustd-statement__body,
.trustd-heading {
	text-align: left;
}

/* ===========================================================================
 * 9. Hide any scrolling ticker / marquee
 * ======================================================================== */

.trustd-network-events-ticker {
	display: none;
}

/* ===========================================================================
 * 10. Flatten remaining decorative glows / blooms (keep all motion)
 *
 * These are static decorative paint layers — hiding them removes the glow
 * without touching any keyframed element.
 * ======================================================================== */

.trustd-persona-stack__glow,
.trustd-hero__shield-glow,
.trustd-footer__wordmark {
	display: none;
}

.trustd-footer::before {
	background: none;
}

/* ===========================================================================
 * 11. SITE-END (footer base) — remove the procedural canvas animation
 *
 * Hide the animated mesh canvas and flatten the site-end surface to navy so
 * the bottom strip reads as one continuous navy footer. The redundant bottom
 * logo is dropped; the copyright line stays (muted white). NOTE: moving the
 * copyright UP into the footer's link columns is a render.php change + rebuild,
 * tracked separately — this is the flat interim.
 * ======================================================================== */

.trustd-site-end {
	min-height: 0;
	background: #003c79;
}

/* Copyright now lives in the footer's bottom row (see footer render.php),
 * under the legal links + LinkedIn. Muted white, small. */
.trustd-footer__copyright {
	margin-block-start: var(--trustd-space-lg);
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--trustd-text-body-small);
	line-height: var(--trustd-leading-body-small);
}

.trustd-footer__copyright-line {
	margin: 0;
}

/* ===========================================================================
 * 12. Smooth anchor scrolling for the product nav links, with an offset that
 * clears the sticky header.
 * ======================================================================== */

html {
	scroll-behavior: smooth;
}

:target {
	scroll-margin-top: 96px;
}

/* ===========================================================================
 * 13. SPEC CONFORMANCE — exact paddings, radii, badges, hover bug fix
 *
 * Appended pass to land the client's spec values on top of the colour
 * flattening above. All motion preserved. Animations untouched. Targeted
 * scoping only — selectors hit the rendered class names from the block
 * primitives without inventing new structure.
 * ======================================================================== */

/* --- 13.1 Button hover bug fix on dark surfaces --------------------------
 *
 * Section 5 already paints dark-surface buttons solid white with navy text.
 * On :hover the gradient ::before is `display:none`'d, but the label was
 * still washing out. Belt-and-braces: force the WHITE background + NAVY
 * text on the button element AND the inner `__label` for every
 * interactive state, and kill the label text-shadow so nothing can smear
 * the glyph against the white pill. !important is justified here because
 * we're fighting the upstream `.trustd-button--variant-primary:hover`
 * cascade across multiple ancestor scopes (hero, footer, site-end,
 * is-style-inverse) and we explicitly want this to be the floor.
 * ----------------------------------------------------------------------- */

.trustd-hero .trustd-button,
.trustd-hero .trustd-button:hover,
.trustd-hero .trustd-button:focus-visible,
.trustd-hero .trustd-button:active,
.trustd-footer .trustd-button,
.trustd-footer .trustd-button:hover,
.trustd-footer .trustd-button:focus-visible,
.trustd-footer .trustd-button:active,
.trustd-site-end .trustd-button,
.trustd-site-end .trustd-button:hover,
.trustd-site-end .trustd-button:focus-visible,
.trustd-site-end .trustd-button:active,
.is-style-inverse .trustd-button--variant-primary,
.is-style-inverse .trustd-button--variant-primary:hover,
.is-style-inverse .trustd-button--variant-primary:focus-visible,
.is-style-inverse .trustd-button--variant-primary:active {
	background: #fff !important;
	background-image: none !important;
	color: #003c79 !important;
	box-shadow: none !important;
}

.trustd-hero .trustd-button .trustd-button__label,
.trustd-hero .trustd-button:hover .trustd-button__label,
.trustd-hero .trustd-button:focus-visible .trustd-button__label,
.trustd-hero .trustd-button:active .trustd-button__label,
.trustd-footer .trustd-button .trustd-button__label,
.trustd-footer .trustd-button:hover .trustd-button__label,
.trustd-footer .trustd-button:focus-visible .trustd-button__label,
.trustd-footer .trustd-button:active .trustd-button__label,
.trustd-site-end .trustd-button .trustd-button__label,
.trustd-site-end .trustd-button:hover .trustd-button__label,
.trustd-site-end .trustd-button:focus-visible .trustd-button__label,
.trustd-site-end .trustd-button:active .trustd-button__label,
.is-style-inverse .trustd-button--variant-primary .trustd-button__label,
.is-style-inverse .trustd-button--variant-primary:hover .trustd-button__label,
.is-style-inverse .trustd-button--variant-primary:focus-visible .trustd-button__label,
.is-style-inverse .trustd-button--variant-primary:active .trustd-button__label {
	color: #003c79 !important;
	text-shadow: none !important;
	-webkit-text-fill-color: #003c79 !important;
}

/* Re-confirm the gradient ::before/::after layers stay killed on hover in
 * every dark-surface scope, in case a more specific :hover rule re-asserts
 * them from a future block update. */
.trustd-hero .trustd-button--variant-primary::before,
.trustd-hero .trustd-button--variant-primary::after,
.trustd-hero .trustd-button--variant-primary:hover::before,
.trustd-hero .trustd-button--variant-primary:hover::after,
.trustd-hero .trustd-button--variant-primary:focus-visible::before,
.trustd-hero .trustd-button--variant-primary:focus-visible::after,
.trustd-footer .trustd-button--variant-primary::before,
.trustd-footer .trustd-button--variant-primary::after,
.trustd-footer .trustd-button--variant-primary:hover::before,
.trustd-footer .trustd-button--variant-primary:hover::after,
.trustd-footer .trustd-button--variant-primary:focus-visible::before,
.trustd-footer .trustd-button--variant-primary:focus-visible::after,
.trustd-site-end .trustd-button--variant-primary::before,
.trustd-site-end .trustd-button--variant-primary::after,
.is-style-inverse .trustd-button--variant-primary::before,
.is-style-inverse .trustd-button--variant-primary::after,
.is-style-inverse .trustd-button--variant-primary:hover::before,
.is-style-inverse .trustd-button--variant-primary:hover::after,
.is-style-inverse .trustd-button--variant-primary:focus-visible::before,
.is-style-inverse .trustd-button--variant-primary:focus-visible::after {
	display: none !important;
	opacity: 0 !important;
	background: none !important;
}

/* --- 13.2 Button radius ------------------------------------------------- */

.trustd-button {
	border-radius: 6px;
}

/* --- 13.3 / 13.4  Unified content gutter (hero / section) ----------------
 *
 * Hero and section sit in a centred 1440px container; pin them to the SAME
 * inner gutter (24px mobile, 80px desktop) so the hero copy and section copy
 * line up in one column. Hero keeps its 88/80 block padding (plus the
 * header-height offset on hero-led pages); only the inline gutter is unified.
 *
 * The header pill (below) deliberately diverges: its desktop padding is a
 * tight 16px frame with a 32px logo-side inset, so the bar no longer rides the
 * 80px gutter. The header logo drops its extra inline-start padding so it sits
 * flush against that 32px inset.
 * ----------------------------------------------------------------------- */

.trustd-hero .trustd-hero__inner {
	padding-block: 88px 80px;
	padding-inline: 24px;
	gap: 64px;
}

.trustd-section .trustd-section__inner {
	padding-block: 80px;
	padding-inline: 24px;
	gap: 64px;
}

body.trustd-hero-lead .trustd-hero .trustd-hero__inner {
	padding-top: calc(88px + var(--trustd-header-height, 6.625rem));
	padding-bottom: 80px;
	padding-inline: 24px;
}

.trustd-header__logo {
	padding-inline-start: 0;
}

/* Desktop pill padding: a tight 16px frame with a 32px logo-side inset
 * (top/right/bottom 16px, left 32px). Gated to the desktop layout — the
 * complement of the `@container (max-width: 1140px)` mobile swap in the block's
 * own style.css. The header carries a 16px inline padding either side, so a
 * 1140px container ~= a 1172px viewport (the width the bar flips to its desktop
 * layout). Below this the pill keeps the block-default 12px padding, which
 * already reads fine on mobile / tablet. */
@container (min-width: 1141px) {

	.trustd-header__container {
		padding-block: 16px;
		padding-inline: 32px 16px;
	}
}

@media (min-width: 56rem) {

	.trustd-hero .trustd-hero__inner,
	.trustd-section .trustd-section__inner {
		padding-inline: 80px;
	}

	body.trustd-hero-lead .trustd-hero .trustd-hero__inner {
		padding-inline: 80px;
	}
}

/* Section image frame (used by media-text) — radius 12px, empty placeholder
 * paints the card-border grey so a missing image still reads as a clean
 * frame. */
.trustd-media-text__media,
.trustd-media-text__image-frame,
.trustd-section__image,
.trustd-persona-panel__image-card {
	border-radius: 12px;
}

.trustd-media-text__media:empty,
.trustd-media-text__image-frame:empty,
.trustd-section__image:empty {
	background-color: #d3dce5;
}

/* Two-column gap for media-text rows inside sections. */
.trustd-media-text,
.trustd-media-text__inner {
	gap: 64px;
}

/* --- 13.5 IconListItem — 44×44 navy badge, 22×22 white round-cap stroke -
 *
 * The block ships at 32×32 with a 16/20/24 icon. Bump the badge box to
 * 32px (the block default size), set the icon to
 * 18px with white stroke + round caps.
 *
 * Per the brief: where icon-list-items render as a plain list (the default
 * here — they are flex rows in a column with `lg` gap, no card chrome) we
 * DO NOT impose card chrome. Only the badge sizing + icon stroke land.
 * (See report note.)
 * ----------------------------------------------------------------------- */

.trustd-icon-list-item {

	/* Bump the two CSS custom-property knobs the block exposes — width +
	 * height read from `--trustd-icon-list-item-badge-size`. */
	--trustd-icon-list-item-badge-size: 32px;
	--trustd-icon-list-item-gap: 16px;

	/* Centre the label vertically against the larger 44x44 badge. The block
	 * defaults to flex-start (pins badge to first text line) which reads as
	 * top-aligned with the bigger badge. */
	align-items: center;
}

.trustd-icon-list-item__icon {
	background: #003c79;
	border-radius: 4px;
}

.trustd-icon-list-item__icon > .wp-block-trustd-icon,
.trustd-icon-list-item__icon .trustd-icon,
.trustd-icon-list-item__icon svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: #fff;
}

/* --- 13.6 Eyebrow → next H2 spacing (16px) ------------------------------
 *
 * Statement's flex-column gap is `lg` (16px) on mobile and `xl` (24px) on
 * desktop. Pin it to 16px universally so the eyebrow always sits 16px
 * above the heading per spec.
 * ----------------------------------------------------------------------- */

.trustd-statement__group {
	gap: 16px;
}

@container trustd-statement (min-width: 56rem) {

	.trustd-statement__group {
		gap: 16px;
	}
}

/* --- 13.7 CTA banner (footer Dylan card area) ---------------------------
 *
 * The Dylan "Book a consultation" card lives inside the navy footer (see
 * footer/render.php composing trustd/book-widget). The footer __inner is
 * the container that holds the headline + Dylan card + button. Apply the
 * 72/48 padding rhythm there. The avatar pin is a frame override on the
 * book-widget image-frame: 72px circular, 2px semi-white border.
 * ----------------------------------------------------------------------- */

.trustd-book-widget__image-frame {
	width: 72px;
	height: 72px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
}

.trustd-book-widget__image {
	border-radius: 50%;
}

/* --- 13.8 Footer padding (56/32 block) + shared content gutter ----------
 *
 * 56px top / 32px bottom block padding, with the SAME 24px / 80px inline
 * gutter as the header / hero / section / CTA so the footer content lines up
 * in the one page column. (The book-widget CTA banner that used to live here
 * has moved out to trustd/cta.)
 * ----------------------------------------------------------------------- */

.trustd-footer .trustd-footer__inner {
	padding-block: 56px 32px;
	padding-inline: 24px;
}

@media (min-width: 56rem) {

	.trustd-footer .trustd-footer__inner {
		padding-inline: 80px;
	}
}

/* ===========================================================================
 * 14. SUPPLEMENTAL TYPOGRAPHY — components without a type role class
 *
 * The token agent set the type ladder per the doc. Four spec items don't sit
 * on a role class (their styling is component-scoped), so they live here:
 *   - footer copyright (12/16/400)
 *   - footer column heading (11/16/700, uppercase, 1.5px LS, rgba white .45)
 *   - footer link (14/22/500)
 *   - "SUPPORTING FEATURES" label (11/16/700, uppercase, 2px LS, #8996A3)
 * ======================================================================== */

.trustd-footer__copyright,
.trustd-footer__copyright-line {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: 0;
}

.trustd-footer .trustd-footer-menu__title {
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.45);
}

.trustd-footer .trustd-footer-link,
.trustd-footer .trustd-footer-link__label {
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
}

/* The "SUPPORTING FEATURES" label is the icon-list heading on each section.
 * BlockName: trustd/icon-list, rendered as `.trustd-icon-list__heading`. */
.trustd-icon-list__heading {
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #8996a3;
}

/* ===========================================================================
 * 15. HEADER CTA — scroll-state aware
 *
 * Docked (scrolled) over the white bar: brand-navy fill + white text. At the
 * top, floating over the navy hero, the CTA follows spec §C: transparent fill,
 * 1.5px solid white border, white text. Both states beat §13.1's
 * `.is-style-inverse .trustd-button--variant-primary { … !important }` through
 * higher specificity + !important (and later source order).
 * ======================================================================== */

/* Docked: navy filled. */
.trustd-header[data-scrolled='true'] .trustd-button,
.trustd-header[data-scrolled='true'] .trustd-button:hover,
.trustd-header[data-scrolled='true'] .trustd-button:focus-visible,
.trustd-header[data-scrolled='true'] .trustd-button:active {
	background: #003c79 !important;
	background-image: none !important;
	color: #fff !important;

	/* Keep a 1.5px border (navy on navy = invisible) so the button box height
	 * matches the transparent-state white-bordered CTA. Without it the border
	 * collapses 1.5px→0 on dock, the header shrinks ~2px and the page jumps. */
	border: 1.5px solid #003c79 !important;
	box-shadow: none !important;
}

.trustd-header[data-scrolled='true'] .trustd-button .trustd-button__label,
.trustd-header[data-scrolled='true'] .trustd-button:hover .trustd-button__label,
.trustd-header[data-scrolled='true'] .trustd-button:focus-visible .trustd-button__label,
.trustd-header[data-scrolled='true'] .trustd-button:active .trustd-button__label {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: none !important;
}

/* Top (over the hero): transparent fill + 1.5px white border (spec §C). */
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:hover,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:focus-visible,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:active {
	background: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1.5px solid #fff !important;
	box-shadow: none !important;
}

.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button .trustd-button__label,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:hover .trustd-button__label,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:focus-visible .trustd-button__label,
.trustd-header.is-style-inverse:not([data-scrolled='true']) .trustd-button:active .trustd-button__label {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: none !important;
}

/* ===========================================================================
 * 16. HERO SECONDARY CTA — transparent outline (spec §D / §K)
 *
 * §13.1 paints every `.trustd-hero .trustd-button` white-on-navy (that's the
 * primary "Book a consultation"). The hero's SECONDARY button ("See how it
 * works") must instead be transparent with a 1.5px white border + white text.
 * Same specificity as §13.1 but later in source + !important, so it wins for
 * the secondary variant only.
 * ======================================================================== */

.trustd-hero .trustd-button--variant-secondary,
.trustd-hero .trustd-button--variant-secondary:hover,
.trustd-hero .trustd-button--variant-secondary:focus-visible,
.trustd-hero .trustd-button--variant-secondary:active {
	background: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
	box-shadow: none !important;
}

.trustd-hero .trustd-button--variant-secondary .trustd-button__label,
.trustd-hero .trustd-button--variant-secondary:hover .trustd-button__label,
.trustd-hero .trustd-button--variant-secondary:focus-visible .trustd-button__label,
.trustd-hero .trustd-button--variant-secondary:active .trustd-button__label {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: none !important;
}