/* ==========================================================================
   Proxima File Vault - theme layer on top of Halcyonic (HTML5 UP).
   Palette extrapolated from the template's own values:
     slate band  #3B4346 / #353D40      hairline  #272d30 / #e2e6e8
     body copy   #546b76                muted     #8d9ca3 / #b5bec3
     headings    #373f42                subhead   #96a9b5
     accent      #ed391b -> #ce1a00     paper     #f7f7f7
   House rules for this layer: solid fills, square edges, no gradients.
   ========================================================================== */

:root {
	--slate-900: #272d30;
	--slate-800: #2f3639;
	--slate-700: #353d40;
	--slate-600: #3b4346;
	--slate-500: #51575a;
	--body:      #546b76;
	--muted:     #8d9ca3;
	--line-dark: #b5bec3;
	--line:      #e2e6e8;
	--paper:     #f7f7f7;
	--white:     #ffffff;
	--heading:   #373f42;
	--subhead:   #96a9b5;
	--accent:    #ed391b;
	--accent-dk: #ce1a00;
}

/* --------------------------------------------------------------------------
   1. Buttons - solid and square. Halcyonic's .button-large shipped a
   `linear-gradient(top, ...)` which is invalid in modern browsers and renders
   as no gradient at all; we replace it with a deliberate solid fill.
   -------------------------------------------------------------------------- */

.button,
.button-large,
.content input[type="submit"],
.content input[type="button"],
.content button,
form input[type="submit"],
form button {
	display: inline-block;
	background: var(--accent);
	background-image: none;
	border: 0;
	border-radius: 0;
	color: var(--white);
	text-decoration: none;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.025em;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
	-webkit-appearance: none;
	appearance: none;
}

.button-large {
	font-size: 1.75em;
	height: 2em;
	line-height: 2em;
	padding: 0 1.25em;
	text-shadow: none;
}

.button,
form input[type="submit"],
form button,
.content button {
	font-size: 1em;
	line-height: 1;
	padding: 0.9em 1.75em;
}

.button:hover,
.button-large:hover,
form input[type="submit"]:hover,
form button:hover,
.content button:hover { background: var(--accent-dk); color: var(--white); }

.button:active,
.button-large:active,
form input[type="submit"]:active,
form button:active { background: #b01700; }

.button:focus-visible,
.button-large:focus-visible,
form input[type="submit"]:focus-visible,
form button:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; }

/* Secondary button - solid slate, still square. */
.button.button-alt,
form button.button-alt {
	background: var(--slate-600);
}
.button.button-alt:hover { background: var(--slate-700); }

/* --------------------------------------------------------------------------
   2. Form elements - solid fills, square edges. Halcyonic shipped no form
   styling at all beyond a reset, so this is authored to match the template.
   -------------------------------------------------------------------------- */

form { margin: 0 0 2em 0; }

.form-field { margin: 0 0 1.25em 0; }

form label,
.form-field label {
	display: block;
	color: var(--heading);
	font-weight: 400;
	font-size: 0.95em;
	margin: 0 0 0.5em 0;
	text-shadow: none;
}

form label .required { color: var(--accent); margin-left: 0.15em; }

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="search"],
form select,
form textarea {
	width: 100%;
	display: block;
	background: var(--white);
	border: 1px solid var(--line-dark);
	border-radius: 0;
	color: var(--body);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
	padding: 0.75em 0.85em;
	box-shadow: none;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

form textarea { min-height: 10em; resize: vertical; }

/* Native select needs its arrow back after appearance:none. */
form select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--body) 50%),
		linear-gradient(135deg, var(--body) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 12px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5em;
}

form input:focus,
form select:focus,
form textarea:focus {
	outline: 0;
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

form ::placeholder { color: var(--muted); opacity: 1; }

/* Checkboxes and radios - square, solid, accent when checked. */
form input[type="checkbox"],
form input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 1.15em;
	height: 1.15em;
	border: 1px solid var(--line-dark);
	border-radius: 0;
	background: var(--white);
	vertical-align: -0.15em;
	margin-right: 0.6em;
	cursor: pointer;
	position: relative;
}
form input[type="radio"] { border-radius: 50%; } /* radios stay round: they are a different affordance */

form input[type="checkbox"]:checked,
form input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }

