/* ==========================================================================
   PowOne — theme styles
   Palette sampled from the client logo and reference design.
   ========================================================================== */

:root {
	/* Brand */
	--pw-navy-900: #050B1F;
	--pw-navy-800: #0A1330;
	--pw-navy-700: #101C42;
	--pw-navy-600: #1D2E5E;
	--pw-blue: #0058E8;
	--pw-blue-700: #0047BE;
	--pw-blue-400: #4A90E2;
	--pw-blue-100: #D6E6FD;
	--pw-blue-50: #EFF5FE;

	/* Neutrals */
	--pw-ink: #0F172A;
	--pw-body: #4B5A70;
	--pw-muted: #7A8798;
	--pw-line: #E3E9F2;
	--pw-soft: #EDF3FC;   /* light blue band — alternates against white down the page */
	--pw-white: #FFFFFF;

	/* Type */
	--pw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--pw-max: 1280px;
	--pw-gutter: 24px;
	--pw-radius: 14px;
	--pw-radius-sm: 10px;
	--pw-section: clamp(40px, 4.4vw, 64px);

	/* Elevation */
	--pw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
	--pw-shadow: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 12px 24px -8px rgba(15, 23, 42, .10);
	--pw-shadow-lg: 0 24px 48px -16px rgba(10, 19, 48, .22);
}

/* --------------------------------------------------------- Base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	/*
	 * clip, not hidden: it stops any stray horizontal overflow without
	 * killing position:sticky on the header the way overflow:hidden would.
	 */
	overflow-x: clip;
	font-family: var(--pw-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--pw-body);
	background: var(--pw-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--pw-ink);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pw-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--pw-blue-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

:focus-visible { outline: 3px solid var(--pw-blue-400); outline-offset: 3px; border-radius: 4px; }

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

.pw-skip-link {
	position: absolute; top: -100px; left: 12px; z-index: 999;
	background: var(--pw-blue); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px;
}
.pw-skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------- Layout */

.pw-container {
	width: 100%;
	max-width: var(--pw-max);
	margin-inline: auto;
	padding-inline: var(--pw-gutter);
}

.pw-section { padding-block: var(--pw-section); }
.pw-section--tight { padding-block: clamp(28px, 3.2vw, 44px); }
.pw-section--soft { background: var(--pw-soft); }
.pw-section--dark { background: var(--pw-navy-900); color: rgba(255,255,255,.74); }
.pw-section--dark h1, .pw-section--dark h2, .pw-section--dark h3, .pw-section--dark h4 { color: #fff; }

/*
 * When two sections share a background there is no colour change to mark the
 * seam, so the two paddings read as one oversized gap. Drop the second one's
 * top padding and let the first one's bottom padding do the spacing.
 */
.pw-section--soft + .pw-section--soft,
.pw-section--dark + .pw-section--dark,
.pw-section:not(.pw-section--soft):not(.pw-section--dark):not(.pw-hero)
	+ .pw-section:not(.pw-section--soft):not(.pw-section--dark) {
	padding-top: 0;
}

.pw-grid { display: grid; gap: 28px; }
.pw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pw-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.pw-grid--3, .pw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.pw-grid--2, .pw-grid--3, .pw-grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- Type helpers */

.pw-eyebrow {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--pw-blue);
	margin-bottom: 14px;
}
.pw-section--dark .pw-eyebrow { color: var(--pw-blue-400); }

.pw-lead { font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 768px) { .pw-lead { font-size: 1.125rem; } }

.pw-accent { color: var(--pw-blue); }
.pw-section--dark .pw-accent { color: var(--pw-blue-400); }

.pw-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.pw-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------- Buttons */

.pw-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pw-btn:hover { transform: translateY(-1px); }
.pw-btn:active { transform: translateY(0); }

.pw-btn--primary { background: var(--pw-blue); border-color: var(--pw-blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 88, 232, .6); }
.pw-btn--primary:hover { background: var(--pw-blue-700); border-color: var(--pw-blue-700); color: #fff; }

.pw-btn--outline { background: transparent; border-color: var(--pw-line); color: var(--pw-ink); }
.pw-btn--outline:hover { border-color: var(--pw-blue); color: var(--pw-blue); }

.pw-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.pw-btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }

.pw-btn__arrow { transition: transform .18s ease; }
.pw-btn:hover .pw-btn__arrow { transform: translateX(3px); }

.pw-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.pw-link-arrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 600; font-size: .9375rem;
}
.pw-link-arrow svg { transition: transform .18s ease; }
.pw-link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------- Header */

.pw-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--pw-line);
}
.pw-header__inner { display: flex; align-items: center; gap: 28px; min-height: 76px; }

.pw-logo { display: flex; align-items: center; flex-shrink: 0; }
.pw-logo img { height: 40px; width: auto; }
.pw-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.pw-logo__name { font-weight: 800; font-size: 1.15rem; color: var(--pw-navy-600); letter-spacing: -.02em; }
.pw-logo__tag { font-size: .6875rem; color: var(--pw-muted); letter-spacing: .01em; }

.pw-nav { margin-left: auto; }
.pw-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pw-nav li { margin: 0; position: relative; }
.pw-nav a {
	display: block; padding: 10px 14px; border-radius: 7px;
	font-size: .9375rem; font-weight: 500; color: var(--pw-ink);
}
.pw-nav a:hover { color: var(--pw-blue); background: var(--pw-blue-50); }
.pw-nav .current-menu-item > a,
.pw-nav .current_page_item > a,
.pw-nav .current-menu-parent > a { color: var(--pw-blue); font-weight: 600; }

