/* Valor access gate — the unlock card + revealed downloads.
   Brand system: Sora (display), Public Sans (body), IBM Plex Mono (labels/code).
   Palette: navy #1C2C44, slate #233D6E, mint #7BC8AE, mint-deep #2E9B78, paper #F4F3EE,
   ember #C2563A. Light + dark aware. The button grammar matches the funnel lead form
   (slate pill that flips to a paper fill with a slate inset border + lift on hover) so the
   gate reads as a Valor control, not a default form button. */

.valor-gate {
	--vg-navy: #1C2C44;
	--vg-slate: #233D6E;
	--vg-mint: #7BC8AE;
	--vg-mint-deep: #2E9B78;
	--vg-paper: #F4F3EE;
	--vg-ember: #C2563A;
	--vg-ink: #232A33;
	--vg-gray: #5A6472;
	/* The theme's 'border' token. Added when the document treatment needed a hairline and was
	   reaching for a literal — a colour used outside the token block is the one that drifts. */
	--vg-border: #E3E1D8;
	--vg-line: #E3E1D8;
	--vg-card: #FFFFFF;
	margin: 20px 0;
	font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--vg-ink);
}

.valor-gate__lock {
	background: var(--vg-card);
	border: 1px solid var(--vg-line);
	border-radius: 16px;
	padding: 24px 26px;
	max-width: 560px;
	box-shadow: 0 1px 2px rgba(28, 44, 68, 0.06), 4px 4px 0 rgba(123, 200, 174, 0.14);
}

.valor-gate__title {
	margin: 0 0 6px;
	font-family: "Sora", "Public Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--vg-navy);
}

.valor-gate__intro {
	margin: 0 0 16px;
	color: var(--vg-gray);
	font-size: 14.5px;
	line-height: 1.55;
}

.valor-gate__fields { border: 0; margin: 0; padding: 0; }

.valor-gate__row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.valor-gate__row > input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 13px;
	border: 2px solid var(--vg-line);
	border-radius: 10px;
	font: inherit;
	font-size: 14.5px;
	color: var(--vg-navy);
	background: #fff;
	transition: border-color .15s cubic-bezier(.22, .61, .36, 1);
}

.valor-gate__row > input::placeholder { color: #A8ACB5; }

.valor-gate__row > input:focus {
	outline: none;
	border-color: var(--vg-slate);
}

/* #75: the post-attempt indicator — ember, cleared the moment the field is typed in. */
.valor-gate__row > input.is-missing,
.valor-gate__row > input.is-missing:focus {
	border-color: var(--vg-ember);
}

/* #74: the access code with its in-place copy control (the standard two-rectangles glyph). */
.valor-gate__codewrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.valor-gate__copy {
	border: 0;
	background: none;
	padding: 3px;
	border-radius: 6px;
	color: var(--vg-gray);
	cursor: pointer;
	line-height: 0;
}

.valor-gate__copy:hover,
.valor-gate__copy:focus-visible {
	color: var(--vg-mint-deep);
	background: rgba(123, 200, 174, 0.14);
}

.valor-gate__copy.is-done { color: var(--vg-mint-deep); }

.valor-gate__copy svg {
	width: 15px;
	height: 15px;
	display: block;
}

/* Honeypot — the wrapper is visually gone but stays in the DOM for bots. */
.valor-gate__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.valor-gate__btn {
	display: inline-block;
	background: var(--vg-slate);
	color: #fff;
	text-decoration: none;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	transition: all .15s cubic-bezier(.22, .61, .36, 1);
}

.valor-gate__btn:hover:not(:disabled) {
	background: #EDEAE2;
	box-shadow: inset 0 0 0 2px var(--vg-slate);
	color: var(--vg-slate);
	transform: translateY(-2px);
}

.valor-gate__btn:active { transform: translateY(0); }
.valor-gate__btn:disabled { opacity: .55; cursor: not-allowed; }
.valor-gate__btn:focus-visible { outline: 3px solid var(--vg-mint); outline-offset: 3px; }

.valor-gate__submit {
	width: 100%;
	margin-top: 4px;
}

.valor-gate__msg,
.valor-gate__codemsg {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	min-height: 1em;
	color: var(--vg-gray);
}

.valor-gate__msg.is-error,
.valor-gate__codemsg.is-error { color: var(--vg-ember); font-weight: 600; }
.valor-gate__msg.is-ok,
.valor-gate__codemsg.is-ok { color: var(--vg-mint-deep); font-weight: 600; }

.valor-gate__alt {
	margin: 14px 0 0;
	font-size: 14px;
}

.valor-gate__alt a {
	color: var(--vg-mint-deep);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--vg-mint);
}