form input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 0.32em; top: 0.1em;
	width: 0.3em; height: 0.6em;
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
form input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 0.4em; height: 0.4em;
	background: var(--white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

form .checkboxes label,
form .radios label { display: inline-block; margin-right: 1.25em; color: var(--body); }

/* Helper text, errors, honeypot. */
.form-description { display: block; color: var(--muted); font-size: 0.85em; margin-top: 0.4em; }
.form-message { color: var(--accent); font-size: 0.9em; margin: 0.4em 0 0 0; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
form .form-field-honeypot,
form input[name*="honeypot"] { position: absolute !important; left: -9999px !important; }

.buttons,
form .buttons { margin: 1.5em 0 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.75em; }
.buttons li { margin: 0; padding: 0; }

.form-reassurance { color: var(--muted); font-size: 0.85em; margin: 1em 0 0 0; }

/* Grav system + form messages - solid block, square, accent rule. */
.alert {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--slate-600);
	border-radius: 0;
	padding: 1em 1.25em;
	margin: 0 0 1em 0;
	color: var(--body);
}
.alert-error, .alert-danger { border-left-color: var(--accent); }
.alert-success { border-left-color: #2e7d32; }
.messages-band { padding: 25px 0 0 0; }

/* Forms sitting on a dark band invert to solid slate. */
.tone-dark { background: var(--slate-700) url("images/bg02.jpg"); border-bottom: 1px solid var(--slate-900); }
.tone-dark section { background: transparent; box-shadow: none; }
.tone-dark h2 { color: var(--white); }
.tone-dark h3, .tone-dark p, .tone-dark li { color: #a0a8ab; }
.tone-dark form label { color: var(--white); }
.tone-dark form input[type="text"],
.tone-dark form input[type="email"],
.tone-dark form input[type="tel"],
.tone-dark form select,
.tone-dark form textarea {
	background: var(--slate-800);
	border-color: var(--slate-500);
	color: var(--white);
}
.tone-dark form ::placeholder { color: var(--muted); }
.tone-dark .form-description { color: var(--muted); }

/* --------------------------------------------------------------------------
   3. Visual slots - where screenshots and video clips go.
   A slot renders as a labeled placeholder until real media is dropped in,
   so an unfilled spot is loud rather than silent.
   -------------------------------------------------------------------------- */

.visual-slot { display: block; margin: 0 0 1.5em 0; }
.visual-slot.is-filled .visual-image,
.visual-slot .visual-video { display: block; width: 100%; height: auto; border-radius: 0; }

.visual-caption {
	display: block;
	color: var(--muted);
	font-size: 0.85em;
	font-style: italic;
	margin-top: 0.6em;
}

.visual-slot.is-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px dashed var(--line-dark);
	border-radius: 0;
	background-color: var(--paper);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(84, 107, 118, 0.05) 0px,
		rgba(84, 107, 118, 0.05) 10px,
		transparent 10px,
		transparent 20px
	);
	padding: 2em 1.5em;
	text-shadow: none;
}

.visual-slot--wide.is-placeholder   { min-height: 340px; }
.visual-slot--inline.is-placeholder { min-height: 240px; }
.visual-slot--bordered.is-placeholder { min-height: 200px; }

.visual-slot-inner { max-width: 34em; }

.visual-kind {
	display: inline-block;
	background: var(--accent);
	color: var(--white);
	border-radius: 0;
	font-size: 0.7em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	margin: 0 0 0.9em 0;
}

.visual-id {
	display: block;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.95em;
	color: var(--heading);
	margin: 0 0 0.5em 0;
	word-break: break-word;
}

.visual-note { color: var(--body); font-size: 0.9em; line-height: 1.5; margin: 0; }

.visual-play {
	display: block;
	font-size: 2.5em;
	line-height: 1;
	color: var(--line-dark);
	margin-top: 0.4em;
}

/* Slots on the dark bands (banner sits inside #header, plus .features). */
#banner .visual-slot.is-placeholder,
.features .visual-slot.is-placeholder,
.tone-dark .visual-slot.is-placeholder {
	background-color: rgba(0, 0, 0, 0.18);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.05) 0px,
		rgba(255, 255, 255, 0.05) 10px,
		transparent 10px,
		transparent 20px
	);
	border-color: var(--slate-500);
}
#banner .visual-id,
.features .visual-id,
.tone-dark .visual-id { color: var(--white); }
#banner .visual-note,
.features .visual-note,
.tone-dark .visual-note { color: #a0a8ab; }

/* Halcyonic's bordered frame expects an <img>; keep the frame around real media. */
.visual-slot--bordered.is-filled .bordered-feature-image { display: block; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Module layout refinements
   -------------------------------------------------------------------------- */

.band-intro { margin: 0 0 1.5em 0; }
.band-intro h2 { margin-top: 0; }
.features .band-intro h2 { color: var(--white); }

.banner-subnote { font-size: 0.9em !important; color: #a0a8ab; margin-top: 1em !important; font-weight: 300 !important; }

/* Split: prose beside a media slot; .split--flipped reverses on desktop. */
.split .row.aln-middle { align-items: center; }
.split--flipped .split-copy-flipped   { order: 2; }
.split--flipped .split-visual-flipped { order: 1; }

/* Halcyonic wraps content in white cards via `.content section`; the split's
   visual column is not a card, so give it breathing room instead. */
.split .visual-slot { margin-bottom: 0; }
/* ...but a stacked `visual_stack` puts several in that column, and zeroing the
   margin leaves them sharing an edge. Space consecutive slots instead. */
.split .visual-slot + .visual-slot { margin-top: 1.5em; }

/* Check-list in columns for long capability inventories. */
.check-list--2col, .check-list--3col { column-gap: 2.5em; }
.check-list--2col li, .check-list--3col li { break-inside: avoid; }
@media screen and (min-width: 737px) {
	.check-list--2col { column-count: 2; }
	.check-list--3col { column-count: 2; }
}
@media screen and (min-width: 1281px) {
	.check-list--3col { column-count: 3; }
}

.checklist-band .check-list strong { color: var(--heading); }

/* Signup card is the conversion moment: give it a solid accent edge. */
.signup-card { border-top: 4px solid var(--accent); }
.tone-dark .signup-card { border-top-color: var(--accent); }

/* Active nav item. */
#header nav a.current { color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }

/* Home (non-subpage) keeps the tall header; subpages already handled upstream. */
.home #header > .container { min-height: 155px; }

@media screen and (max-width: 736px) {
	.visual-slot--wide.is-placeholder   { min-height: 220px; }
	.visual-slot--inline.is-placeholder { min-height: 180px; }
	.button-large { font-size: 1.25em; }
	.split--flipped .split-copy-flipped,
	.split--flipped .split-visual-flipped { order: 0; }
}

/* --------------------------------------------------------------------------
   5. Form plugin notices - solid block, square, color carried on one edge.
   The form plugin emits .notices with a status class (green/red/yellow).
   -------------------------------------------------------------------------- */

.notices {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--slate-600);
	border-radius: 0;
	padding: 1em 1.25em;
	margin: 0 0 1.5em 0;
	text-shadow: none;
}
.notices p { margin: 0; color: var(--body); }
.notices.green, .notices.success { border-left-color: #2e7d32; }
.notices.red, .notices.error     { border-left-color: var(--accent); }
.notices.yellow, .notices.warning { border-left-color: #b8860b; }

/* On a dark band the notice keeps the solid slate treatment. */
.tone-dark .notices { background: var(--slate-800); border-color: var(--slate-500); }
.tone-dark .notices p { color: #dfe5e7; }

/* #banner p is an id-scoped 2em rule; the placeholder note must opt out. */
#banner .visual-note,
.features .visual-note { font-size: 0.9em; line-height: 1.5; font-weight: 400; }
#banner .visual-slot-inner p { margin: 0; }

/* --------------------------------------------------------------------------
   6. Featured nav link (the live login for existing early adopters).
   The brand accent #ed391b only reaches 2.50:1 on the #3B4346 header, which
   fails even the large-text bar, so the nav uses a brightened tint of the same
   hue: #ff6b4a is 3.59:1. Nav links are 1.4em of 13.5pt = 25.2px, i.e. large
   text (3:1 applies). At the 980px breakpoint they drop to 1.1em (19.8px), so
   the bold weight keeps them in the large-text category there too.
   -------------------------------------------------------------------------- */

:root { --accent-bright: #ff6b4a; }

#header nav a.nav-highlight {
	color: var(--accent-bright);
	font-weight: 600;
}

#header nav a.nav-highlight:hover {
	color: #ff8a6b;
	text-decoration: underline;
}

#header nav a.nav-highlight:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

/* Same treatment in the mobile slide-out panel (built by navList in util.js,
   which is patched to carry the nav-highlight class through). */
#navPanel .link.nav-highlight {
	color: var(--accent-bright);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Equal-height column tiles.
   Halcyonic's .row is already flex with align-items: stretch, so the .col-*
   wrappers are equal height. The visible tile is the <section> INSIDE the
   column, which sizes to its own text and so ends up ragged. Make the column
   a flex container and let the tile fill it.

   The tile's own bottom margin is dropped because the grid gutter
   (.row > * padding-top) already spaces wrapped rows; keeping both would
   break the equal-height alignment when a row wraps.
   -------------------------------------------------------------------------- */

.features .row > *,
.boxes .row > * {
	display: flex;
}

.features .row > * > section,
.boxes .row > * > section {
	flex: 1 1 auto;
	width: 100%;
	margin-bottom: 0;
}

/* The intro paragraph above a band is a full-width row, not a tile. */
.features .row > .band-intro,
.boxes .row > .band-intro {
	display: block;
}

/* Long check-lists and quote-lists inside a tile should not force the tile
   taller than its neighbours' natural bottom padding. */
.boxes .row > * > section > ul:last-child,
.boxes .row > * > section > p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Hero refinements.
   -------------------------------------------------------------------------- */

/* bg01.jpg is a 200x600 top vignette whose last row is exactly #3B4346, the
   same flat color declared behind it. Halcyonic's own header never exceeds
   600px so it never tiled; ours does, which produced a visible seam. Repeating
   on x only lets the gradient fade into the flat color instead. */
#header { background-repeat: repeat-x; }

/* The audience line supports the main claim rather than competing with it,
   so it sits below #banner p's 2em. */
#banner .banner-focus {
	font-size: 1.3em;
	line-height: 1.45;
	font-weight: 300;
	color: #cdd4d7;
	margin: 0 0 1.25em 0;
	padding-right: 1em;
	max-width: 24em;
}

/* Give the hero media slot enough height to balance the copy column. */
#banner .visual-slot--bordered.is-placeholder { min-height: 300px; }

@media screen and (max-width: 736px) {
	#banner .banner-focus { font-size: 1.1em; }
	#banner .visual-slot--bordered.is-placeholder { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   9. Image lightbox. The page shows a scaled copy of each screenshot; this
   serves the original at full size over a dimmed backdrop. Square and solid,
   in keeping with the rest of the theme.
   -------------------------------------------------------------------------- */

.lightbox-link {
	display: block;
	cursor: zoom-in;
	border-bottom: 0;
}

.lightbox-link:hover .visual-image {
	opacity: 0.92;
}

#lightbox {
	position: fixed;
	inset: 0;
	/* Above Halcyonic's mobile chrome: #titleBar is 10001 and #navPanel 10002,
	   so at 9999 the fixed title bar covered the close button, which sits in
	   the same top-right corner. A modal overlay belongs above both. */
	z-index: 10010;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(39, 45, 48, 0.94);
}

#lightbox.is-open {
	display: flex;
}

#lightbox .lightbox-image {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	box-shadow: 0 0 0 1px var(--slate-500);
}

#lightbox .lightbox-close {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--accent);
	color: var(--white);
	border: 0;
	border-radius: 0;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.5em 0.75em;
	cursor: pointer;
}

