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

.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;
}

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