/* Dropdowns */
.pw-nav .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
	display: block; min-width: 244px; padding: 8px;
	background: #fff; border: 1px solid var(--pw-line); border-radius: 12px;
	box-shadow: var(--pw-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.pw-nav li:hover > .sub-menu,
.pw-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pw-nav .sub-menu li { width: 100%; }
.pw-nav .sub-menu a { padding: 9px 12px; font-size: .9rem; }
.pw-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.pw-subtoggle { display: none; }

.pw-header__cta { flex-shrink: 0; }
.pw-header__cta .pw-btn { padding: 11px 22px; }

.pw-burger {
	display: none; margin-left: auto;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid var(--pw-line); border-radius: 8px;
	cursor: pointer;
}
.pw-burger span {
	display: block; width: 18px; height: 2px; margin: 4px auto;
	background: var(--pw-ink); border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.pw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
	.pw-burger { display: block; }
	.pw-header__cta { display: none; }
	.pw-nav {
		position: fixed; inset: 76px 0 auto 0;
		max-height: calc(100vh - 76px); overflow-y: auto;
		margin: 0; padding: 16px var(--pw-gutter) 32px;
		background: #fff; border-bottom: 1px solid var(--pw-line);
		box-shadow: var(--pw-shadow-lg);
		display: none;
	}
	.pw-nav.is-open { display: block; }
	.pw-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.pw-nav a { padding: 13px 12px; font-size: 1rem; }
	/*
	 * Accordion. The chevron is a real button beside the parent link, so the
	 * link keeps working and only the chevron opens the submenu.
	 */
	.pw-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--pw-line);
		border-radius: 0; margin: 0 0 0 12px; padding: 0 0 0 8px; min-width: 0;
		max-height: 0; overflow: hidden;
		transition: max-height .32s ease, margin .32s ease;
	}
	.pw-nav .menu-item-has-children.is-open > .sub-menu { max-height: 520px; margin: 2px 0 8px 12px; }
	.pw-nav .menu-item-has-children > a { padding-right: 48px; }
	.pw-nav .menu-item-has-children > a::after { display: none; }

	.pw-subtoggle {
		display: grid; place-items: center;
		position: absolute; top: 0; right: 0; width: 46px; height: 46px;
		padding: 0; background: none; border: 0; cursor: pointer;
		color: var(--pw-muted);
	}
	.pw-subtoggle::after {
		content: ""; width: 8px; height: 8px;
		border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .28s ease;
	}
	.pw-subtoggle[aria-expanded="true"] { color: var(--pw-blue); }
	.pw-subtoggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
}

/* --------------------------------------------------------- Hero */

.pw-hero {
	position: relative;
	background: var(--pw-navy-900);
	background-image:
		radial-gradient(900px 460px at 82% 18%, rgba(0, 88, 232, .30), transparent 62%),
		radial-gradient(680px 400px at 4% 92%, rgba(74, 144, 226, .16), transparent 60%);
	color: rgba(255,255,255,.76);
	overflow: hidden;
}
.pw-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 60% 40%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(circle at 60% 40%, #000, transparent 78%);
}
.pw-hero > .pw-container { position: relative; z-index: 1; }

.pw-hero__inner {
	display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center;
	padding-block: clamp(48px, 5.6vw, 80px);
}
.pw-hero--center .pw-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.pw-hero--center .pw-hero__copy { max-width: 780px; }
.pw-hero--center .pw-btn-row { justify-content: center; }

@media (max-width: 900px) {
	.pw-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}

.pw-hero h1 { color: #fff; margin-bottom: 20px; }
.pw-hero__title-accent { display: block; color: var(--pw-blue-400); }
.pw-hero__text { font-size: 1.0625rem; line-height: 1.72; max-width: 56ch; margin-bottom: 32px; }
.pw-hero--center .pw-hero__text { margin-inline: auto; }

.pw-hero--compact .pw-hero__inner { padding-block: clamp(36px, 4.2vw, 56px); }

.pw-hero__media img { border-radius: var(--pw-radius); box-shadow: var(--pw-shadow-lg); }

.pw-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 24px 30px;
	margin-top: 44px; padding-top: 32px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.pw-hero--center .pw-hero__stats { max-width: 660px; margin-inline: auto; }
.pw-hero__stat-value { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pw-hero__stat-label { font-size: .8125rem; line-height: 1.45; color: rgba(255,255,255,.62); margin-top: 5px; }

/* Breadcrumb */

/* --------------------------------------------------------- Cards */

.pw-card {
	position: relative;
	display: flex; flex-direction: column;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pw-card:hover { border-color: var(--pw-blue-100); box-shadow: var(--pw-shadow); transform: translateY(-3px); }
.pw-card h3 { margin-bottom: 10px; }

/*
 * Sweep variant — the same hover treatment the channel cards use: a brand bar
 * wiping in across the top and the icon springing. Shared with .pw-channel
 * below so the two never drift apart.
 */
.pw-card--sweep { overflow: hidden; }
.pw-card--sweep:hover { box-shadow: var(--pw-shadow-lg); transform: translateY(-6px); }
.pw-card--sweep .pw-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.pw-card--sweep:hover .pw-icon { transform: scale(1.08) rotate(-5deg); }
.pw-card p { font-size: .9375rem; }
.pw-card__link { margin-top: auto; padding-top: 18px; }

.pw-icon {
	display: grid; place-items: center;
	width: 52px; height: 52px; margin-bottom: 20px;
	border-radius: 12px;
	background: var(--pw-blue); color: #fff;
	flex-shrink: 0;
}
.pw-icon svg { width: 24px; height: 24px; }
.pw-icon--soft { background: var(--pw-blue-50); color: var(--pw-blue); }
.pw-icon--ghost { background: rgba(255,255,255,.1); color: var(--pw-blue-400); }

/* Feature list (icon + text rows) */
.pw-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
/* Two points per row — used where the list sits in the wider half of a split. */
.pw-features--2col { grid-template-columns: repeat(2, 1fr); gap: 26px 28px; }
@media (max-width: 900px) { .pw-features--2col { grid-template-columns: 1fr; gap: 22px; } }
.pw-feature { display: flex; gap: 16px; margin: 0; }
.pw-feature h4 { margin-bottom: 4px; }
.pw-feature p { font-size: .9375rem; margin: 0; }
.pw-section--dark .pw-feature p { color: rgba(255,255,255,.7); }

/* Checklist */
.pw-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pw-checklist li {
	position: relative; margin: 0; padding-left: 30px;
	font-size: .9375rem;
}
.pw-checklist li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--pw-blue-50);
}
.pw-checklist li::after {
	content: ""; position: absolute; left: 6px; top: .72em;
	width: 6px; height: 3px;
	border-left: 1.8px solid var(--pw-blue); border-bottom: 1.8px solid var(--pw-blue);
	transform: rotate(-45deg);
}
.pw-section--dark .pw-checklist li { color: rgba(255,255,255,.76); }
.pw-section--dark .pw-checklist li::before { background: rgba(74,144,226,.18); }
.pw-section--dark .pw-checklist li::after { border-color: var(--pw-blue-400); }

/* --------------------------------------------------------- Intro grid (split) */

.pw-split { display: grid; grid-template-columns: .74fr 1.26fr; gap: clamp(36px, 4vw, 60px); align-items: start; }
.pw-split--even { grid-template-columns: 1fr 1fr; align-items: center; }
.pw-split--reverse .pw-split__media { order: -1; }
@media (max-width: 900px) { .pw-split, .pw-split--even { grid-template-columns: 1fr; } .pw-split--reverse .pw-split__media { order: 0; } }

.pw-split__head { position: sticky; top: 100px; }
@media (max-width: 900px) { .pw-split__head { position: static; } }

/*
 * In a split section the grid sits in the narrower right column, so an odd
 * trailing card would otherwise leave a visible hole. Let it run the full
 * width instead. With an even number of cards the rule simply never fires.
 */
.pw-split .pw-grid--2 > .pw-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ------------------------------------------------- Detail page layout */

/*
 * Overview leads on the left, 'What you get' sits alongside on the right.
 * Source order matches, so on mobile the overview is read before the
 * highlights rather than after them.
 */
.pw-detail { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(32px, 4vw, 60px); align-items: start; }
@media (max-width: 940px) { .pw-detail { grid-template-columns: 1fr; } }

.pw-detail__aside { position: sticky; top: 100px; display: grid; gap: 20px; }
@media (max-width: 940px) { .pw-detail__aside { position: static; } }

.pw-detail__card {
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius);
	box-shadow: var(--pw-shadow-sm);
}
.pw-detail__card h3 { font-size: 1.0625rem; margin-bottom: 18px; }
.pw-detail__card--accent {
	background: var(--pw-navy-900);
	background-image: radial-gradient(420px 260px at 88% 6%, rgba(0,88,232,.32), transparent 66%);
	border-color: transparent;
	color: rgba(255,255,255,.76);
}
.pw-detail__card--accent h3 { color: #fff; }
.pw-detail__card--accent p { font-size: .9375rem; }

.pw-detail__body { min-width: 0; }
.pw-detail__body > .pw-rte { max-width: 68ch; }

/* First paragraph of the detail copy reads as a standfirst. */
.pw-detail__body .pw-rte > p:first-of-type {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--pw-ink);
}
.pw-detail__body .pw-rte h3 {
	margin-top: 2em;
	padding-top: 1.4em;
	border-top: 1px solid var(--pw-line);
}
.pw-detail__body .pw-rte h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --------------------------------------------------------- Process steps */

