/* ============================================================================
   subscriptions.pkware.com — site stylesheet
   ----------------------------------------------------------------------------
   Built from micro-sites/brand/COMPONENTS.md. Loads after tokens.css, which is
   a verbatim copy of brand/TOKENS.css and is never edited here.

   Departures from COMPONENTS.md, both at Bob's direction (2026-10-20):
     - Header is white with the colour "PKWARE Subscriptions" logo, as on the
       live site, instead of the navy band with the white logo.
     - Footer is the live site's brand block + three columns, not one line.

   Every colour, size and space is a token. No literal values except the
   breakpoint widths and the logo's intrinsic proportions.
   ========================================================================== */

/* --- Lato, self-hosted --------------------------------------------------
   Two files, latin subset, 400 and 700. No third-party request.
   Lato is SIL Open Font License 1.1 — see /assets/fonts/OFL.txt. */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/lato-latin-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/lato-latin-700.woff2') format('woff2');
}

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

body {
	margin: 0;
	background: var(--pk-color-bg);
	color: var(--pk-color-text);
	font-family: var(--pk-font-sans);
	font-size: var(--pk-text-base);
	line-height: var(--pk-leading-normal);
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

.pk-skip {
	position: absolute;
	left: -9999px;
}
.pk-skip:focus {
	left: var(--pk-space-sm);
	top: var(--pk-space-sm);
	z-index: 10;
	padding: var(--pk-space-2xs) var(--pk-space-sm);
	background: var(--pk-navy);
	color: var(--pk-white);
	border-radius: var(--pk-radius-md);
}

/* One focus treatment for the whole site. */
:focus-visible {
	outline: 3px solid var(--pk-color-focus);
	outline-offset: 2px;
}

/* --- Containers --------------------------------------------------------- */
.pk-wrap {
	max-width: var(--pk-container-max);
	margin-inline: auto;
	padding-inline: var(--pk-container-pad);
}
.pk-prose {
	max-width: var(--pk-container-narrow);
	margin-inline: auto;
	padding-inline: var(--pk-container-pad);
}

/* --- Type ------------------------------------------------------------- */
h1, h2, h3, h4 {
	margin: 0 0 var(--pk-space-sm);
	font-family: var(--pk-font-serif);
	font-weight: var(--pk-weight-bold);
	line-height: var(--pk-leading-tight);
	color: var(--pk-color-heading);
}
h1 { font-size: var(--pk-text-3xl); }
h2 { font-size: var(--pk-text-2xl); margin-top: var(--pk-space-xl); }
h3 { font-size: var(--pk-text-xl);  margin-top: var(--pk-space-lg); }

p, li { margin: 0 0 var(--pk-space-sm); }

.pk-prose--legal p,
.pk-prose--legal li { line-height: var(--pk-leading-loose); }

.pk-lede {
	font-size: var(--pk-text-lg);
	color: var(--pk-color-text-soft);
}

/* --- Links ------------------------------------------------------------ */
a {
	color: var(--pk-color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--pk-color-link-hover); }

/* --- Header ----------------------------------------------------------
   White, as on the live site. Background AND colour are both set. */
.pk-header {
	background: var(--pk-color-bg);
	color: var(--pk-color-heading);
	border-bottom: 1px solid var(--pk-color-border);
}
.pk-header__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pk-space-sm);
	min-height: var(--pk-header-height);
	padding-block: var(--pk-space-xs);
}
.pk-header__logo img { display: block; width: 200px; height: auto; }
.pk-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pk-space-2xs) var(--pk-space-md);
}
.pk-header__nav a {
	color: var(--pk-color-heading);
	text-decoration: none;
	font-size: var(--pk-text-sm);
	font-weight: var(--pk-weight-bold);
	transition: color var(--pk-transition);
}
.pk-header__nav a:hover { color: var(--pk-blue); }