#lightbox .lightbox-close:hover {
	background: var(--accent-dk);
}

#lightbox .lightbox-caption {
	position: absolute;
	left: 4vmin;
	right: 4vmin;
	bottom: 1.4vmin;
	text-align: center;
	color: var(--line-dark);
	font-size: 0.9rem;
}

/* A split's optional row of further visuals needs air between it and the
   two-column block above, which ends flush against it otherwise. */
.split .visual-row {
	margin-top: 2.5em;
}

/* --------------------------------------------------------------------------
   10. Downloads page. One block per component, each carrying its license and
   its links. Entries whose URL is not published yet say so plainly rather
   than rendering a dead anchor.
   -------------------------------------------------------------------------- */

.installer-note {
	border: 2px dashed var(--line-dark);
	background: var(--paper);
	padding: 1.5em 1.75em;
	margin: 0 0 2.5em 0;
}

.installer-note h2 {
	margin: 0 0 0.4em 0;
}

.installer-note p {
	margin: 0;
}

.installer-flag {
	display: inline-block;
	background: var(--accent);
	color: var(--white);
	font-size: 0.7em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	margin: 0 0 0.9em 0;
}

/* The theme only ever styled h1 as the header logo, since every section of the
   home page opens at h2. A standalone page needs a real page title. */
