/* ---------------------------------------------------------------------------
 * THE GATED DOWNLOAD — a form that reveals a file when it is submitted.
 *
 * PORTABLE ON PURPOSE. Plain HTML, classes instead of the inline styles the
 * converted pages carry, and the only dependency is tokens.css. A growth
 * marketing page authored outside this repo — on ivijil.ai, say — pastes the
 * markup and links two stylesheets. Nothing else. The existing conversion forms
 * repeat a 180-character inline style on every input, which is why nobody
 * outside this repo can author one.
 *
 * It is a SOFT gate, and worth saying so plainly: the file's URL is in the page
 * source, so anyone who looks can skip the form. That is true of the Webflow
 * form-success block it replaces, and of every static-hosted gate — the friction
 * is the point, not secrecy. Do not put anything behind it that must not leak.
 *
 * The reveal is attribute-driven rather than display-driven. This repo has been
 * caught twice by the cascade here: `hidden` loses to an inline `display:grid`,
 * and clearing an inline display just hands control back to a class that says
 * none. An attribute selector cannot be beaten by either.
 * ------------------------------------------------------------------------- */
[data-gated]:not([data-open]) { display: none; }

/* The card. Lifted verbatim from the treatment /contact uses for its form —
 * surface, hairline, 16px radius, the soft lift — so a gated form reads as the
 * same object as every other form on the site. Here it is a class rather than
 * an inline style, which is the whole point: the card travels with the markup
 * instead of being something an author has to copy. */
.vj-gate {
  display: grid; gap: 16px; max-width: 560px;
  padding: 32px 34px;
  background: var(--vj-surface);
  border: 1px solid rgba(16, 24, 40, .12);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}
.vj-gate-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.vj-gate label {
  display: grid; gap: 6px;
  font: 500 13px Futura, 'Jost', Arial, sans-serif;
  letter-spacing: .04em; color: var(--vj-ink-label);
}
.vj-gate input,
.vj-gate textarea {
  font: 400 15px Futura, 'Jost', Arial, sans-serif;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(16, 24, 40, .22);
  background: var(--vj-surface); color: var(--vj-ink);
}
.vj-gate input:focus-visible,
.vj-gate textarea:focus-visible {
  outline: 2px solid var(--vj-brand); outline-offset: 1px;
}
.vj-gate [role="status"] {
  margin: 0; font: 400 15px Futura, 'Jost', Arial, sans-serif;
}
/* forms.js inserts the status line on load and fills it later, so before a
 * submission it is an empty paragraph reserving a blank line inside the card. */
.vj-gate [role="status"]:empty { display: none; }
.vj-gate-out {
  font: 400 17.5px Futura, 'Jost', Arial, sans-serif;
}
.vj-gate-out a { color: var(--vj-brand); text-underline-offset: 2px; }

@media (max-width: 560px) {
  .vj-gate-row { grid-template-columns: 1fr; }
  .vj-gate { padding: 24px 20px; }
}