/* --- Button ----------------------------------------------------------
   The one button on the page: Book a Demo, carried from the live header.
   It sits inside the nav, so .pk-header__nav a would repaint it navy-on-cyan
   with no padding. .pk-header__nav a.pk-btn (two classes + element) outranks
   .pk-header__nav a (one class + element) by specificity, not by order — so
   it wins wherever it sits. Keep both selectors if this is ever edited. */
.pk-btn,
.pk-header__nav a.pk-btn {
	display: inline-block;
	padding: var(--pk-space-2xs) var(--pk-space-md);
	border-radius: var(--pk-radius-md);
	background: var(--pk-cyan);
	color: var(--pk-navy);
	font-weight: var(--pk-weight-bold);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background var(--pk-transition), color var(--pk-transition);
}
.pk-btn:hover,
.pk-header__nav a.pk-btn:hover { background: var(--pk-navy); color: var(--pk-white); }

/* --- Main ------------------------------------------------------------- */
main {
	padding-block: var(--pk-space-xl) var(--pk-space-lg);
}

/* --- Document list ---------------------------------------------------- */
.pk-docs { list-style: none; margin: var(--pk-space-sm) 0 var(--pk-space-lg); padding: 0; }
.pk-docs li {
	margin: 0;
	padding: var(--pk-space-sm) 0;
	border-bottom: 1px solid var(--pk-color-border);
}
.pk-docs li:first-child { border-top: 1px solid var(--pk-color-border); }
.pk-docs a {
	font-weight: var(--pk-weight-bold);
	text-decoration: none;
}
.pk-docs a:hover { text-decoration: underline; }
.pk-docs__meta {
	display: block;
	margin-top: var(--pk-space-3xs);
	font-size: var(--pk-text-sm);
	color: var(--pk-color-text-soft);
}

/* --- Footer ----------------------------------------------------------
   Dark band. Background AND colour set; headings get their own colour
   because the global h2 rule would otherwise paint them navy on navy.
   .pk-foot__heading (one class) beats h2 (one element) regardless of
   order. */
.pk-foot {
	margin-top: var(--pk-space-2xl);
	background: var(--pk-deep-purple);
	color: rgba(var(--pk-white-rgb), 0.86);
	font-size: var(--pk-text-sm);
}
.pk-foot a { color: inherit; text-decoration: none; }
.pk-foot a:hover { color: var(--pk-cyan); text-decoration: underline; }

.pk-foot__in {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--pk-space-lg);
	padding-block: var(--pk-space-xl) var(--pk-space-lg);
}
.pk-foot__logo img { display: block; width: 160px; height: auto; }
.pk-foot__brand p { margin: var(--pk-space-sm) 0; line-height: var(--pk-leading-normal); }

.pk-foot__heading {
	margin: 0 0 var(--pk-space-xs);
	font-family: var(--pk-font-sans);
	font-size: var(--pk-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pk-white);
}
.pk-foot__col ul,
.pk-foot__social { list-style: none; margin: 0; padding: 0; }
.pk-foot__col li { margin: 0 0 var(--pk-space-2xs); }

.pk-foot__social { display: flex; gap: var(--pk-space-sm); }
.pk-foot__social li { margin: 0; }
.pk-foot__social svg { display: block; fill: currentColor; }

.pk-foot__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pk-space-sm);
	padding-block: var(--pk-space-md);
	border-top: 1px solid rgba(var(--pk-white-rgb), 0.18);
}
.pk-foot__bottom p { margin: 0; }
.pk-foot__legal { display: flex; flex-wrap: wrap; gap: var(--pk-space-md); }

@media (max-width: 900px) {
	.pk-foot__in { grid-template-columns: 1fr 1fr 1fr; }
	.pk-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.pk-foot__in { grid-template-columns: 1fr; }
	h1 { font-size: var(--pk-text-2xl); }
}

/* --- Print: these get printed. Keep the words, lose the chrome. --------- */
@media print {
	.pk-header__nav,
	.pk-foot,
	.pk-skip { display: none; }
	.pk-docs__meta { color: var(--pk-color-text); }
}