.content h1 {
	font-size: 2.4em;
	color: var(--heading);
	margin: 0 0 0.5em 0;
	line-height: 1.1;
}

.downloads-heading {
	margin-bottom: 1em;
}

/* .content h3 is the muted subheading gray, too quiet for the component names
   that are the point of this page. */
.download-id h3 {
	color: var(--heading);
	font-size: 1.4em;
}

/* Wide content scrolls inside its own box; the page itself never scrolls
   sideways. */
.table-scroll {
	overflow-x: auto;
	margin: 0 0 1em 0;
}

/* Fixed layout so the three group tables share column positions rather than
   each sizing itself to its own longest cell. */
.download-table {
	width: 100%;
	min-width: 44em;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
}

.download-table thead th:nth-child(1) { width: 18%; }
.download-table thead th:nth-child(2) { width: 36%; }
.download-table thead th:nth-child(3) { width: 15%; }
.download-table thead th:nth-child(4) { width:  9%; }
.download-table thead th:nth-child(5) { width: 22%; }

.download-table .col-lang {
	color: var(--body);
	font-size: 0.9em;
}

.download-table th,
.download-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.85em 1.1em 0.85em 0;
	border-bottom: 1px solid var(--line);
}

.download-table thead th {
	color: var(--muted);
	font-size: 0.75em;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line-dark);
	padding-bottom: 0.6em;
}

.download-table tbody th {
	color: var(--heading);
	font-weight: 400;
	padding-right: 1.6em;
}

.download-table td {
	color: var(--body);
}