/*
 * Column count comes from the item count, not a fixed 6. A four-step
 * timeline used to fill four of six tracks and sit left of a centred
 * heading; now any count spans the row evenly.
 */
.pw-steps { display: grid; grid-template-columns: repeat(var(--pw-count, 6), 1fr); gap: 16px; position: relative; }
@media (max-width: 1100px) { .pw-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; } }
@media (max-width: 620px) { .pw-steps { grid-template-columns: repeat(2, 1fr); } }

.pw-step { position: relative; text-align: center; }
.pw-step__icon {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 68px; height: 68px; margin: 0 auto 18px;
	background: #fff; border: 1px solid var(--pw-line); border-radius: 50%;
	color: var(--pw-blue);
	box-shadow: var(--pw-shadow-sm);
}
.pw-step__icon svg { width: 26px; height: 26px; }
.pw-step h4 { font-size: .9375rem; margin-bottom: 6px; }
.pw-step p { font-size: .8125rem; line-height: 1.55; color: var(--pw-muted); margin: 0; }

/* connector line between steps */
.pw-step:not(:last-child)::after {
	content: ""; position: absolute; top: 34px; left: calc(50% + 40px); right: calc(-50% + 40px);
	border-top: 1.5px dashed var(--pw-line);
}

/*
 * A blue fill that runs along each connector in turn, so the eye is walked
 * through the stages left to right. The dashed ::after stays as the unlit
 * track; this ::before is the lit part. Delays are per position, and the
 * cycle fades out at the end so the reset to zero width is never seen.
 */
.pw-step:not(:last-child)::before {
	content: ""; position: absolute; top: 34px; left: calc(50% + 40px); right: calc(-50% + 40px);
	border-top: 1.5px solid var(--pw-blue);
	transform: scaleX(0); transform-origin: left center;
	animation: pw-step-fill 5.5s ease-in-out infinite;
	z-index: 0;
}
@keyframes pw-step-fill {
	0%        { transform: scaleX(0); opacity: 1; }
	22%       { transform: scaleX(1); opacity: 1; }
	86%       { transform: scaleX(1); opacity: 1; }
	97%, 100% { transform: scaleX(1); opacity: 0; }
}
.pw-step:nth-child(1)::before { animation-delay: 0s; }
.pw-step:nth-child(2)::before { animation-delay: .55s; }
.pw-step:nth-child(3)::before { animation-delay: 1.1s; }
.pw-step:nth-child(4)::before { animation-delay: 1.65s; }
.pw-step:nth-child(5)::before { animation-delay: 2.2s; }
.pw-step:nth-child(6)::before { animation-delay: 2.75s; }
.pw-step:nth-child(7)::before { animation-delay: 3.3s; }

@media (max-width: 1100px) { .pw-step::after, .pw-step::before { display: none; } }

/* --------------------------------------------------------- Logo row */

/*
 * A strip, not a band: the heading sits beside the logos rather than centred
 * above them, so three logos do not have to hold a full-width row on their own.
 */
.pw-logorow { display: grid; gap: 24px; }
.pw-logorow__head { text-align: center; }
@media (min-width: 900px) {
	.pw-logorow { grid-template-columns: minmax(260px, .9fr) 1.5fr; gap: 48px; align-items: center; }
	.pw-logorow__head { text-align: left; }
}
.pw-logorow__head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; margin-bottom: 0; }
.pw-logorow__head .pw-lead { margin: 8px 0 0; font-size: .9375rem; }

.pw-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
.pw-logos__item {
	flex: 1 1 150px; display: grid; place-items: center;
	padding: 10px 22px; min-height: 62px;
	border-right: 1px solid var(--pw-line);
}
.pw-logos__item:last-child { border-right: 0; }
.pw-logos__item img { max-height: 38px; width: auto; opacity: .78; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.pw-logos__item:hover img { opacity: 1; filter: grayscale(0); }
.pw-logos__name { font-size: 1.05rem; font-weight: 700; color: var(--pw-muted); }
@media (max-width: 700px) { .pw-logos__item { border-right: 0; border-bottom: 1px solid var(--pw-line); flex-basis: 100%; } }

/* -------------------------------------------------------- Frictions */

/*
 * The "problem" section: five points in two tight rows rather than five
 * full-width rows, which roughly halves the height of the band. Flex + centre
 * so a trailing short row (3 + 2) sits centred instead of hanging left.
 */
.pw-head--slim { margin-bottom: 30px; }
.pw-head--slim p { font-size: .9375rem; margin-top: 8px; }

.pw-frictions {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.pw-friction {
	position: relative;
	flex: 0 1 calc(33.333% - 10px);
	min-width: 250px;
	margin: 0;
	padding: 16px 18px 16px 58px;
	border-radius: 12px;
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.1);
	transition: background .18s ease, border-color .18s ease;
}
.pw-friction:hover { background: rgba(255,255,255,.075); border-color: rgba(74,144,226,.4); }

.pw-friction__icon {
	position: absolute; top: 16px; left: 16px;
	display: grid; place-items: center; width: 30px; height: 30px;
	border-radius: 9px; color: var(--pw-blue-400);
	background: rgba(74,144,226,.14); border: 1px solid rgba(74,144,226,.24);
}
.pw-friction h4 { margin: 0 0 3px; font-size: .9375rem; line-height: 1.3; padding-right: 26px; }
.pw-friction p  { margin: 0; font-size: .8125rem; line-height: 1.5; color: rgba(255,255,255,.62); }

.pw-friction__num {
	position: absolute; top: 14px; right: 14px;
	font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
	color: rgba(255,255,255,.22); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) { .pw-friction { flex: 1 1 100%; } }

/* ------------------------------------------------------------- Tags */
/*
 * Use-case labels on a detail page: a wrapping strip of pills. Deliberately
 * flat and unclickable — they describe coverage, they are not filters.
 */
.pw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pw-tag {
	margin: 0; padding: 9px 18px; border-radius: 999px;
	background: var(--pw-soft); border: 1px solid var(--pw-line);
	font-size: .9375rem; font-weight: 600; color: var(--pw-navy-600);
}
.pw-section--soft .pw-tag { background: #fff; }
.pw-section--dark .pw-tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); }

