/*
Theme Name: Plaid Testing
Theme URI: https://www.plaidtesting.com
Author: Growthym
Author URI: https://www.growthym.com
Description: Custom block theme for Plaid Testing, executive marketing partners for ecommerce brands. Self-installing: activating the theme sets up the logo, pages, blog posts, feature images, front page, permalinks and working forms automatically. Fully editable in the WordPress Site Editor.
Version: 3.0.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: plaidtesting
*/

/* ==========================================================================
   Design tokens. Colours come from theme.json; these are the derived values
   the components need. Motion personality: Corporate.
   ========================================================================== */
:root {
	--pt-grad: linear-gradient(90deg, #6C3EF5, #37D5C9);
	--pt-grad-d: linear-gradient(135deg, #6C3EF5, #37D5C9);
	--pt-hair-2: #B9C4D0;
	--pt-on-dark-2: #C7D0DA;
	--pt-on-dark-3: #8FA0B3;
	--pt-shadow: 0 16px 34px rgba(12, 27, 42, .10);
	--pt-shadow-lg: 0 28px 60px rgba(12, 27, 42, .30);
	--pt-e: cubic-bezier(.2, 0, 0, 1);
	--pt-e-out: cubic-bezier(.05, .7, .1, 1);
	--pt-t1: 160ms;
	--pt-t2: 280ms;
	--pt-t3: 520ms;
}

/* WordPress applies the root block gap between .wp-site-blocks children, which
   renders as a white strip under the sticky header and above the footer. The
   header, main and footer must sit flush. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--wp--preset--color--violet); outline-offset: 3px; }

/* Skip link, keyboard users land here first */
.pt-skip {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--wp--preset--color--navy); color: #fff;
	padding: .75rem 1.25rem; font-weight: 700;
}
.pt-skip:focus { left: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
header.wp-block-template-part { position: sticky; top: 0; z-index: 990; }

.pt-hdr {
	position: relative;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	transition: box-shadow var(--pt-t2) var(--pt-e);
}
.pt-hdr.pt-scrolled { box-shadow: 0 6px 24px rgba(12, 27, 42, .09); }
.pt-hdr-in {
	max-width: 1200px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .7rem 1.25rem;
}
.pt-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.pt-brand img { height: 34px; width: auto; display: block; transition: transform var(--pt-t2) var(--pt-e); }
.pt-brand:hover img { transform: scale(1.06) rotate(-3deg); }
.pt-brand-name {
	font-weight: 800; font-size: 1.12rem; letter-spacing: -.035em;
	color: var(--wp--preset--color--ink); white-space: nowrap;
}

.pt-nav { display: flex; align-items: center; gap: 1.35rem; }
.pt-ni > a, a.pt-ni {
	font-weight: 600; font-size: .94rem;
	color: var(--wp--preset--color--ink); text-decoration: none;
	position: relative; padding: .4rem 0; display: inline-block;
	transition: color var(--pt-t1) var(--pt-e);
}
a.pt-ni::after, .pt-has-sub > a::before {
	content: ""; position: absolute; left: 0; bottom: 0;
	height: 2px; width: 0; background: var(--pt-grad);
	transition: width var(--pt-t2) var(--pt-e);
}
a.pt-ni:hover, .pt-has-sub:hover > a { color: var(--wp--preset--color--violet); }
a.pt-ni:hover::after, .pt-has-sub:hover > a::before { width: 100%; }
.pt-has-sub { position: relative; }
.pt-has-sub > a::after {
	content: "\25BE"; font-size: .62em; margin-left: .4em; opacity: .55;
	display: inline-block; transition: transform var(--pt-t2) var(--pt-e);
}
.pt-has-sub:hover > a::after { transform: rotate(180deg); }
.pt-sub {
	position: absolute; top: 100%; left: -1.1rem; min-width: 250px;
	background: #fff; border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: 0 18px 42px rgba(12, 27, 42, .15);
	padding: .4rem 0; opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--pt-t2) var(--pt-e), transform var(--pt-t2) var(--pt-e), visibility var(--pt-t2);
}
.pt-has-sub:hover .pt-sub, .pt-has-sub:focus-within .pt-sub { opacity: 1; visibility: visible; transform: none; }
.pt-sub a {
	display: block; padding: .6rem 1.1rem; font-size: .92rem; font-weight: 600;
	color: var(--wp--preset--color--ink); text-decoration: none;
	border-left: 2px solid transparent;
	transition: background var(--pt-t1) var(--pt-e), border-color var(--pt-t1) var(--pt-e);
}
.pt-sub a:hover { background: var(--wp--preset--color--mist); border-left-color: var(--wp--preset--color--violet); }
.pt-cta {
	background: var(--wp--preset--color--navy); color: #fff !important;
	font-weight: 700; font-size: .92rem; padding: .7rem 1.25rem;
	text-decoration: none; white-space: nowrap; position: relative; overflow: hidden;
	transition: transform var(--pt-t1) var(--pt-e), box-shadow var(--pt-t2) var(--pt-e);
}
.pt-cta::before {
	content: ""; position: absolute; inset: 0; background: var(--pt-grad-d);
	opacity: 0; transition: opacity var(--pt-t2) var(--pt-e); z-index: 0;
}
.pt-cta span { position: relative; z-index: 1; }
.pt-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 62, 245, .34); }
.pt-cta:hover::before { opacity: 1; }
.pt-nav-t { display: none; }
.pt-burger { display: none; }