.valor-gate__alt a:hover { border-bottom-color: var(--vg-mint-deep); }

.valor-gate__code {
	margin-top: 18px;
	border-top: 1px solid var(--vg-line);
	padding-top: 14px;
}

.valor-gate__code > summary {
	cursor: pointer;
	color: var(--vg-gray);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	list-style: none;
}

.valor-gate__code > summary::-webkit-details-marker { display: none; }
.valor-gate__code[open] > summary { margin-bottom: 12px; }

.valor-gate__code input[name="code"] {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Revealed downloads. */
.valor-gate__downloads[hidden] { display: none; }

.valor-gate__unlocked-note {
	margin: 0 0 8px;
	font-size: 13.5px;
	color: var(--vg-mint-deep);
	font-weight: 700;
}

.valor-gate__buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.valor-gate__code-shown {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--vg-gray);
}

.valor-gate__code-shown code {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	background: var(--vg-paper);
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--vg-navy);
}

@media (prefers-color-scheme: dark) {
	.valor-gate {
		--vg-line: #2C3340;
		--vg-card: #1B2028;
		--vg-ink: #E7EAEF;
		--vg-gray: #9AA3B0;
		--vg-paper: #232A33;
		/* On the dark card the reading navy would be invisible; remap the tokens that colour TEXT
		   to legible mint tints. --vg-slate is deliberately NOT remapped: it is the button fill, and
		   remapping it here turned every gate download button dark green in dark mode while the
		   comment above still claimed the button "keeps the slate fill". Slate is the brand's button
		   colour in both schemes. */
		--vg-navy: #CDE7DC;
	}
	.valor-gate__row > input { background: #232A33; color: #E7EAEF; border-color: #2C3340; }
	.valor-gate__row > input::placeholder { color: #7E8896; }
	.valor-gate__row > input:focus { border-color: var(--vg-mint); }
	.valor-gate__title { color: #CDE7DC; }
	.valor-gate__alt a { color: #9FE0C6; }
	.valor-gate__alt a:hover { border-bottom-color: #9FE0C6; }
	.valor-gate__code-shown code { background: #232A33; color: #CDE7DC; }
}

@media (prefers-reduced-motion: reduce) {
	.valor-gate__btn { transition: none; }
	.valor-gate__btn:hover:not(:disabled) { transform: none; }
}

/* ─────────────────────────── locked page body ───────────────────────────
   The scrambled body a visitor sees before unlocking. The blur is cosmetic only — the words
   underneath are already scrambled server-side, so nothing is being hidden by CSS alone. Kept
   light (3px) on purpose: the page must still read as a real document with real structure, which
   is what makes unlocking feel worth doing. */
.valor-locked { position: relative; }

.valor-locked__note {
	margin: 0 0 14px;
	font-weight: 700;
	color: #2E9B78;
}

/* Blur the TEXT elements rather than the container. A filter on a parent blurs its whole subtree,
   which is fine visually — but per-element is what lets the blur SCALE WITH TYPE SIZE, and that is
   the whole point here: blur illegibility is proportional to glyph size, so a 3px blur that makes
   16px body text unreadable leaves a 34px heading perfectly readable. Headings therefore get
   proportionally more, not an exemption. Nothing in the locked body is legible. */
.valor-locked__body {
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.valor-locked__body p,
.valor-locked__body li,
.valor-locked__body td,
.valor-locked__body th,
.valor-locked__body dd,
.valor-locked__body dt,
.valor-locked__body blockquote {
	filter: blur(3.4px);
	opacity: .55;
	transition: filter .5s cubic-bezier(.22,.61,.36,1), opacity .5s cubic-bezier(.22,.61,.36,1);
}

/* Roughly 0.2x the rendered font size, which is where a glyph stops resolving. */
.valor-locked__body h1 { filter: blur(9px);   opacity: .5; }
.valor-locked__body h2 { filter: blur(7px);   opacity: .5; }
.valor-locked__body h3 { filter: blur(5.5px); opacity: .5; }
.valor-locked__body h4 { filter: blur(4.5px); opacity: .52; }
.valor-locked__body h5,
.valor-locked__body h6 { filter: blur(4px);   opacity: .52; }
.valor-locked__body h1,
.valor-locked__body h2,
.valor-locked__body h3,
.valor-locked__body h4,
.valor-locked__body h5,
.valor-locked__body h6 {
	transition: filter .5s cubic-bezier(.22,.61,.36,1), opacity .5s cubic-bezier(.22,.61,.36,1);
}

/* The transmute: the swapped-in real text lands sharp, from slightly blurred, so the change reads
   as "this resolved" rather than as a flash of replaced content. */
.valor-locked__body.is-transmuting p,
.valor-locked__body.is-transmuting li,
.valor-locked__body.is-transmuting td,
.valor-locked__body.is-transmuting th,
.valor-locked__body.is-transmuting dd,
.valor-locked__body.is-transmuting dt,
.valor-locked__body.is-transmuting blockquote,
.valor-locked__body.is-transmuting h1,
.valor-locked__body.is-transmuting h2,
.valor-locked__body.is-transmuting h3,
.valor-locked__body.is-transmuting h4,
.valor-locked__body.is-transmuting h5,
.valor-locked__body.is-transmuting h6 {
	filter: blur(0);
	opacity: 1;
}
.valor-locked__body.is-transmuting,
.valor-locked.is-open .valor-locked__body {
	user-select: auto;
	-webkit-user-select: auto;
	pointer-events: auto;
}
.valor-locked.is-open .valor-locked__body * {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.valor-gate__btn { transition: none; }
	.valor-gate__btn:hover:not(:disabled) { transform: none; }
}

/* ─────────────────────────── locked page body ───────────────────────────
   The scrambled body a visitor sees before unlocking. The blur is cosmetic only — the words
   underneath are already scrambled server-side, so nothing is being hidden by CSS alone. Kept
   light (3px) on purpose: the page must still read as a real document with real structure, which
   is what makes unlocking feel worth doing. */
.valor-locked { position: relative; }

.valor-locked__note {
	margin: 0 0 14px;
	font-weight: 700;
	color: #2E9B78;
}

/* Blur the TEXT elements, not the container: a filter on a parent blurs its whole subtree, so a
   container blur would take the headings with it and there would be no way to exempt them. */
.valor-locked__body {
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.valor-locked__body p,
.valor-locked__body li,
.valor-locked__body td,
.valor-locked__body th,
.valor-locked__body dd,
.valor-locked__body dt,
.valor-locked__body blockquote {
	filter: blur(3.4px);
	opacity: .55;
	transition: filter .5s cubic-bezier(.22,.61,.36,1), opacity .5s cubic-bezier(.22,.61,.36,1);
}

/* Headings stay sharp and real. They are generic section names that give nothing away, and showing
   them is what makes the lock read as a deliberate preview rather than a broken page — scrambled
   text at heading size is simply large enough to be recognised as gibberish. */
.valor-locked__body h1,
.valor-locked__body h2,
.valor-locked__body h3,
.valor-locked__body h4,
.valor-locked__body h5,
.valor-locked__body h6 {
	opacity: .9;
}

/* The transmute: the swapped-in real text lands sharp, from slightly blurred, so the change reads
   as "this resolved" rather than as a flash of replaced content. */
.valor-locked__body.is-transmuting p,
.valor-locked__body.is-transmuting li,
.valor-locked__body.is-transmuting td,
.valor-locked__body.is-transmuting th,
.valor-locked__body.is-transmuting dd,
.valor-locked__body.is-transmuting dt,
.valor-locked__body.is-transmuting blockquote {
	filter: blur(0);
	opacity: 1;
}
.valor-locked__body.is-transmuting,
.valor-locked.is-open .valor-locked__body {
	user-select: auto;
	-webkit-user-select: auto;
	pointer-events: auto;
}
.valor-locked.is-open .valor-locked__body p,
.valor-locked.is-open .valor-locked__body li,
.valor-locked.is-open .valor-locked__body td,
.valor-locked.is-open .valor-locked__body th,
.valor-locked.is-open .valor-locked__body blockquote {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.valor-locked__body * { transition: none; }
}

/* ── Required marks, the copyable code, and error states (v1.115.0) ──────────────
   The required marks appear only AFTER a failed attempt. Marking a form up front
   decorates something nobody has failed yet; marking it after a mistake answers the
   question the person is actually asking, which is "what did I miss". */
.valor-gate__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; }
.valor-gate__lab { font-size: 12.5px; color: #5a6675; font-weight: 600; }
.valor-gate__lab em { font-style: normal; color: #c2563a; opacity: 0; transition: opacity .18s ease; }
.valor-gate.is-tried .valor-gate__lab em { opacity: 1; }
.valor-gate__opt { font-weight: 400; color: #8b8577; }

.valor-gate.is-tried input:invalid { border-color: #c2563a; background: #fdf7f4; }
.valor-gate__msg.is-error { color: #8a2c1c; }
.valor-gate__msg.is-ok { color: #1f6b52; }

.valor-gate__codeline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.valor-gate__codelabel { font-size: 12.5px; color: #5a6675; font-weight: 600; }
.valor-gate__codevalue { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
	letter-spacing: .04em; background: #fff; border: 1px solid #d9d6cd; border-radius: 8px; padding: 6px 12px; }
.valor-gate__copy { border: 1.5px solid #233D6E; background: #fff; color: #233D6E; border-radius: 999px;
	padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.valor-gate__copy:hover { background: #f3f6fb; }
.valor-gate__copy.is-done { border-color: #43C6A0; color: #1f6b52; }
.valor-gate__codehint { font-size: 12.5px; color: #5a6675; margin: 0; }

/* ─────────────────────── the UNLOCKED document ───────────────────────────
   These pages are read by a counterparty deciding whether to sign, and until now they were the
   plainest thing on the site: correct type, but no document to sit in — full-container measure for
   long legal prose, no rhythm between clauses, and fill-in blanks drawn with runs of underscores
   that a copy-paste carried along with the text.

   Everything below is scoped to `.is-open`, so the locked/scrambled state is untouched. */

.valor-locked.is-open {
	/* A READING MEASURE. Legal prose at full container width is the single biggest reason these
	   pages felt unfinished: the eye loses the line on the return sweep, and a clause that is hard
	   to track reads as a clause somebody is hiding something in. ~68 characters. */
	max-width: 42rem;
	/* LEFT, not centred, and this needs !important — which is worth explaining rather than hiding.
	   
	   A narrower block inside WordPress's constrained layout is centred by the theme's own
	   `.is-layout-constrained > :where(...)` rule, which ships with `margin-left: auto !important`.
	   That pushed the body 44px right of the H1 above it: the heading flush left and its own
	   document indented away from it. A more specific selector does NOT win against !important, and
	   this was measured in the page rather than reasoned about — margin-inline:0 changed nothing,
	   the same declaration with !important moved the block from 579px to 535px, exactly the H1's
	   left edge. Physical properties, because that is what the rule being overridden uses.
	   
	   A measure is about line length, not about position. */
	margin-left: 0 !important;
	margin-right: auto !important;
	color: var(--vg-ink);
}

.valor-locked.is-open > p,
.valor-locked.is-open > ul,
.valor-locked.is-open > ol {
	line-height: 1.65;
}

/* Clause headings earn space above and little below, so a heading belongs to what follows it
   rather than floating between two clauses. */
.valor-locked.is-open h2,
.valor-locked.is-open h3 {
	margin: 2.25rem 0 .6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vg-border);
	line-height: 1.25;
	text-wrap: balance;
}
.valor-locked.is-open h2:first-child,
.valor-locked.is-open h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* A FILL-IN BLANK IS A RULED LINE, not thirty underscores. Underscores wrap mid-run, sit on the
   baseline at the wrong weight, and are copied into anything pasted out of the page. */
.valor-doc__fill {
	display: inline-block;
	min-width: 14rem;
	max-width: 100%;
	border-bottom: 1px solid var(--vg-gray, #5A6472);
	/* Sit the rule where a written line would be, not on the text baseline. */
	transform: translateY(-.15em);
}

/* The party and signature rows: a label and its blank, held together. */
.valor-locked.is-open p > strong:first-child {
	color: var(--vg-navy);
}

/* PRINT. Somebody will print an NDA before signing it, and on paper the site chrome is noise and
   a page break through a signature block is a defect. */
@media print {
	.valor-locked.is-open {
		max-width: none;
		font-size: 11pt;
	}
	.valor-locked.is-open h2,
	.valor-locked.is-open h3 {
		break-after: avoid-page;
		page-break-after: avoid;
	}
	.valor-locked.is-open p,
	.valor-locked.is-open li {
		break-inside: avoid-page;
		page-break-inside: avoid;
	}
	.valor-gate,
	.valor-gate__downloads { display: none !important; }
}

@media (max-width: 40rem) {
	.valor-doc__fill { min-width: 8rem; }
}