/* --------------------------------------------------------- Dark band */

.pw-band { background: var(--pw-navy-900); background-image: radial-gradient(760px 420px at 88% 12%, rgba(0,88,232,.26), transparent 62%); color: rgba(255,255,255,.74); }
.pw-band .pw-split { align-items: center; }
.pw-band__divider { border-left: 1px solid rgba(255,255,255,.13); padding-left: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .pw-band__divider { border-left: 0; padding-left: 0; } }

/* --------------------------------------------------------- Stats band */

.pw-stats { display: grid; grid-template-columns: repeat(var(--pw-count, 4), 1fr); gap: 28px; }
@media (max-width: 820px) { .pw-stats { grid-template-columns: repeat(2, 1fr); } }
.pw-stat { text-align: center; padding: 8px; }
.pw-stat__value { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; color: var(--pw-blue); letter-spacing: -.03em; line-height: 1.05; }
.pw-section--dark .pw-stat__value { color: var(--pw-blue-400); }
.pw-stat__label { font-size: .9375rem; margin-top: 8px; }

/* --------------------------------------------------------- Values */

.pw-value {
	position: relative; overflow: hidden;
	padding: 30px 28px; border-radius: var(--pw-radius);
	background: #fff; border: 1px solid var(--pw-line);
	transition: transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease;
}
/* Accent bar wipes in from the left on hover. */
.pw-value::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
	background: linear-gradient(180deg, var(--pw-blue), var(--pw-blue-400));
	transform: scaleY(0); transform-origin: top;
	transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
/* Faint oversized numeral that surfaces on hover. */
.pw-value::after {
	content: attr(data-num);
	position: absolute; right: 14px; bottom: -18px;
	font-size: 5rem; font-weight: 800; line-height: 1;
	color: var(--pw-blue); opacity: 0;
	transition: opacity .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
	transform: translateY(10px);
	pointer-events: none;
}
.pw-value:hover {
	transform: translateY(-6px);
	box-shadow: var(--pw-shadow-lg);
	border-color: var(--pw-blue-100);
}
.pw-value:hover::before { transform: scaleY(1); }
.pw-value:hover::after { opacity: .07; transform: translateY(0); }

.pw-value__num {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; height: 30px; margin-bottom: 16px; padding: 0 8px;
	font-size: .75rem; font-weight: 700; letter-spacing: .06em;
	color: var(--pw-blue); background: var(--pw-blue-50);
	border-radius: 8px;
	transition: background-color .3s ease, color .3s ease;
}
.pw-value:hover .pw-value__num { background: var(--pw-blue); color: #fff; }
.pw-value h3 { position: relative; z-index: 1; font-size: 1.125rem; margin-bottom: 8px; }
.pw-value p { position: relative; z-index: 1; font-size: .9375rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.pw-value:hover { transform: none; }
}

/* Mission / Vision panels */
.pw-panel {
	padding: clamp(28px, 3.5vw, 44px);
	border-radius: var(--pw-radius);
	background: #fff;
	border: 1px solid var(--pw-line);
	box-shadow: var(--pw-shadow-sm);
}
.pw-panel--accent {
	background: var(--pw-navy-900);
	background-image: radial-gradient(520px 320px at 85% 8%, rgba(0,88,232,.32), transparent 65%);
	border-color: transparent;
	color: rgba(255,255,255,.76);
}
.pw-panel--accent h2, .pw-panel--accent h3 { color: #fff; }
.pw-panel--accent .pw-eyebrow { color: var(--pw-blue-400); }

/* --------------------------------------------------------- FAQ */

.pw-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.pw-faq__item { border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm); background: #fff; overflow: hidden; }
.pw-faq__item[open] { border-color: var(--pw-blue-100); box-shadow: var(--pw-shadow-sm); }
.pw-faq__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
	padding: 20px 24px; cursor: pointer; list-style: none;
	font-weight: 600; font-size: 1.0625rem; color: var(--pw-ink);
}
.pw-faq__q::-webkit-details-marker { display: none; }
.pw-faq__q:hover { color: var(--pw-blue); }
.pw-faq__icon { flex-shrink: 0; position: relative; width: 20px; height: 20px; margin-top: 3px; }
.pw-faq__icon::before, .pw-faq__icon::after {
	content: ""; position: absolute; top: 50%; left: 50%; background: var(--pw-blue);
	transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease;
}
.pw-faq__icon::before { width: 13px; height: 2px; }
.pw-faq__icon::after { width: 2px; height: 13px; }
.pw-faq__item[open] .pw-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.pw-faq__a { padding: 0 24px 22px; font-size: .9375rem; }
.pw-faq__a > *:first-child { margin-top: 0; }

/* --------------------------------------------------------- Industries */

.pw-industry { overflow: hidden; padding: 0; }
.pw-industry__media { aspect-ratio: 16 / 9; background: var(--pw-blue-50); overflow: hidden; }
.pw-industry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pw-industry:hover .pw-industry__media img { transform: scale(1.04); }
.pw-industry__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.pw-industry__body h3 { font-size: 1.1875rem; }

/* --------------------------------------------------------- CTA banner */

.pw-cta {
	position: relative; overflow: hidden;
	padding: clamp(44px, 5.5vw, 76px);
	border-radius: 18px;
	background: var(--pw-navy-900);
	background-image:
		radial-gradient(680px 380px at 92% 10%, rgba(0,88,232,.40), transparent 62%),
		radial-gradient(520px 320px at 6% 96%, rgba(74,144,226,.20), transparent 60%);
	color: rgba(255,255,255,.76);
	text-align: center;
}
.pw-cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.pw-cta p { max-width: 60ch; margin-inline: auto; margin-bottom: 32px; font-size: 1.0625rem; }
.pw-cta .pw-btn-row { justify-content: center; }

/* --------------------------------------------------------- Contact */

.pw-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
@media (max-width: 900px) { .pw-contact { grid-template-columns: 1fr; } }

.pw-contact__details { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.pw-contact__details li { display: flex; gap: 16px; margin: 0; }
.pw-contact__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pw-muted); margin-bottom: 3px; }
.pw-contact__value { color: var(--pw-ink); font-weight: 500; font-size: .9375rem; line-height: 1.6; }
.pw-contact__value a { color: var(--pw-ink); }
.pw-contact__value a:hover { color: var(--pw-blue); }

