/*--
	Primal Connect - site styling.

	Loaded AFTER css/style.css on every page. style.css is the original W3layouts
	template sheet; it is 3400 lines of rules for a shop template, most of which
	this site never uses. Rather than pick through it, the layout and typography
	this site actually depends on live here, where they can be read and changed
	in one place. The colour palette is the template's own and is unchanged.

	Sections:
		1. Tokens
		2. Base typography
		3. Header
		4. Navigation
		5. Breadcrumbs
		6. Sections and prose
		7. Hero
		8. Cards
		9. Pricing
		10. Table of contents (reference / use cases)
		11. Forms
		12. FAQ
		13. CTA band
		14. Footer
		15. Responsive
--*/

/* ---------------------------------------------------------------- 1. Tokens */

:root {
	--pc-navy:        #01296f;
	--pc-navy-dark:   #011d50;
	--pc-blue:        #4070c3;
	--pc-blue-dark:   #2f57a0;
	--pc-lilac:       #d6d6e0;

	--pc-ink:         #1b1f2a;  /* headings */
	--pc-body:        #4a5060;  /* body copy - 8.1:1 on white */
	--pc-muted:       #6b7280;  /* captions, meta */

	--pc-line:        #e2e5ec;
	--pc-surface:     #f6f7fa;
	--pc-surface-alt: #eef0f5;

	--pc-section-y:   4.5rem;
	--pc-measure:     68ch;
	--pc-radius:      4px;
	--pc-shadow:      0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

/* ------------------------------------------------------- 2. Base typography */

html, body {
	font-size: 100%;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--pc-body);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* The template sets margin:0 on every heading and p, which is why the original
   pages had no vertical rhythm at all. Put it back. */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	color: var(--pc-ink);
	line-height: 1.25;
	margin: 0;
	font-weight: 700;
}

.pc-h1, h1.pc-h1 { font-size: 2.5rem;   letter-spacing: -.02em; }
.pc-h2, h2.pc-h2 { font-size: 1.875rem; letter-spacing: -.01em; }
.pc-h3, h3.pc-h3 { font-size: 1.25rem; }
.pc-h4, h4.pc-h4 { font-size: 1.0625rem; }

.pc-lead {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--pc-body);
}

a { color: var(--pc-blue-dark); }
a:hover, a:focus { color: var(--pc-navy); text-decoration: underline; }

code, .pc-code-inline {
	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: .9375em;
	background: var(--pc-surface-alt);
	border: 1px solid var(--pc-line);
	border-radius: 3px;
	padding: .1em .35em;
	color: #24292f;
}

/* Visible keyboard focus. The template removed outlines everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--pc-blue);
	outline-offset: 2px;
}

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

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

.pc-btn {
	display: inline-block;
	padding: .75rem 1.5rem;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--pc-radius);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pc-btn:hover, .pc-btn:focus { text-decoration: none; }

.pc-btn-primary {
	background: var(--pc-blue);
	border-color: var(--pc-blue);
	color: #fff;
}
.pc-btn-primary:hover, .pc-btn-primary:focus {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #fff;
}

.pc-btn-secondary {
	background: transparent;
	border-color: var(--pc-navy);
	color: var(--pc-navy);
}
.pc-btn-secondary:hover, .pc-btn-secondary:focus {
	background: var(--pc-navy);
	color: #fff;
}

/* On dark backgrounds (hero, CTA band). */
.pc-btn-ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}
.pc-btn-ghost:hover, .pc-btn-ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--pc-navy);
}

.pc-btn-block { display: block; width: 100%; }

.pc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

/* --------------------------------------------- Bootstrap container clearfix */

/*
	Bootstrap 3 puts clearfix pseudo-elements on .container:

		.container:before, .container:after { content: " "; display: table; }

	They are invisible in a block layout, but a flex or grid container turns every
	pseudo-element into a real item. On the CTA band that pushed the text into the
	second grid cell and the buttons onto a second row; in the header and nav it
	quietly ate a share of the space-between distribution and shifted the logo and
	the menu inward. Switch them off wherever this sheet lays a .container out
	with flex or grid.
*/
.pc-header .container::before,       .pc-header .container::after,
.pc-nav .container::before,          .pc-nav .container::after,
.pc-cta .container::before,          .pc-cta .container::after,
.pc-footer-bottom .container::before, .pc-footer-bottom .container::after {
	content: none;
}