@media (max-width: 940px) {
	.pt-burger {
		display: flex; flex-direction: column; gap: 5px;
		cursor: pointer; padding: 8px 4px; margin: 0;
	}
	.pt-burger span {
		width: 24px; height: 2px; background: var(--wp--preset--color--ink);
		display: block; transition: transform var(--pt-t2) var(--pt-e), opacity var(--pt-t1) var(--pt-e);
	}
	.pt-nav-t:checked + .pt-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.pt-nav-t:checked + .pt-burger span:nth-child(2) { opacity: 0; }
	.pt-nav-t:checked + .pt-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.pt-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--wp--preset--color--hairline);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: .4rem 0 1rem; box-shadow: 0 20px 32px rgba(12, 27, 42, .14);
		max-height: calc(100vh - 62px); overflow: auto;
	}
	.pt-nav-t:checked ~ .pt-nav { display: flex; }
	.pt-ni > a, a.pt-ni { display: block; padding: .85rem 1.4rem; font-size: 1.02rem; }
	a.pt-ni::after, .pt-has-sub > a::before { display: none; }
	.pt-sub {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; min-width: 0; padding: 0 0 .35rem;
	}
	.pt-sub a { padding: .55rem 2.4rem; color: var(--wp--preset--color--slate); border-left: 0; }
	.pt-cta { display: block; margin: .7rem 1.4rem 0; text-align: center; }
}

/* ==========================================================================
   Dark sections. The brand gradient shows up as an ambient glow.
   ========================================================================== */
main .has-navy-deep-background-color,
main .has-navy-background-color { position: relative; overflow: hidden; }

main .has-navy-deep-background-color::before,
main .has-navy-background-color::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
main .has-navy-deep-background-color::before {
	background-image:
		radial-gradient(1100px 520px at 88% -12%, rgba(108, 62, 245, .30), transparent 60%),
		radial-gradient(900px 430px at -8% 112%, rgba(55, 213, 201, .16), transparent 55%);
	animation: pt-drift 38s var(--pt-e) infinite alternate;
}
main .has-navy-background-color::before {
	background-image: radial-gradient(950px 420px at 92% -22%, rgba(108, 62, 245, .18), transparent 55%);
	animation: pt-drift 44s var(--pt-e) infinite alternate;
}
@keyframes pt-drift { to { transform: translate3d(-60px, 38px, 0) scale(1.08); } }

main .has-navy-deep-background-color > *,
main .has-navy-background-color > * { position: relative; z-index: 1; }

.has-navy-deep-background-color a, .has-navy-background-color a { color: var(--pt-on-dark-2); }
.has-navy-deep-background-color a:hover, .has-navy-background-color a:hover { color: #fff; }
.has-navy-deep-background-color, .has-navy-background-color { color: #FFFFFF; }
.has-navy-background-color .pt-stat-number { color: #FFFFFF; }
.has-navy-background-color .has-small-font-size,
.has-navy-deep-background-color .has-small-font-size { color: var(--pt-on-dark-3); }
.has-navy-deep-background-color .pt-eyebrow,
.has-navy-background-color .pt-eyebrow { color: var(--wp--preset--color--teal); }

/* Outline buttons read correctly on dark grounds */
.has-navy-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, .32); color: #fff;
}
.has-navy-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal);
	background: rgba(255, 255, 255, .05);
}