/* Form */
.pw-form {
	padding: clamp(28px, 3.5vw, 40px);
	background: #fff; border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius); box-shadow: var(--pw-shadow);
}
.pw-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .pw-form__grid { grid-template-columns: 1fr; } }
.pw-field { display: flex; flex-direction: column; gap: 7px; }
.pw-field--full { grid-column: 1 / -1; }
.pw-field label { font-size: .875rem; font-weight: 600; color: var(--pw-ink); }
.pw-field .req { color: #DC2626; }
.pw-field input, .pw-field select, .pw-field textarea {
	width: 100%; padding: 12px 14px;
	font-family: inherit; font-size: .9375rem; color: var(--pw-ink);
	background: #fff; border: 1px solid var(--pw-line); border-radius: 8px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.pw-field textarea { min-height: 132px; resize: vertical; }
.pw-field input:focus, .pw-field select:focus, .pw-field textarea:focus {
	outline: none; border-color: var(--pw-blue); box-shadow: 0 0 0 3px rgba(0,88,232,.14);
}
.pw-field input::placeholder, .pw-field textarea::placeholder { color: #A9B4C2; }
.pw-form__foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pw-form__note { font-size: .8125rem; color: var(--pw-muted); }
.pw-hp { position: absolute !important; left: -9999px !important; }

.pw-notice { padding: 14px 18px; border-radius: 8px; font-size: .9375rem; margin-bottom: 22px; }
.pw-notice--ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.pw-notice--err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/*
 * Contact Form 7. The form content supplies the theme's own .pw-field markup,
 * so this only has to neutralise CF7's own chrome and make its wrappers behave
 * like the block-level elements the grid expects.
 */
.pw-form--cf7 .wpcf7-form-control-wrap { display: block; }
.pw-form--cf7 .wpcf7-form-control:not(.pw-btn) {
	width: 100%; padding: 12px 14px;
	font-family: inherit; font-size: .9375rem; color: var(--pw-ink);
	background: #fff; border: 1px solid var(--pw-line); border-radius: 8px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.pw-form--cf7 textarea.wpcf7-form-control { min-height: 132px; resize: vertical; }
.pw-form--cf7 .wpcf7-form-control:not(.pw-btn):focus {
	outline: none; border-color: var(--pw-blue); box-shadow: 0 0 0 3px rgba(0,88,232,.14);
}
.pw-form--cf7 .wpcf7-not-valid { border-color: #DC2626; }
.pw-form--cf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: .8125rem; color: #B91C1C; }

/* CF7's status line, restyled as the theme's notice. */
.pw-form--cf7 .wpcf7-response-output {
	margin: 22px 0 0; padding: 14px 18px; border-radius: 8px;
	font-size: .9375rem; border: 1px solid var(--pw-line);
}
.pw-form--cf7 .wpcf7-form.sent .wpcf7-response-output { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.pw-form--cf7 .wpcf7-form.invalid .wpcf7-response-output,
.pw-form--cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.pw-form--cf7 .wpcf7-form.payment-required .wpcf7-response-output { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.pw-form--cf7 .wpcf7-form.failed .wpcf7-response-output,
.pw-form--cf7 .wpcf7-form.aborted .wpcf7-response-output { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

.pw-form--cf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.pw-form--cf7 .pw-form__foot { align-items: center; }

.pw-map { margin-top: 28px; border-radius: var(--pw-radius); overflow: hidden; border: 1px solid var(--pw-line); }
.pw-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* --------------------------------------------------------- Rich text */

.pw-rte { max-width: 780px; }
.pw-rte h2 { margin-top: 1.6em; }
.pw-rte h3 { margin-top: 1.4em; }
.pw-rte > *:first-child { margin-top: 0; }
.pw-rte ul, .pw-rte ol { padding-left: 1.3em; }
.pw-rte table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .9375rem; }
.pw-rte th, .pw-rte td { padding: 13px 16px; border-bottom: 1px solid var(--pw-line); text-align: left; }
.pw-rte th { font-weight: 700; color: var(--pw-ink); background: var(--pw-soft); }

/* --------------------------------------------------------- Footer */

.pw-footer { background: var(--pw-navy-900); color: rgba(255,255,255,.62); padding-top: clamp(52px, 6vw, 80px); font-size: .9375rem; }
.pw-footer a { color: rgba(255,255,255,.62); }
.pw-footer a:hover { color: #fff; }
.pw-footer h4 { color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }

.pw-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 44px; padding-bottom: 48px; }
@media (max-width: 980px) { .pw-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) {
	/* Two short link columns pair up; the logo and contact block stay full width. */
	.pw-footer__top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
	.pw-footer__top > div:first-child,
	.pw-footer__top > div:last-child { grid-column: 1 / -1; }
}

.pw-footer__logo img { height: 42px; width: auto; margin-bottom: 20px; }
.pw-footer__blurb { max-width: 34ch; line-height: 1.7; }

.pw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pw-footer li { margin: 0; }

/* Get in touch — icon in its own column so wrapped lines stay aligned. */
.pw-footer__contact li { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 2px; }
.pw-footer__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; margin-top: 5px; color: var(--pw-blue-400);
}
.pw-footer__contact a { text-decoration: none; }

.pw-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pw-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.7);
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.pw-footer__social a:hover {
	background: var(--pw-blue); border-color: var(--pw-blue);
	color: #fff; transform: translateY(-2px);
}

.pw-footer__bottom {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding-block: 24px; border-top: 1px solid rgba(255,255,255,.11);
	font-size: .875rem; text-align: center;
}
.pw-footer__bottom ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }

/* --------------------------------------------------------- Motion */

/*
 * Reveals are opt-in via the .pw-js class, which main.js sets on <html>.
 * Without JS the content stays plainly visible rather than stuck at opacity 0.
 * --d is a per-element stagger delay set by main.js.
 */
.pw-js .pw-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}
.pw-js .pw-reveal.is-visible { opacity: 1; transform: none; }

/*
 * Directional variants. The offset is kept under the container's 24px gutter
 * so an off-screen element can never push the document wider than the viewport.
 */
.pw-js .pw-reveal--left { transform: translateX(-18px); }
.pw-js .pw-reveal--right { transform: translateX(18px); }
.pw-js .pw-reveal--scale { transform: scale(.94); }
.pw-js .pw-reveal--left.is-visible,
.pw-js .pw-reveal--right.is-visible,
.pw-js .pw-reveal--scale.is-visible { transform: none; }

/* Hero aurora drift */
@keyframes pw-aurora {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
	50%      { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: 1; }
}
@keyframes pw-aurora-2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: .6; }
	50%      { transform: translate3d(4%, -3%, 0) scale(1); opacity: .9; }
}

/* Soft pulse for live indicators */
@keyframes pw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(45, 212, 167, .55); }
	70%  { box-shadow: 0 0 0 9px rgba(45, 212, 167, 0); }
	100% { box-shadow: 0 0 0 0 rgba(45, 212, 167, 0); }
}