/* -------------------------------------------------------------- 3. Header */

.pc-header {
	background: #fff;
	border-bottom: 1px solid var(--pc-line);
	padding: 1rem 0;
}
.pc-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pc-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	min-width: 0;
}
.pc-brand:hover, .pc-brand:focus { text-decoration: none; }
.pc-brand img {
	height: 44px;
	width: auto;
	display: block;
}
.pc-brand-rule {
	width: 1px;
	height: 30px;
	background: var(--pc-line);
	flex: 0 0 auto;
}
.pc-brand-name {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--pc-navy);
	line-height: 1.2;
	white-space: nowrap;
}
.pc-header-aside {
	font-size: .875rem;
	color: var(--pc-muted);
	white-space: nowrap;
}
.pc-header-aside a { color: var(--pc-muted); }
.pc-header-aside a:hover { color: var(--pc-navy); }

/* --------------------------------------------------------- 4. Navigation */

.pc-nav {
	background: var(--pc-navy);
	position: relative;
	z-index: 20;
}
.pc-nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pc-nav-links {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.pc-nav-links li { font-size: inherit; }
.pc-nav-links a {
	display: block;
	padding: 1.0625rem 1rem;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.pc-nav-links li:first-child a { padding-left: 0; }
.pc-nav-links a:hover,
.pc-nav-links a:focus {
	color: #fff;
	text-decoration: none;
	border-bottom-color: rgba(255, 255, 255, .4);
}
/* The template hardcoded .active on Home on every page and then styled it the
   same white as everything else, so it never showed. This is set per page. */
.pc-nav-links a.is-current {
	color: #fff;
	border-bottom-color: var(--pc-blue);
}

.pc-nav-cta {
	flex: 0 0 auto;
	padding: .5rem 1.25rem;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	color: #fff;
	background: var(--pc-blue);
	border: 2px solid var(--pc-blue);
	border-radius: var(--pc-radius);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.pc-nav-cta:hover, .pc-nav-cta:focus {
	background: #fff;
	border-color: #fff;
	color: var(--pc-navy);
	text-decoration: none;
}

.pc-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--pc-radius);
	padding: .5rem .625rem;
	cursor: pointer;
}
.pc-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	margin: 4px 0;
}

/* ------------------------------------------------------- 5. Breadcrumbs */

.pc-breadcrumbs {
	background: var(--pc-surface);
	border-bottom: 1px solid var(--pc-line);
	padding: .875rem 0;
	font-size: .875rem;
}
.pc-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.pc-breadcrumbs li { font-size: inherit; color: var(--pc-muted); }
.pc-breadcrumbs li + li::before {
	content: "/";
	margin-right: .5rem;
	color: #b6bcc9;
}
.pc-breadcrumbs a { color: var(--pc-blue-dark); }
.pc-breadcrumbs [aria-current="page"] { color: var(--pc-ink); font-weight: 600; }

/* ------------------------------------------------ 6. Sections and prose */

.pc-section { padding: var(--pc-section-y) 0; }
.pc-section-tight { padding: 3rem 0; }
.pc-section-surface { background: var(--pc-surface); }
.pc-section + .pc-section-surface,
.pc-section-surface + .pc-section { border-top: 1px solid var(--pc-line); }

.pc-page-head { margin-bottom: 2.5rem; }
.pc-page-head .pc-h1 { margin-bottom: .75rem; }
.pc-page-head .pc-lead { max-width: var(--pc-measure); color: var(--pc-muted); }

.pc-section-head {
	margin-bottom: 2rem;
	max-width: var(--pc-measure);
}
.pc-section-head .pc-h2 { margin-bottom: .625rem; }
.pc-section-head p { color: var(--pc-muted); }

/* Readable prose column. */
.pc-prose { max-width: var(--pc-measure); }
.pc-prose p { margin: 0 0 1.25rem; }
.pc-prose > h2 { margin: 2.75rem 0 .875rem; font-size: 1.625rem; }
.pc-prose > h3 { margin: 2.25rem 0 .75rem; font-size: 1.25rem; }
.pc-prose > h4 { margin: 1.75rem 0 .625rem; font-size: 1.0625rem; }
.pc-prose > *:first-child { margin-top: 0; }
.pc-prose ul, .pc-prose ol { margin: 0 0 1.25rem 1.25rem; padding: 0; }
.pc-prose li { font-size: inherit; margin-bottom: .5rem; }

