/* Mercuriosity — the email step on the interactive tools.
   Same visual language as the newsletter block, so the two read as one system.

   The gate now sits INSIDE each tool's result block rather than in front of the
   tool, so it reads as a closing section of the result and needs room above it
   instead of the tight 8px it used as a doorway. */

.tool-gate{
  max-width:560px;
  margin:8px auto 0;
  padding:30px 28px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--mc-quicksilver-400) 40%, transparent);
  background:color-mix(in srgb, var(--mc-violet-300) 7%, var(--mc-bg));
  text-align:left;
}

.tool-gate h3{
  font-family:var(--mc-font-display);font-size:21px;font-weight:500;
  letter-spacing:-0.014em;line-height:1.2;color:var(--mc-ink);margin:0 0 10px;
}

.tool-gate p.sub{
  font-size:14.5px;line-height:1.6;color:var(--mc-ink-muted);margin:0 0 20px;
}

.tool-gate form{display:flex;flex-direction:column;gap:12px}

.tool-gate label{
  font-size:12px;letter-spacing:0.04em;font-weight:500;color:var(--mc-ink-muted);
}

.tool-gate input[type=email]{
  width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--mc-quicksilver-400) 50%, transparent);
  background:var(--mc-bg);color:var(--mc-ink);font-size:15px;font-family:inherit;
  transition:border-color 180ms ease;
}
.tool-gate input[type=email]:focus{
  outline:none;border-color:var(--mc-violet-400);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mc-violet-300) 30%, transparent);
}

.tool-gate button{width:100%;justify-content:center;margin-top:4px}

.tool-gate .fineprint{
  font-size:12px;line-height:1.5;color:var(--mc-ink-quiet);margin:8px 0 0;
}

.tool-gate .gate-error{
  font-size:13px;line-height:1.5;color:var(--mc-ink-muted);margin:10px 0 0;
}

/* Placed after a result: give it air, and let it use the result's own width. */
#results .tool-gate,
.result .tool-gate{ margin:38px auto 0 }

/* After a successful subscribe the form is replaced by a single confirming
   line. Same box, so the result does not jump when it swaps. */
.tool-gate--done p.sub{ margin:0 }

@media print{ .tool-gate{display:none !important} }