.download-table .col-license {
	white-space: nowrap;
	color: var(--muted);
	font-size: 0.85em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Repository names are long and underscored, so let them break rather than
   push the table wider than its column. */
.download-table .col-source {
	overflow-wrap: anywhere;
}

.download-table .col-source a {
	font-size: 0.9em;
}

.download-pending {
	color: var(--muted);
	font-style: italic;
	font-size: 0.9em;
}

/* Halcyonic paints every link inside .content in the accent, and `.content a`
   outranks `.button`, so a button-styled anchor came out accent-on-accent with
   invisible text. Latent until a section used the templates' cta field.
   Both button sizes need it: `.button-large` was left out of the first fix and
   the report's download link came out unreadable until hover. */
.content a.button,
.content a.button:hover,
.content a.button:focus,
.content a.button:visited,
.content a.button-large,
.content a.button-large:hover,
.content a.button-large:focus,
.content a.button-large:visited {
	color: var(--white);
	text-decoration: none;
}

.images-note {
	border: 1px solid var(--line-dark);
	background: var(--white);
	padding: 1.5em 1.75em;
	margin: 0 0 2.5em 0;
}

.images-note h2 { margin: 0 0 0.4em 0; }
.images-note p  { margin: 0 0 1em 0; }
.images-note .button + .button { margin-left: 0.6em; }

.downloads-groupblurb {
	color: var(--body);
	margin: -0.4em 0 1.4em 0;
}

/* The repo path beside the button: useful for anyone cloning by hand, and it
   shows where the link goes without hovering. */
.download-repo {
	color: var(--body);
	font-size: 0.85em;
	background: var(--paper);
	padding: 0.35em 0.7em;
}

.downloads-foot {
	margin-top: 2.5em;
	color: var(--body);
}

/* Video poster: a still with a play control, standing in for the embed until
   the viewer asks for it. */
/* Scoped past `.content button`, which paints every button in the accent with
   padding and would otherwise frame the poster in orange. */
.content .video-poster,
.video-poster {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--slate-900);
	cursor: pointer;
	line-height: 0;
	letter-spacing: normal;
	text-transform: none;
}

.video-poster .visual-image { display: block; width: 100%; height: auto; }

.video-poster .video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.2em;
	height: 2.9em;
	background: var(--accent);
}

/* The triangle, drawn rather than an image so it takes the theme color. */
.video-poster .video-play:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 0.55em 0 0.55em 0.95em;
	border-color: transparent transparent transparent var(--white);
}

.video-poster:hover .video-play { background: var(--accent-dk); }
.video-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Playback fills the lightbox at 16:9 instead of a third of a column. */
#lightbox .lightbox-video {
	display: none;
	width: 100%;
	max-width: 78rem;
	aspect-ratio: 16 / 9;
	max-height: 88vh;
	background: #000;
}

#lightbox .lightbox-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --------------------------------------------------------------------------
   The research report: the above-the-fold teaser strip and the gate band.
   -------------------------------------------------------------------------- */

/* Hero strip. Sits under the product shot, in two columns of its own: the PDF
   cover, then the pitch. An anchor wrapping block children, so it lays out.

   On desktop it is simply the second child of the visual column, so it tucks
   straight under the shot. Below 980px that nesting is the problem: Halcyonic
   lifts the whole visual column above the copy (`imp-medium`, order: -1) and
   the strip is carried up with it, landing before the headline. Making the
   strip a sibling column instead does not work either, because a wrapped flex
   item starts below the *tallest* item on its line, which on desktop drops it
   far beneath the shot.

   `display: contents` dissolves the column's box at that breakpoint, so the
   shot and the strip become flex children of .row in their own right and can
   be ordered apart: shot first, strip after the primary CTA.

   It changes box generation, not selector matching, so the promoted children
   are still DOM children of the column and never match Halcyonic's `.row > *`
   gutter rule. The 20px has to go back by hand or they sit in the row's -20px
   negative margin and bleed past the container: as padding on the shot, but as
   a margin on the strip, whose own card padding must survive. 20px is the
   gutter at every breakpoint at or below 1280px, so one value covers the range
   this query spans. */
@media screen and (max-width: 980px) {
	.row > .banner-visual-col { display: contents; }

	#banner .banner-visual-col > .visual-slot {
		width: 100%;
		padding: 20px 0 0 20px;
		order: -1;
	}

	#banner .banner-visual-col > .banner-report {
		width: calc(100% - 20px);
		margin: 20px 0 0 20px;
		order: 1;
	}
}

/* A card carries its own alignment, and the hero copy centres below 736px. */
#banner .banner-report { text-align: left; }