/* The API reference needs the full column for tables and code. */
.pc-prose-wide { max-width: none; }

.pc-eyebrow {
	display: block;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pc-blue);
	margin-bottom: .625rem;
}

/* ----------------------------------------------------------------- 7. Hero */

.pc-hero {
	position: relative;
	background-color: var(--pc-navy-dark);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	padding: 5.5rem 0;
	overflow: hidden;
}
.pc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(1, 29, 80, .92) 0%, rgba(1, 29, 80, .78) 45%, rgba(1, 29, 80, .45) 100%);
}
.pc-hero .container { position: relative; z-index: 1; }
.pc-hero-inner { max-width: 40rem; }
.pc-hero h1 {
	color: #fff;
	font-size: 3rem;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin-bottom: 1.125rem;
}
.pc-hero p {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
	margin: 0;
}
.pc-hero-note {
	margin-top: 1.25rem !important;
	font-size: .9375rem !important;
	color: rgba(255, 255, 255, .72) !important;
}

/* ---------------------------------------------------------------- 8. Cards */

.pc-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.pc-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.pc-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: 1.75rem;
	box-shadow: var(--pc-shadow);
}
.pc-section-surface .pc-card { background: #fff; }
.pc-card h3 { font-size: 1.125rem; margin-bottom: .625rem; }
.pc-card p { margin: 0; font-size: 1rem; color: var(--pc-body); }
.pc-card p + p { margin-top: .75rem; }

/* The whole card is a link. style.css sets font-weight:700 on every <a>, which
   the card's paragraphs would otherwise inherit and render entirely in bold. */
.pc-card-link {
	text-decoration: none;
	color: inherit;
	font-weight: 400;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pc-card-link h3 { font-weight: 700; }
.pc-card-link:hover, .pc-card-link:focus {
	text-decoration: none;
	color: inherit;
	border-color: var(--pc-blue);
	box-shadow: 0 4px 14px rgba(16, 24, 40, .1);
}
.pc-card-more {
	margin-top: 1rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--pc-blue-dark);
}

.pc-card-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--pc-radius);
	background: var(--pc-surface-alt);
	color: var(--pc-navy);
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* -------------------------------------------------------------- 9. Pricing */

.pc-price-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	align-items: stretch;
}
/* All three carry a 2px border so the featured one does not sit 1px taller and
   knock its CTA out of line with the others. */
.pc-price {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid var(--pc-line);
	border-radius: var(--pc-radius);
	overflow: hidden;
	box-shadow: var(--pc-shadow);
}
.pc-price-featured { border-color: var(--pc-blue); }
.pc-price-head {
	background: var(--pc-navy);
	color: #fff;
	padding: 1.125rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}
.pc-price-featured .pc-price-head { background: var(--pc-blue); }
.pc-price-head h3 { color: #fff; font-size: 1.25rem; margin: 0; }
.pc-price-tag {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: .2rem .625rem;
	white-space: nowrap;
}
.pc-price-body {
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.pc-price-amount {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--pc-ink);
	line-height: 1.1;
}
.pc-price-unit {
	font-size: .9375rem;
	font-weight: 400;
	color: var(--pc-muted);
	margin-left: .25rem;
}
.pc-price-volume {
	margin: .625rem 0 0;
	font-size: .9375rem;
	color: var(--pc-muted);
}
/* margin-top:auto pins the button to the bottom of the card so the three CTAs
   line up even though the tiers have different amounts of text above them.
   padding-top guarantees a gap when the card is short. */
.pc-price-body .pc-btn {
	margin-top: auto;
	padding-top: .75rem;
}
.pc-price-volume { margin-bottom: 1.75rem; }

.pc-note {
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-left: 3px solid var(--pc-blue);
	border-radius: var(--pc-radius);
	padding: 1rem 1.25rem;
	font-size: .9375rem;
	margin: 2rem 0 0;
}
.pc-note p { margin: 0; }
.pc-note p + p { margin-top: .625rem; }

/* ------------------------------------------ 10. Table of contents / layout */

.pc-with-toc {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.pc-toc {
	position: sticky;
	top: 1.5rem;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: 1.25rem 1.375rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
}
.pc-toc h2 {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pc-muted);
	margin: 0 0 .875rem;
}
.pc-toc ol, .pc-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pc-toc li { font-size: .875rem; margin: 0; }
.pc-toc a {
	display: block;
	padding: .3125rem 0 .3125rem .75rem;
	border-left: 2px solid var(--pc-line);
	color: var(--pc-body);
	text-decoration: none;
	line-height: 1.45;
}
.pc-toc a:hover, .pc-toc a:focus {
	color: var(--pc-navy);
	border-left-color: var(--pc-blue);
	text-decoration: none;
}
.pc-toc-group {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pc-ink);
	margin: 1.125rem 0 .375rem;
}
.pc-toc-group:first-of-type { margin-top: 0; }
.pc-toc a.pc-toc-sub { padding-left: 1.5rem; color: var(--pc-muted); }

