/* fn-capture-block.css -- moment-of-value email capture, 2026-09-25 capture/rail build
   Brief: _FN_CAPTURE_TEARDOWN_AND_COPY_2026-09-25.md. Placed directly under a
   calculator's result, before any affiliate content or the weak generic
   "Get new calculators..." ask, on the pages that had no offer at all at
   that moment. Visual pattern matches the existing .gate-section card
   already live on llc-cost-calculator and business-startup-cost-calculator
   (static dark card, not theme-linked, same as those two pages), renamed
   fn-capture-* so it does not collide with either page's own local
   .gate-section rules when both are loaded on the same site.
   Button follows the established --ink-fixed-on-orange fix from
   fn-calc-rail.css (measured there: 7.05:1 light orange / 8.49:1 dark
   orange) since var(--orange) is theme-variable and this button sits atop
   it.

   Dark-mode-blend fix, 2026-09-25 (owner report, live on production: "the dark look
   just really blends in with each other"). The card was a literal #1A1A1A
   in both themes, matching the .gate-section pattern it was modeled on.
   That reads fine in light mode (16.98:1 against --paper) but in dark mode
   #1A1A1A sat almost exactly on --paper's #1C2430 -- 1.11:1, no visible
   card at all. Background, the accent border/eyebrow color, and the two
   status-message colors now come from the --capture-surface /
   --capture-accent / --capture-ok / --capture-error tokens added in
   fn-styles.css, which is what makes this a shared-stylesheet fix rather
   than a per-page one: light mode keeps the original literal values via
   those tokens, dark mode gets the new ones, and every page carrying
   fn-capture-block.css changes together. Heading and body copy are
   unchanged text, only the opacity/color values around them moved to hold
   4.5:1 against the new dark-mode surface -- see fn-styles.css for the
   full measured account. */
.fn-capture {
  background: var(--capture-surface, #1A1A1A);
  color: #FAF3E2;
  padding: 28px 32px;
  border-radius: 12px;
  margin: 28px 0;
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--capture-accent, var(--mustard));
}
.fn-capture::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 35px solid var(--capture-accent, var(--mustard));
  opacity: 0.15;
}
.fn-capture .fn-capture-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--capture-accent, var(--mustard));
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.fn-capture h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
  font-weight: 900;
  color: #FAF3E2;
  margin: 0 0 8px;
  position: relative;
  z-index: 2;
  line-height: 1.25;
}
.fn-capture > p {
  font-size: 14px;
  color: rgba(250, 243, 226, 0.9);
  margin: 0 0 18px;
  position: relative;
  z-index: 2;
  line-height: 1.5;
}
.fn-capture-form {
  position: relative;
  z-index: 2;
}
.fn-capture-form .fc-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fn-capture-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.08);
  color: #FAF3E2;
}
.fn-capture-form input::placeholder {
  color: rgba(250, 243, 226, 0.65);
}
.fn-capture-btn {
  display: inline-block;
  background: var(--orange);
  color: var(--ink-fixed, #1A1A1A);
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 2px 12px rgba(242, 139, 48, 0.35);
}
.fn-capture-btn:hover {
  background: #E07822;
  color: var(--ink-fixed, #1A1A1A);
  transform: translateY(-1px);
}
.fn-capture-consent {
  font-size: 11px;
  color: rgba(250, 243, 226, 0.85);
  margin-top: 10px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
.fn-capture-consent a {
  color: rgba(250, 243, 226, 0.9);
}
/* Suggest-a-calculator field, checkbox, and first-name field, 2026-09-25
   Suggest-a-calculator build. Structure and copy only -- every color below
   reuses a token already declared above in this file (same rgba(255,255,
   255,0.08/0.2) input surface, same rgba(250,243,226,*) text opacities),
   so this build does not touch the block's palette. */
.fn-capture-suggest {
  position: relative;
  z-index: 2;
  margin: 4px 0 12px;
}
.fn-capture-suggest-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(250, 243, 226, 0.85);
  margin-bottom: 6px;
}
.fn-capture-suggest-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.08);
  color: #FAF3E2;
  margin-bottom: 10px;
}
.fn-capture-suggest-input::placeholder {
  color: rgba(250, 243, 226, 0.45);
}
.fn-capture-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fn-capture-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(250, 243, 226, 0.8);
  font-weight: 500;
  cursor: pointer;
}
.fn-capture-checkbox-label input {
  margin: 0;
}
.fn-capture-name-input {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.08);
  color: #FAF3E2;
}
.fn-capture-name-input::placeholder {
  color: rgba(250, 243, 226, 0.45);
}
.fn-capture-terms-line {
  font-size: 11px;
  color: rgba(250, 243, 226, 0.5);
  margin: 0;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
.fn-capture-terms-line a {
  color: rgba(250, 243, 226, 0.75);
}
.fn-capture-msg {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  display: none;
  position: relative;
  z-index: 2;
}
.fn-capture-msg.show {
  display: block;
}
.fn-capture-msg.ok {
  color: var(--capture-ok, #A8E10C);
}
.fn-capture-msg.error {
  color: var(--capture-error, #FF6B5B);
}
@media (max-width: 600px) {
  .fn-capture {
    padding: 20px 18px;
  }
}