/* Chat message entry */
@keyframes pw-msg-in {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* Typing dots */
@keyframes pw-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* Voice waveform */
@keyframes pw-wave {
	0%, 100% { transform: scaleY(.35); }
	50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.pw-js .pw-reveal { opacity: 1; transform: none; transition: none; }
	.pw-btn:hover, .pw-card:hover { transform: none; }
	.pw-hero__aurora, .pw-hero__aurora::after { animation: none !important; }
	.pw-chat__msg { animation: none !important; opacity: 1 !important; }
	/* Hero/section SVG visuals: hold the composed frame, drop the motion. */
	.pw-visual *, .pw-visual { animation: none !important; }
	.pw-step::before { animation: none !important; transform: scaleX(1); opacity: 1; }
	.pw-wave span, .pw-typing i, .pw-live::before { animation: none !important; }
	* { scroll-behavior: auto !important; }
}

/* ==========================================================================
   AI agent components
   ========================================================================== */

/* --------------------------------------------------- Animated hero aurora */

.pw-hero__aurora {
	position: absolute; inset: -20% -10% auto -10%; height: 140%;
	pointer-events: none; z-index: 0;
	background: radial-gradient(closest-side, rgba(0, 88, 232, .38), transparent 70%);
	filter: blur(30px);
	animation: pw-aurora 16s ease-in-out infinite;
}
.pw-hero__aurora::after {
	content: ""; position: absolute; inset: 10% 0 auto 30%; height: 80%;
	background: radial-gradient(closest-side, rgba(74, 144, 226, .30), transparent 70%);
	filter: blur(36px);
	animation: pw-aurora-2 21s ease-in-out infinite;
}

/* ------------------------------------------------------- Chat/voice demo */

.pw-chat {
	position: relative;
	width: 100%; max-width: 400px; margin-inline: auto;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 20px;
	padding: 18px;
	backdrop-filter: blur(14px);
	box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .6);
}
.pw-chat__bar {
	display: flex; align-items: center; gap: 10px;
	padding-bottom: 14px; margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pw-chat__avatar {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--pw-blue); color: #fff; flex-shrink: 0;
}
.pw-chat__avatar svg { width: 17px; height: 17px; }
.pw-chat__who { font-size: .8125rem; font-weight: 600; color: #fff; line-height: 1.3; }
.pw-chat__status { font-size: .6875rem; color: rgba(255, 255, 255, .5); }

.pw-live { display: inline-flex; align-items: center; gap: 6px; }
.pw-live::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: #2DD4A7; animation: pw-pulse 2.4s ease-out infinite;
}

.pw-chat__log { display: flex; flex-direction: column; gap: 10px; min-height: 232px; }

.pw-chat__msg {
	max-width: 84%; padding: 10px 14px;
	font-size: .8125rem; line-height: 1.5;
	border-radius: 14px;
	opacity: 0;
	animation: pw-msg-in .5s cubic-bezier(.22,.61,.36,1) forwards;
}
.pw-chat__msg--them {
	align-self: flex-start;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .9);
	border-bottom-left-radius: 5px;
}
.pw-chat__msg--us {
	align-self: flex-end;
	background: var(--pw-blue);
	color: #fff;
	border-bottom-right-radius: 5px;
}
.pw-chat__msg--note {
	align-self: center; max-width: 100%;
	background: rgba(45, 212, 167, .13);
	border: 1px solid rgba(45, 212, 167, .3);
	color: #8FF0D3;
	font-size: .6875rem; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	border-radius: 999px; padding: 6px 13px;
}

.pw-typing { display: inline-flex; gap: 4px; align-items: center; }
.pw-typing i {
	width: 5px; height: 5px; border-radius: 50%; background: currentColor;
	animation: pw-dot 1.3s ease-in-out infinite;
}
.pw-typing i:nth-child(2) { animation-delay: .16s; }
.pw-typing i:nth-child(3) { animation-delay: .32s; }

/* Voice waveform strip */
.pw-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.pw-wave span {
	display: block; width: 3px; height: 100%; border-radius: 2px;
	background: var(--pw-blue-400);
	animation: pw-wave 1.1s ease-in-out infinite;
}
.pw-wave span:nth-child(2) { animation-delay: .1s }
.pw-wave span:nth-child(3) { animation-delay: .2s }
.pw-wave span:nth-child(4) { animation-delay: .3s }
.pw-wave span:nth-child(5) { animation-delay: .4s }
.pw-wave span:nth-child(6) { animation-delay: .25s }
.pw-wave span:nth-child(7) { animation-delay: .15s }

/* ------------------------------------------------------------- Channels */

.pw-channel {
	position: relative; overflow: hidden;
	padding: 32px 30px;
	border-radius: var(--pw-radius);
	background: #fff; border: 1px solid var(--pw-line);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pw-channel::before,
.pw-card--sweep::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--pw-blue), var(--pw-blue-400));
	transform: scaleX(0); transform-origin: left;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.pw-channel:hover { transform: translateY(-6px); box-shadow: var(--pw-shadow-lg); border-color: var(--pw-blue-100); }
.pw-channel:hover::before,
.pw-card--sweep:hover::before { transform: scaleX(1); }
.pw-channel__icon {
	display: grid; place-items: center;
	width: 56px; height: 56px; margin-bottom: 22px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--pw-blue), var(--pw-blue-400));
	color: #fff;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pw-channel:hover .pw-channel__icon { transform: scale(1.08) rotate(-5deg); }
.pw-channel__icon svg { width: 26px; height: 26px; }
.pw-channel h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pw-channel p { font-size: .9375rem; }
.pw-channel__tag {
	display: inline-block; margin-bottom: 14px;
	font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--pw-blue); background: var(--pw-blue-50);
	padding: 5px 11px; border-radius: 999px;
}

/* ------------------------------------------------------ Ownership model */