/* Anchored headings should not land under a sticky element or the window edge. */
[id] { scroll-margin-top: 1.5rem; }

/* ---------------------------------------------------------------- 11. Forms */

.pc-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	align-items: start;
}
.pc-form-card {
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: 2rem;
	box-shadow: var(--pc-shadow);
}
.pc-field { margin-bottom: 1.125rem; }
.pc-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.pc-field label {
	display: block;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .875rem;
	font-weight: 600;
	color: var(--pc-ink);
	margin-bottom: .375rem;
}
.pc-field input {
	display: block;
	width: 100%;
	padding: .6875rem .75rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--pc-ink);
	background: #fff;
	border: 1px solid #c8cdd8;
	border-radius: var(--pc-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pc-field input:focus {
	border-color: var(--pc-blue);
	box-shadow: 0 0 0 3px rgba(64, 112, 195, .15);
	outline: none;
}
.pc-field input::placeholder { color: #9aa1ae; }
.pc-field-hint {
	display: block;
	margin-top: .375rem;
	font-size: .8125rem;
	color: var(--pc-muted);
}

.pc-form-status {
	margin-top: 1.25rem;
	padding: 1rem 1.125rem;
	border-radius: var(--pc-radius);
	font-size: .9375rem;
	line-height: 1.6;
	border: 1px solid var(--pc-line);
	background: var(--pc-surface);
}
.pc-form-status[hidden] { display: none; }
.pc-form-status-ok     { border-left: 3px solid #2f855a; }
.pc-form-status-error  { border-left: 3px solid #c53030; }
.pc-form-status-busy   { border-left: 3px solid var(--pc-blue); }
.pc-form-status dl { margin: .75rem 0 0; }
.pc-form-status dt {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pc-muted);
	font-weight: 700;
	margin-top: .625rem;
}
.pc-form-status dd {
	margin: .125rem 0 0;
	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: .9375rem;
	color: var(--pc-ink);
	word-break: break-all;
}

.pc-steps { list-style: none; margin: 0; padding: 0; counter-reset: pc-step; }
.pc-steps li {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 1.5rem;
	font-size: .9375rem;
	counter-increment: pc-step;
}
.pc-steps li:last-child { margin-bottom: 0; }
.pc-steps li::before {
	content: counter(pc-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pc-navy);
	color: #fff;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
}
.pc-steps strong { display: block; color: var(--pc-ink); }

.pc-aside {
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: 1.75rem;
}
.pc-aside h2 { font-size: 1.125rem; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ 12. FAQ */

.pc-faq { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.pc-faq > li {
	border-bottom: 1px solid var(--pc-line);
	margin: 0;
	font-size: inherit;
}
.pc-faq > li:first-child { border-top: 1px solid var(--pc-line); }
.pc-faq-q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.125rem .25rem;
	background: transparent;
	border: 0;
	text-align: left;
	font-family: 'Raleway', 'Open Sans', sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--pc-ink);
	cursor: pointer;
	line-height: 1.45;
}
.pc-faq-q:hover { color: var(--pc-navy); }
.pc-faq-q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--pc-blue);
	line-height: 1.2;
}
.pc-faq-q[aria-expanded="true"]::after { content: "\2212"; }
.pc-faq-a { padding: 0 2.5rem 1.375rem .25rem; }
.pc-faq-a[hidden] { display: none; }
.pc-faq-a p { margin: 0; font-size: 1rem; }

/* -------------------------------------------------------------- 13. CTA band */

.pc-cta {
	background: var(--pc-navy);
	color: #fff;
	padding: 3.5rem 0;
}
/* Grid rather than flex: with flex-wrap the text and the buttons would drop onto
   separate lines once they no longer fit, and space-between then threw the text
   to the right edge and the buttons to the left. The text column may shrink. */
.pc-cta .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem;
}
.pc-cta-text { max-width: 34rem; }
.pc-cta h2 { color: #fff; font-size: 1.75rem; margin-bottom: .5rem; }
.pc-cta p { margin: 0; color: rgba(255, 255, 255, .82); }
.pc-cta .pc-btn-row { margin-top: 0; flex: 0 0 auto; }

/* ---------------------------------------------------------------- 14. Footer */

.pc-footer {
	background: #1b1f2a;
	color: #a8aebc;
	padding: 3.5rem 0 0;
	font-size: .9375rem;
}
.pc-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}
.pc-footer h2 {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.125rem;
}
.pc-footer ul { list-style: none; margin: 0; padding: 0; }
.pc-footer li { font-size: inherit; margin-bottom: .625rem; line-height: 1.55; }
.pc-footer a { color: #a8aebc; text-decoration: none; }
.pc-footer a:hover, .pc-footer a:focus { color: #fff; text-decoration: underline; }
.pc-footer p { margin: 0 0 .875rem; line-height: 1.65; }

/* Address lines used to sit beside a floated icon, which broke the wrap mid
   street number. Grid keeps the icon out of the text flow. */
.pc-footer-contact li {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
}
.pc-footer-contact i {
	color: var(--pc-blue);
	font-size: .875rem;
	line-height: 1.6;
}
.pc-footer-contact address {
	font-style: normal;
	margin: 0;
	line-height: 1.55;
}

.pc-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 1.25rem 0;
	font-size: .875rem;
}
.pc-footer-bottom .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.pc-footer-bottom p { margin: 0; }

/* ------------------------------------------------------------ 15. Responsive */

@media (max-width: 991px) {
	.pc-cta .container { grid-template-columns: 1fr; gap: 1.75rem; }
	.pc-cta .pc-btn-row { justify-content: flex-start; }
	.pc-with-toc { grid-template-columns: 1fr; gap: 2rem; }
	.pc-toc { position: static; max-height: none; }
	.pc-form-layout { grid-template-columns: 1fr; gap: 2rem; }
	.pc-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 767px) {
	:root { --pc-section-y: 3rem; }

	body { font-size: 1rem; }
	.pc-h1, h1.pc-h1 { font-size: 1.875rem; }
	.pc-h2, h2.pc-h2 { font-size: 1.5rem; }
	.pc-lead { font-size: 1.0625rem; }

	.pc-header { padding: .75rem 0; }
	.pc-brand img { height: 32px; }
	.pc-brand-name { font-size: 1.0625rem; }
	.pc-brand { gap: .75rem; }
	.pc-header-aside { display: none; }

	.pc-nav .container { flex-wrap: wrap; padding-top: .625rem; padding-bottom: .625rem; }
	.pc-nav-toggle { display: block; order: 1; }
	.pc-nav-cta { order: 2; }
	.pc-nav-links {
		order: 3;
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		border-top: 1px solid rgba(255, 255, 255, .15);
		margin-top: .625rem;
	}
	.pc-nav-links.is-open { display: flex; }
	.pc-nav-links a,
	.pc-nav-links li:first-child a {
		padding: .75rem 0;
		border-bottom: 0;
		border-left: 3px solid transparent;
		padding-left: .75rem;
	}
	.pc-nav-links a.is-current { border-bottom-color: transparent; border-left-color: var(--pc-blue); }

	.pc-hero { padding: 3.5rem 0; }
	.pc-hero h1 { font-size: 2rem; }
	.pc-hero p { font-size: 1.0625rem; }
	.pc-hero::before {
		background: linear-gradient(180deg, rgba(1, 29, 80, .9) 0%, rgba(1, 29, 80, .84) 100%);
	}

	.pc-btn-row .pc-btn { flex: 1 1 100%; }
	/* Stacked, the two name fields need the same gap as every other field, not
	   the tighter side-by-side one. */
	.pc-field-row { grid-template-columns: 1fr; gap: 1.125rem; }
	.pc-form-card, .pc-aside { padding: 1.5rem; }

	.pc-cta { padding: 2.5rem 0; }
	.pc-cta .container { align-items: flex-start; }
	.pc-cta .pc-btn-row { width: 100%; }

	.pc-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.pc-footer-bottom .container { flex-direction: column; align-items: flex-start; }
}