/* ==========================================================================
   Utility components used by the patterns
   ========================================================================== */
.pt-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: .16em; text-transform: uppercase;
	font-size: .72rem; font-weight: 600;
	color: var(--wp--preset--color--navy);
	display: flex; align-items: center; gap: .6rem;
}
.pt-eyebrow::before {
	content: ""; width: 22px; height: 2px; background: var(--pt-grad); flex: none;
}
.has-text-align-center.pt-eyebrow { justify-content: center; }

.pt-card {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 1.9rem; height: 100%;
	background: var(--wp--preset--color--base);
	position: relative; overflow: hidden;
	transition: transform var(--pt-t2) var(--pt-e), box-shadow var(--pt-t2) var(--pt-e), border-color var(--pt-t2) var(--pt-e);
}
.pt-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--pt-grad); transform: scaleX(0); transform-origin: left;
	transition: transform var(--pt-t3) var(--pt-e);
}
.pt-card:hover {
	transform: translateY(-5px); box-shadow: var(--pt-shadow);
	border-color: var(--pt-hair-2);
}
.pt-card:hover::before { transform: scaleX(1); }
.pt-card h3 { margin-top: 0; }

.pt-stat-number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700;
	line-height: 1.05; letter-spacing: -.045em;
	font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.pt-stat {
	padding-left: 1.3rem;
	border-left: 2px solid rgba(255, 255, 255, .16);
	position: relative;
}
.pt-stat::before {
	content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
	background: var(--pt-grad-d); transform: scaleY(0); transform-origin: top;
	transition: transform var(--pt-t3) var(--pt-e);
}
.pt-stat.pt-in::before { transform: scaleY(1); }
.pt-stat-src {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--pt-on-dark-3);
}

.pt-logo-chip {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 1.35rem .9rem; min-height: 118px; justify-content: center;
	font-weight: 600;
	color: var(--wp--preset--color--slate); font-size: .9rem;
	background: #fff; position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center;
	gap: .5rem; text-align: center;
	transition: background var(--pt-t2) var(--pt-e);
}
.pt-logo-chip::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: var(--pt-grad); transform: scaleX(0); transform-origin: left;
	transition: transform var(--pt-t2) var(--pt-e);
}
.pt-logo-chip:hover { background: var(--wp--preset--color--mist); }
.pt-logo-chip:hover::before { transform: scaleX(1); }
.pt-logo-chip svg {
	width: 30px; height: 30px; color: var(--wp--preset--color--navy);
	transition: color var(--pt-t2) var(--pt-e), transform var(--pt-t2) var(--pt-e);
}
.pt-logo-chip:hover svg { color: var(--wp--preset--color--violet); transform: translateY(-2px); }
.pt-logo-chip .pt-chip-l { font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1.3; }
.pt-logo-chip .pt-chip-m {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .76rem; color: var(--wp--preset--color--slate);
	font-variant-numeric: tabular-nums;
}
.pt-chips {
	display: grid; grid-template-columns: repeat(5, 1fr);
	gap: 1px; background: var(--wp--preset--color--hairline);
	border: 1px solid var(--wp--preset--color--hairline);
}
@media (max-width: 1080px) { .pt-chips { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pt-chips { grid-template-columns: repeat(2, 1fr); } }

/* Gradient text, used sparingly on hero emphasis */
.pt-gt {
	background: var(--pt-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Result tiles */
.pt-result-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700;
	line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
	background: var(--pt-grad-d);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pt-result-met {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

/* Buttons */
.wp-element-button, .wp-block-button__link {
	position: relative; overflow: hidden;
	transition: background var(--pt-t2) var(--pt-e), transform var(--pt-t1) var(--pt-e), box-shadow var(--pt-t2) var(--pt-e), color var(--pt-t2) var(--pt-e), border-color var(--pt-t2) var(--pt-e);
}
.wp-element-button:hover, .wp-block-button__link:hover {
	transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 62, 245, .28);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-image: var(--pt-grad-d);
}

/* ==========================================================================
   Long-form content: service pages and posts
   ========================================================================== */
.pt-prose h2 { margin-top: 2.75rem; }
.pt-prose h3 { margin-top: 2rem; }
.pt-prose p, .pt-prose ul, .pt-prose ol { margin-bottom: 1.1rem; }
.pt-prose li { margin-bottom: .45rem; }
.pt-prose a {
	color: var(--wp--preset--color--navy); font-weight: 600;
	border-bottom: 1px solid var(--pt-hair-2);
	transition: color var(--pt-t1) var(--pt-e), border-color var(--pt-t1) var(--pt-e);
}
.pt-prose a:hover { color: var(--wp--preset--color--violet); border-color: var(--wp--preset--color--violet); }

/* Answer-first block: the paragraph AI Overviews and snippets lift */
.pt-answer {
	font-size: 1.18rem; line-height: 1.55;
	border-left: 3px solid transparent;
	border-image: var(--pt-grad-d) 1;
	padding: .25rem 0 .25rem 1.4rem;
	margin-bottom: 2rem;
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { font-size: .95rem; }
.wp-block-table td, .wp-block-table th {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: .7rem .85rem; vertical-align: top;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--navy); color: #fff;
	font-weight: 700; text-align: left;
	border-color: var(--wp--preset--color--navy);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--wp--preset--color--mist); }
.wp-block-table.is-style-stripes { border-bottom: 0; }

/* Tables break out of the prose column on wide screens so comparison
   tables are readable rather than cramped into 760px. */
@media (min-width: 1080px) {
	.pt-prose > .wp-block-table {
		width: 960px; max-width: none; margin-left: -100px;
	}
}


/* ==========================================================================
   Photography. Real images of a real operator, so they get real treatment:
   a hairline frame, a gradient rule under the caption, no rounded corners.
   ========================================================================== */
.pt-figure { margin: 0; }
.pt-figure img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--wp--preset--color--hairline);
}
.pt-figure figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-top: .75rem; padding-top: .6rem; position: relative;
}
.pt-figure figcaption::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 40px; height: 2px; background: var(--pt-grad);
}
.has-navy-deep-background-color .pt-figure figcaption,
.has-navy-background-color .pt-figure figcaption { color: var(--pt-on-dark-3); }