#banner .banner-report {
	display: flex;
	align-items: flex-start;
	gap: 1.25em;
	margin: 1.5em 0 0 0;
	padding: 1.1em 1.25em;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid var(--slate-500);
	border-left: 4px solid var(--accent);
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#banner .banner-report:hover { background: rgba(0, 0, 0, 0.42); border-color: var(--muted); border-left-color: var(--accent); }
#banner .banner-report:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#banner .banner-report-cover { flex: 0 0 76px; line-height: 0; }
#banner .banner-report-image {
	width: 76px;
	height: auto;
	display: block;
	border: 1px solid var(--slate-500);
}

#banner .banner-report-copy { flex: 1 1 auto; display: block; min-width: 0; }

#banner .banner-report-eyebrow {
	display: block;
	font-size: 0.72em;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.5em 0;
}

#banner .banner-report-flag {
	display: inline-block;
	background: var(--accent);
	color: var(--white);
	padding: 0.15em 0.5em;
	margin-right: 0.7em;
	letter-spacing: 0.1em;
}

#banner .banner-report-title {
	display: block;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1.2em;
	line-height: 1.2;
	font-weight: 400;
	color: var(--white);
	margin: 0 0 0.35em 0;
}

#banner .banner-report-text {
	display: block;
	font-size: 0.85em;
	line-height: 1.5;
	font-weight: 300;
	color: #cdd4d7;
	margin: 0 0 0.55em 0;
}

#banner .banner-report-link {
	display: block;
	font-size: 0.85em;
	color: var(--accent);
}

#banner .banner-report:hover .banner-report-link { color: var(--white); }

@media screen and (max-width: 736px) {
	#banner .banner-report-cover { flex-basis: 60px; }
	#banner .banner-report-image { width: 60px; }
}

/* The gate band. */
.report-gate .report-cover { display: block; line-height: 0; }
.report-gate .report-cover-image {
	width: 100%;
	max-width: 340px;
	height: auto;
	display: block;
	border: 1px solid var(--slate-500);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.report-gate a.report-cover:hover .report-cover-image { border-color: var(--accent); }

.report-gate .report-eyebrow {
	font-size: 0.75em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.9em 0;
}

.report-gate h2 { margin-bottom: 0.15em; }
.report-gate h3 { font-size: 1.1em; font-weight: 300; margin: 0 0 0.6em 0; }

.report-gate .report-byline {
	font-size: 0.85em;
	color: var(--muted);
	margin: 0 0 1.5em 0;
	padding-bottom: 1.2em;
	border-bottom: 1px solid var(--slate-500);
}

.report-gate .report-inside {
	list-style: none;
	margin: 1.5em 0 2em 0;
	padding: 0;
}

.report-gate .report-inside li {
	position: relative;
	padding-left: 1.6em;
	margin: 0 0 0.8em 0;
	font-size: 0.95em;
	line-height: 1.55;
}

.report-gate .report-inside li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55em;
	height: 0.55em;
	background: var(--accent);
}

/* One field and one button: keep them on a line instead of stacked. */
.report-gate .report-form form { margin: 0; }
.report-gate .report-form .form-field { margin: 0; }
.report-gate .report-form .buttons { margin: 0; }

@media screen and (min-width: 737px) {
	.report-gate .report-form .form-wrapper > form { display: flex; align-items: flex-end; gap: 0.75em; flex-wrap: wrap; }
	.report-gate .report-form .form-wrapper > form > .form-field,
	.report-gate .report-form .form-wrapper > form > div:not(.buttons) { flex: 1 1 20em; }
	.report-gate .report-form input[type="email"] { width: 100%; }
	.report-gate .report-form .buttons button { white-space: nowrap; }
}

.report-gate .report-delivered {
	margin: 1.5em 0 0 0;
	padding: 1.4em 1.5em;
	background: rgba(0, 0, 0, 0.28);
	border-left: 4px solid var(--accent);
}

.report-gate .report-thanks {
	margin: 0 0 1em 0 !important;
	color: var(--white) !important;
	font-size: 1.05em;
}

.report-gate .report-delivered .button-large { font-size: 1.2em; }

.report-gate .report-meta {
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 1.2em 0 0 0;
}

.report-gate .form-reassurance { margin-top: 0.5em; }

@media screen and (max-width: 980px) {
	.report-gate .report-cover-image { max-width: 260px; margin: 0 auto 2em auto; }
}

/* ==========================================================================
   In-page anchors scroll rather than jump.
   ========================================================================== */

/* The nav is a list of anchors into one long page, and a jump gives the reader
   no idea whether they moved a section or ten. Scrolling shows the distance. */
html { scroll-behavior: smooth; }

/* Not for everyone. A full-page glide is exactly the motion this media query
   exists for, and the browser honours the OS setting whatever we prefer. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Below 980px #titleBar is position:fixed over the top 44px, so an anchor that
   scrolls to the section's true top puts its heading underneath the bar. The
   padding is on the SCROLLPORT, so it applies to the landing position only —
   it does not add space to the layout. Desktop has no fixed header and needs
   none. */