.pw-own { text-align: center; }
.pw-own__quote {
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	font-weight: 800; letter-spacing: -.025em; line-height: 1.25;
	color: #fff; max-width: 18ch; margin: 0 auto 18px;
}
.pw-own__quote em { font-style: normal; color: var(--pw-blue-400); }
.pw-own__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
@media (max-width: 820px) { .pw-own__grid { grid-template-columns: 1fr; } }
.pw-own__item {
	padding: 28px 24px; border-radius: var(--pw-radius);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .11);
	text-align: left;
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.pw-own__item:hover { background: rgba(255,255,255,.08); border-color: rgba(74,144,226,.4); transform: translateY(-4px); }
.pw-own__item h4 { font-size: 1rem; margin-bottom: 7px; }
.pw-own__item p { font-size: .875rem; margin: 0; }

/* ------------------------------------------------------- Capability tiers */

/* align-items defaults to stretch, so every card matches the tallest. */
.pw-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
@media (max-width: 940px) { .pw-tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.pw-tier {
	position: relative;
	display: flex; flex-direction: column;
	height: 100%;
	padding: 34px 30px 30px;
	background: #fff;
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pw-tier:hover { transform: translateY(-6px); box-shadow: var(--pw-shadow-lg); }
.pw-tier--featured {
	border-color: var(--pw-blue);
	box-shadow: 0 0 0 1px var(--pw-blue), var(--pw-shadow);
}
.pw-tier__flag {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--pw-blue); color: #fff;
	font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: 6px 15px; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 6px 16px -6px rgba(0, 88, 232, .7);
}
.pw-tier__level {
	font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pw-muted); margin-bottom: 10px;
}
.pw-tier h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pw-tier__sub { font-size: .9375rem; margin-bottom: 20px; }

/* Price block */
.pw-tier__price {
	margin-bottom: 20px; padding-bottom: 20px;
	border-bottom: 1px solid var(--pw-line);
}
.pw-tier__setup {
	display: flex; align-items: baseline; gap: 7px;
	font-size: 2rem; font-weight: 800; color: var(--pw-ink);
	letter-spacing: -.03em; line-height: 1.1;
}
.pw-tier__setup small { font-size: .8125rem; font-weight: 600; color: var(--pw-muted); letter-spacing: 0; }
.pw-tier__care { margin-top: 8px; font-size: .9375rem; color: var(--pw-body); }
.pw-tier__care strong { color: var(--pw-ink); font-weight: 700; }

/* The checklist takes the slack so footnotes line up across cards. */
.pw-tier .pw-checklist { padding-top: 2px; }
/*
 * margin-top:auto pins the footnote to the bottom of the card, so footnotes
 * line up across tiers even when their feature lists differ in length.
 * Do not override this margin — a fixed value re-breaks the alignment.
 */
.pw-tier__foot {
	margin-top: auto; padding-top: 20px;
	border-top: 1px solid var(--pw-line);
	font-size: .8125rem; color: var(--pw-muted);
}
.pw-tier .pw-checklist { margin-bottom: 24px; }

/* ------------------------------------------------------------ Do / Don't */

.pw-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .pw-dd { grid-template-columns: 1fr; } }
.pw-dd__col {
	padding: 32px 30px; border-radius: var(--pw-radius);
	border: 1px solid var(--pw-line); background: #fff;
	box-shadow: var(--pw-shadow-sm);
}