/* Portrait crops keep a sensible ceiling so a column never turns into a tower. */
.pt-figure-portrait { max-width: 380px; }
.pt-figure-portrait img { max-height: 520px; object-fit: cover; object-position: center top; }
.pt-figure-wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.pt-mbp-light { border: 1px solid var(--wp--preset--color--hairline); border-radius: 6px; margin-top: 1.25rem; }

/* ==========================================================================
   Post author box
   ========================================================================== */
.pt-author {
	display: flex; gap: 1.1rem; align-items: flex-start;
	border: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--mist);
	padding: 1.4rem; margin-top: 2.5rem; position: relative; overflow: hidden;
}
.pt-author::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--pt-grad);
}
.pt-author img {
	width: 80px; height: 80px; flex: none; display: block;
	border: 1px solid var(--wp--preset--color--hairline);
}
.pt-author-name {
	font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; margin: 0 0 .3rem;
}
.pt-author-bio {
	margin: 0; font-size: .92rem; line-height: 1.55;
	color: var(--wp--preset--color--slate);
}
@media (max-width: 600px) {
	.pt-author { flex-direction: column; gap: .9rem; }
	.pt-figure-portrait { max-width: 100%; }
	.pt-figure-portrait img { max-height: 420px; }
}

/* FAQ, rendered as core/details */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 1rem 1.2rem; margin-bottom: .6rem; background: #fff;
	position: relative; overflow: hidden;
	transition: border-color var(--pt-t2) var(--pt-e);
}
.wp-block-details::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: var(--pt-grad-d); transform: scaleY(0); transform-origin: top;
	transition: transform var(--pt-t2) var(--pt-e);
}
.wp-block-details:hover, .wp-block-details[open] { border-color: var(--pt-hair-2); }
.wp-block-details[open]::before { transform: scaleY(1); }
.wp-block-details summary {
	font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; cursor: pointer;
}
.wp-block-details summary::marker { color: var(--wp--preset--color--violet); }
.wp-block-details[open] summary { margin-bottom: .6rem; }
.wp-block-details > *:not(summary) {
	animation: pt-fade var(--pt-t3) var(--pt-e-out) both;
}
@keyframes pt-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Post meta and feature image */
.pt-postmeta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .78rem; letter-spacing: .06em;
	color: var(--wp--preset--color--slate);
}
.wp-block-post-featured-image img { border: 1px solid var(--wp--preset--color--hairline); }
.single-post .wp-block-post-content a { text-decoration: none; }