@media screen and (max-width: 980px) {
	html { scroll-padding-top: 44px; }
}

/* --------------------------------------------------------------------------
   Contact section: two forms behind tabs. Square edges and solid fills, so
   the active tab reads as a continuation of the panel rather than a pill.
   -------------------------------------------------------------------------- */

.contact-tabs .contact-card { border-top: 4px solid var(--accent); }

/* Scroll targets for #interest and #founding. Offset so a linked jump does not
   bury the heading under the fixed header. */
.contact-tabs .contact-anchor {
	display: block;
	position: relative;
	top: -120px;
	height: 0;
	visibility: hidden;
}

.contact-tabs .contact-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 2em 0 0 0;
	border-bottom: 1px solid var(--slate-500);
}

/* .content button is a broad rule in this theme and would paint these accent
   with button padding, so the tabs restate every property it sets. */
.contact-tabs .contact-tab,
.content .contact-tabs .contact-tab {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 0;
	color: var(--muted);
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1.15em;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
	padding: 0.7em 1.4em;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.contact-tabs .contact-tab:hover,
.content .contact-tabs .contact-tab:hover { background: rgba(0, 0, 0, 0.2); color: var(--white); }

.contact-tabs .contact-tab.is-active,
.content .contact-tabs .contact-tab.is-active {
	background: rgba(0, 0, 0, 0.28);
	border-color: var(--slate-500);
	border-bottom: 1px solid rgba(0, 0, 0, 0.28);
	border-top: 3px solid var(--accent);
	color: var(--white);
	padding-top: calc(0.7em - 2px);
}

.contact-tabs .contact-tab:focus-visible,
.content .contact-tabs .contact-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.contact-tabs .contact-panel {
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid var(--slate-500);
	border-top: 0;
	padding: 2em 2em 1.75em 2em;
}

.contact-tabs .contact-panel[hidden] { display: none; }

.contact-tabs .contact-panel-heading {
	font-size: 1.5em;
	font-weight: 400;
	color: var(--white);
	margin: 0 0 0.3em 0;
}

.contact-tabs .contact-panel-blurb { margin: 0 0 1.75em 0; }
.contact-tabs .contact-panel form { margin: 0; }
.contact-tabs .form-reassurance { margin-top: 1.25em; }

@media screen and (max-width: 736px) {
	/* Full-width stacked tabs: side by side they wrap mid-label at this size. */
	.contact-tabs .contact-tablist { display: block; border-bottom: 0; }

	.contact-tabs .contact-tab,
	.content .contact-tabs .contact-tab {
		display: block;
		width: 100%;
		text-align: left;
		margin: 0 0 1px 0;
		border: 1px solid var(--slate-500);
		border-left: 3px solid transparent;
	}

	.contact-tabs .contact-tab.is-active,
	.content .contact-tabs .contact-tab.is-active {
		border: 1px solid var(--slate-500);
		border-left: 3px solid var(--accent);
		border-top: 1px solid var(--slate-500);
		padding-top: 0.7em;
	}

	.contact-tabs .contact-panel { border-top: 1px solid var(--slate-500); padding: 1.5em 1.25em; }
}

/* The mobile title bar's brand is a link (see js/main.js); it should read as
   the bar's text, not as a themed anchor. */
#titleBar .title a,
#titleBar .title a:hover,
#titleBar .title a:focus {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Desktop sticky navigation. Suppressed at the top of the page — #header
   carries the brand and the same links there — then slid down and pinned to
   the top edge once #header has scrolled away (js/sticky-nav.js toggles
   .is-stuck). Solid slate, square, no gradient, in keeping with the rest of
   this layer.

   Type size matters here: the featured "Log in" link is --accent-bright,
   which is 3.94:1 on --slate-700. That clears the 3:1 large-text bar but not
   the 4.5:1 normal-text one. At 1.365em (24.6px) every link is past the 24px
   large-text threshold on its own, so the allowance holds without leaning on
   the highlight's 600 weight.
   -------------------------------------------------------------------------- */

#sticky-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Under #lightbox (10010), above the page. Halcyonic's mobile chrome sits
	   at 10001/10002 but never shares a width with this bar. */
	z-index: 9000;
	height: 58px;
	background: var(--slate-700);
	border-bottom: 1px solid var(--slate-900);
	box-shadow: 0 1px 4px rgba(39, 45, 48, 0.35);
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
	/* Hidden state: off-screen AND visibility:hidden, so the duplicated links
	   take no tab stops and stay out of the accessibility tree until shown. */
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.25s ease, visibility 0.25s;
}

#sticky-nav.is-stuck {
	visibility: visible;
	transform: translateY(0);
}

#sticky-nav > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	height: 100%;
}