/* The "never does" column runs dark, matching the Our Vision panel. */
.pw-dd__col--no {
	background: var(--pw-navy-900);
	background-image: radial-gradient(520px 320px at 85% 8%, rgba(0, 88, 232, .3), transparent 65%);
	border-color: transparent;
	color: rgba(255, 255, 255, .74);
}
.pw-dd__col--no h3 { color: #fff; }

.pw-dd__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pw-dd__badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.pw-dd__badge--yes { background: rgba(16, 185, 129, .12); color: #059669; }
.pw-dd__badge--no { background: rgba(255, 255, 255, .12); color: var(--pw-blue-400); }
.pw-dd__head h3 { margin: 0; font-size: 1.15rem; }
.pw-dd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.pw-dd__list li { margin: 0; padding-left: 28px; position: relative; font-size: .9375rem; }
.pw-dd__list li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 15px; height: 2px; border-radius: 2px; background: currentColor; opacity: .35;
}
.pw-dd__col--yes .pw-dd__list li::before { background: #059669; opacity: .55; }
.pw-dd__col--no .pw-dd__list li::before { background: var(--pw-blue-400); opacity: .7; }

/* ------------------------------------------------- Animated SVG visuals */

.pw-visual { width: 100%; max-width: 480px; margin-inline: auto; }
.pw-visual svg { width: 100%; height: auto; overflow: visible; }

@keyframes pw-v-breathe { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.09); opacity: 1 } }
@keyframes pw-v-spin    { to { transform: rotate(360deg) } }
@keyframes pw-v-pulse   { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes pw-v-float   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-11px) } }
@keyframes pw-v-dash    { to { stroke-dashoffset: -36 } }
@keyframes pw-v-wave-b  { 0%,100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }
@keyframes pw-v-scan    { 0% { transform: translateY(52px); opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { transform: translateY(240px); opacity: 0 } }
@keyframes pw-v-chip    { 0%,100% { opacity: .45; transform: translateX(8px) } 22%,72% { opacity: 1; transform: translateX(0) } }
@keyframes pw-v-node    { 0%,100% { opacity: .72 } 50% { opacity: 1 } }
@keyframes pw-v-draw    { from { stroke-dashoffset: 340 } to { stroke-dashoffset: 0 } }
@keyframes pw-v-bars    { from { transform: scaleY(.55) } to { transform: scaleY(1) } }
@keyframes pw-v-caret   { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes pw-v-chan    { 0% { opacity: 0 } 6%,26% { opacity: 1 } 34%,100% { opacity: 0 } }

.pw-v-breathe { animation: pw-v-breathe 7s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.pw-v-spin    { animation: pw-v-spin 26s linear infinite; }
.pw-v-spin--rev { animation-duration: 38s; animation-direction: reverse; }
.pw-v-pulse   { animation: pw-v-pulse 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.pw-v-float   { animation: pw-v-float 6s ease-in-out infinite; }
.pw-v-float--slow { animation-duration: 8.5s; animation-delay: -2s; }
.pw-v-dash    { animation: pw-v-dash 1.6s linear infinite; }
.pw-v-chip    { animation: pw-v-chip 5.5s ease-in-out infinite; }
.pw-v-chip--2 { animation-delay: .7s; }
.pw-v-chip--3 { animation-delay: 1.4s; }
.pw-v-chan    { animation: pw-v-chan 5.4s ease-in-out infinite; }
.pw-v-chan--2 { animation-delay: 1.8s; }
.pw-v-chan--3 { animation-delay: 3.6s; }
.pw-v-nodes circle { animation: pw-v-node 3.6s ease-in-out infinite; }
.pw-v-nodes circle:nth-child(2n) { animation-delay: .5s; }
.pw-v-nodes circle:nth-child(3n) { animation-delay: 1s; }
.pw-v-scan rect { }
.pw-v-scan { animation: pw-v-scan 4.2s cubic-bezier(.5,0,.5,1) infinite; }
.pw-v-draw { stroke-dasharray: 340; animation: pw-v-draw 2.6s ease-out forwards; }
.pw-v-bars rect { transform-origin: bottom; transform-box: fill-box; animation: pw-v-bars 1.4s cubic-bezier(.22,.61,.36,1) backwards; }
.pw-v-bars rect:nth-child(1) { animation-delay: .05s }
.pw-v-bars rect:nth-child(2) { animation-delay: .18s }
.pw-v-bars rect:nth-child(3) { animation-delay: .31s }
.pw-v-bars rect:nth-child(4) { animation-delay: .44s }
.pw-v-caret   { animation: pw-v-caret 1.1s steps(1) infinite; }
.pw-v-wave rect { transform-origin: center; transform-box: fill-box; animation: pw-v-wave-b 1.2s ease-in-out infinite; }
.pw-v-wave rect:nth-child(2) { animation-delay: .12s }
.pw-v-wave rect:nth-child(3) { animation-delay: .24s }
.pw-v-wave rect:nth-child(4) { animation-delay: .36s }
.pw-v-wave rect:nth-child(5) { animation-delay: .48s }

@media (prefers-reduced-motion: reduce) {
	.pw-visual * { animation: none !important; }
	.pw-v-draw { stroke-dashoffset: 0 !important; }
	.pw-v-chip { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------- Integrations hub */

/*
 * Two layouts from one markup. Narrow screens get a plain card grid; from
 * 920px the same cards are positioned around a pulsing core. The ring only
 * runs with exactly six cards (pw-hub--ring) — any other count keeps the grid,
 * because six is what the fixed angles are cut for.
 */

.pw-hub { margin-top: 6px; }

.pw-hub__stage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .pw-hub__stage { grid-template-columns: 1fr; } }

.pw-hub__orbit, .pw-hub__sonar, .pw-hub__spokes { display: none; }

.pw-hub__core {
	grid-column: 1 / -1; display: grid; place-items: center; gap: 8px;
	padding: 20px; border-radius: var(--pw-radius); color: #fff;
	background: linear-gradient(135deg, var(--pw-blue-400), var(--pw-blue));
	box-shadow: 0 18px 40px -18px rgba(0, 88, 232, .55);
}
.pw-hub__core-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; text-align: center; }
.pw-hub__core-label { font-size: .8125rem; font-weight: 650; letter-spacing: .01em; }

.pw-hub__node {
	display: flex; align-items: flex-start; gap: 13px;
	padding: 15px 17px; background: var(--pw-white);
	border: 1px solid var(--pw-line); border-radius: var(--pw-radius);
	box-shadow: var(--pw-shadow-sm);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pw-hub__node:hover { transform: translateY(-4px); box-shadow: var(--pw-shadow); border-color: var(--pw-blue-100); }

.pw-hub__ico {
	flex: none; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 11px;
	background: var(--pw-blue-50); color: var(--pw-blue);
	transition: background .4s ease, color .4s ease;
}
.pw-hub__text strong { display: block; color: var(--pw-ink); font-size: .9375rem; font-weight: 650; line-height: 1.35; }
.pw-hub__text span { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.5; color: var(--pw-muted); }

.pw-hub__note { margin: 30px auto 0; max-width: 64ch; text-align: center; font-size: .9375rem; color: var(--pw-muted); }

/* The hub talking to each integration in turn. */
@keyframes pw-hub-ping {
	0%, 100% { background: var(--pw-blue-50); color: var(--pw-blue); }
	7%, 17%  { background: var(--pw-blue); color: #fff; }
}
@keyframes pw-hub-orbit {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pw-hub-sonar {
	from { transform: scale(1); opacity: .5; }
	to   { transform: scale(1.9); opacity: 0; }
}

@media (min-width: 920px) {
	.pw-hub--grid .pw-hub__stage { grid-template-columns: repeat(3, 1fr); }

	.pw-hub--ring .pw-hub__stage {
		display: block; position: relative;
		max-width: 980px; margin-inline: auto; aspect-ratio: 98 / 54;
	}

	.pw-hub--ring .pw-hub__node {
		position: absolute; left: var(--x); top: var(--y); width: 224px;
		transform: translate(-50%, -50%);
	}
	/* The reveal animates opacity only here — the transform holds the position. */
	.pw-js .pw-hub--ring .pw-hub__node,
	.pw-js .pw-hub--ring .pw-hub__node.is-visible { transform: translate(-50%, -50%); }
	.pw-hub--ring .pw-hub__node:hover,
	.pw-js .pw-hub--ring .pw-hub__node:hover { transform: translate(-50%, -50%) translateY(-4px); }

	.pw-hub--ring .pw-hub__ico { animation: pw-hub-ping 7.2s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }

	.pw-hub--ring .pw-hub__core {
		position: absolute; left: 50%; top: 50%; width: 168px; height: 168px;
		padding: 0; border-radius: 50%;
	}
	/* Beats .pw-js .pw-reveal.is-visible, which would reset the centring. */
	.pw-hub--ring .pw-hub__core,
	.pw-js .pw-hub--ring .pw-hub__core,
	.pw-js .pw-hub--ring .pw-hub__core.is-visible { transform: translate(-50%, -50%); }

	.pw-hub--ring .pw-hub__sonar {
		display: block; position: absolute; inset: 0; border-radius: 50%;
		border: 1px solid rgba(0, 88, 232, .4);
		animation: pw-hub-sonar 3.8s ease-out infinite;
	}
	.pw-hub--ring .pw-hub__sonar--2 { animation-delay: 1.9s; }

	.pw-hub--ring .pw-hub__spokes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

	.pw-hub--ring .pw-hub__orbit {
		display: block; position: absolute; left: 50%; top: 50%;
		border-radius: 50%; border: 1px dashed var(--pw-blue-100);
		transform: translate(-50%, -50%);
	}
	.pw-hub--ring .pw-hub__orbit--1 { width: 310px; height: 310px; animation: pw-hub-orbit 48s linear infinite; }
	.pw-hub--ring .pw-hub__orbit--2 {
		width: 452px; height: 452px; border-color: rgba(74, 144, 226, .22);
		animation: pw-hub-orbit 72s linear infinite reverse;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pw-hub__ico, .pw-hub__orbit, .pw-hub__sonar { animation: none !important; }
	.pw-hub__spokes circle { display: none; }
	.pw-hub__sonar { display: none; }
}

/* --------------------------------------------- Counter (animated numbers) */

.pw-stat__value[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Editor tweaks */

.block-editor-block-list__layout .pw-hero { border-radius: 6px; }
.editor-styles-wrapper .pw-header, .editor-styles-wrapper .pw-footer { display: none; }