/* ==========================================================================
   Forms
   ========================================================================== */
.plaid-form { display: grid; gap: 1rem; max-width: 560px; }
.plaid-form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .3rem; }
.plaid-form input[type="text"],
.plaid-form input[type="email"],
.plaid-form select,
.plaid-form textarea {
	width: 100%; padding: .8rem .95rem;
	border: 1px solid var(--wp--preset--color--hairline);
	background: #fff; font: inherit;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--pt-t2) var(--pt-e), box-shadow var(--pt-t2) var(--pt-e);
}
.plaid-form input:focus, .plaid-form select:focus, .plaid-form textarea:focus {
	outline: none; border-color: var(--wp--preset--color--violet);
	box-shadow: 0 0 0 3px rgba(108, 62, 245, .16);
}
.plaid-form .plaid-submit {
	background: var(--wp--preset--color--navy); color: #fff; border: none;
	padding: .95rem 1.7rem; font-weight: 700; font-size: 1rem; font-family: inherit;
	cursor: pointer; justify-self: start; position: relative; overflow: hidden;
	transition: background var(--pt-t2) var(--pt-e), transform var(--pt-t1) var(--pt-e), box-shadow var(--pt-t2) var(--pt-e);
}
.plaid-form .plaid-submit:hover {
	background-image: var(--pt-grad-d);
	transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 62, 245, .3);
}
.plaid-form-success {
	border: 1px solid var(--wp--preset--color--violet);
	background: var(--wp--preset--color--mist);
	padding: 1rem 1.25rem; font-weight: 600;
}
.plaid-form .plaid-error { color: #B3261E; font-size: .88rem; }
.plaid-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.pt-fbrand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: .5rem; }
.pt-fbrand img { height: 30px; width: auto; display: block; }
.pt-fbrand span { color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.035em; }
.pt-mbp-badge { width: 150px; height: auto; display: block; margin-top: 1rem; border-radius: 6px; opacity: .9; }
footer.wp-block-template-part { position: relative; }
footer.wp-block-template-part::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: var(--pt-grad); opacity: .45; z-index: 2;
}

/* ==========================================================================
   Motion. JS adds .pt-js to <html> and .pt-in when an element enters view.
   Without JS, or under reduced motion, everything is visible and static.
   ========================================================================== */
/* Motion FAILS OPEN. Nothing here hides content on its own: an element is only
   ever hidden once JavaScript has added .pt-will-reveal, which it does only when
   the browser can animate and only below the fold. If the script never runs, the
   page is simply visible and static. The previous approach hid elements in CSS
   and un-hid them from an observer, so a paused observer left the site blank. */
.pt-will-reveal {
	opacity: 0; transform: translateY(18px);
	transition: opacity var(--pt-t3) var(--pt-e-out), transform var(--pt-t3) var(--pt-e-out);
}
.pt-will-reveal.pt-in { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.pt-will-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.pt-card::before, .pt-logo-chip::before, .pt-stat::before, .wp-block-details::before { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Stat bar goes 2 x 2 rather than a tall stack */
@media (max-width: 781px) {
	main .has-navy-background-color .wp-block-columns:not(.is-not-stacked-on-mobile) {
		display: flex; flex-wrap: wrap; gap: 1.6rem;
	}
	main .has-navy-background-color .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - .8rem) !important;
	}
}
/* Card rows go 2-up on tablets rather than 4 cramped columns */
@media (min-width: 782px) and (max-width: 1080px) {
	main .wp-block-columns { flex-wrap: wrap; }
	main .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 1rem); flex-grow: 1; }
}
@media (max-width: 600px) {
	.pt-brand-name { font-size: 1.02rem; }
	main .has-navy-deep-background-color h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	.pt-card { padding: 1.4rem; }
	.pt-answer { font-size: 1.08rem; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	.pt-hdr, footer.wp-block-template-part, .wp-block-buttons { display: none; }
	body { color: #000; }
	a::after { content: " (" attr(href) ")"; font-size: .8em; }
}