.sticky-nav-brand {
	color: var(--white);
	text-decoration: none;
	font-size: 1.45em;
	font-weight: 400;
	white-space: nowrap;
}

.sticky-nav-brand:hover { color: var(--white); }

.sticky-nav-links {
	display: flex;
	align-items: center;
	gap: 2.25em;
	font-weight: 200;
}

.sticky-nav-links a {
	color: #c6c8c8;
	text-decoration: none;
	font-size: 1.365em;
	line-height: 1;
	outline: 0;
	white-space: nowrap;
}

.sticky-nav-links a:hover { color: #f6f8f8; }

.sticky-nav-links a.current {
	color: #fff;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 4px;
}

.sticky-nav-links a.nav-highlight {
	color: var(--accent-bright);
	font-weight: 600;
}

.sticky-nav-links a.nav-highlight:hover {
	color: #ff8a6b;
	text-decoration: underline;
}

.sticky-nav-links a:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

/* The bar is fixed over the top 58px once shown, so an anchor that scrolls to
   a section's true top would land its heading underneath. As with the mobile
   rule above, this padding is on the scrollport: it moves the landing position
   only and adds no space to the layout. */
@media screen and (min-width: 981px) {
	html { scroll-padding-top: 58px; }
}

/* Halcyonic hands the top edge to #titleBar below 980px; two bars there would
   fight for the same 44px. */
@media screen and (max-width: 980px) {
	#sticky-nav { display: none; }
}

/* The slide is decoration, not information — the bar's presence is the message
   and that still lands with no motion. */
@media (prefers-reduced-motion: reduce) {
	#sticky-nav { transition: none; }
}

/* Narrower desktops: close the gaps rather than shrink the type. Dropping the
   links below 24px would cost the highlight its large-text allowance and put
   it under the 4.5:1 bar, so only the spacing gives. */
@media screen and (max-width: 1280px) {
	#sticky-nav > .container { gap: 1.25em; }
	.sticky-nav-links { gap: 1.4em; }
	.sticky-nav-brand { font-size: 1.3em; }
}

/* --------------------------------------------------------------------------
   Reading size for body copy. Yanone Kaffeesatz is a condensed face: at
   Halcyonic's 13.5pt base its narrow counters and short x-height make prose
   read smaller than 18px suggests. Paragraph copy in the prose bands goes up
   50%, to 27px.

   Deliberately scoped to the prose bands rather than the base, so nav, logo,
   headings, buttons and the hero display line all keep the sizes they were
   already comfortable at. The component bands with their own type scale
   (.report-gate, .contact-tabs, .signup, the downloads page) are left alone
   for the same reason.

   .visual-note and .banner-subnote are small print sitting inside these same
   bands, so they opt out; .quote-list li p carries its own 1.2em at higher
   specificity and is untouched.
   -------------------------------------------------------------------------- */

.text-band p:not(.visual-note):not(.banner-subnote),
.split p:not(.visual-note):not(.banner-subnote),
.boxes p:not(.visual-note):not(.banner-subnote),
.checklist-band p:not(.visual-note):not(.banner-subnote),
.showcase p:not(.visual-note):not(.banner-subnote),
.features p:not(.visual-note):not(.banner-subnote),
.text-band .check-list li,
.split .check-list li,
.boxes .check-list li,
.checklist-band .check-list li,
.showcase .check-list li,
.features .check-list li {
	font-size: 1.5em;
}

/* Captions under the screenshots and clips. Raised with the copy, but held
   below it so the caption still reads as a label on the media rather than as
   another paragraph. */
.visual-caption {
	font-size: 1.275em;
}

/* The gated-download block reads the same way, so its prose and its
   "what's inside" list scale with the prose bands. Its labels — eyebrow,
   byline, meta, reassurance — are small print and stay as they were. */
.report-gate .report-body > p:not(.report-byline):not(.report-meta):not(.form-reassurance) {
	font-size: 1.5em;
}

.report-gate .report-inside li {
	font-size: 1.425em;
}

/* Headings have to clear the copy they sit above. At the old 18px body these
   were comfortably larger; against 27px prose, .content h3 (22.5px),
   .features h2 (22.5px) and .report-gate h3 (19.8px) all came out SMALLER
   than their own paragraphs, which reads as a caption rather than a heading.
   These lift each back above its copy. Halcyonic steps the content headings
   down at 1280px and 736px, which is not wanted now that the body copy holds
   one size across breakpoints — these unscoped rules come later in the
   cascade and so replace those steps at every width. */
.content h2      { font-size: 2em; }     /* 36px, over 27px body */
.content h3      { font-size: 1.6em; }   /* 28.8px subhead */
.features h2     { font-size: 1.7em; }   /* 30.6px card title */
.report-gate h3  { font-size: 1.6em; }