/* fn-request-hook.css -- "put your name on it" suggest-a-tool box, extracted
   verbatim (selectors and rules unchanged) from the homepage's own
   .request-box component so calculator pages can carry the identical
   hook byte for byte, moment-of-value capture/rail build 2026-09-25.
   Not linked from the homepage; the homepage keeps its own inline copy of
   these same rules unchanged. */
.request-box{
  background:var(--paper);border:2px solid var(--accent);
  border-radius:14px;padding:32px 28px;margin:44px 0 32px;
  position:relative;
}
.request-box::before{
  content:"New question? We listen.";
  position:absolute;top:-14px;left:24px;
  background:var(--accent);color:var(--ink);
  padding:5px 14px;font-size:11px;font-weight:800;
  letter-spacing:0.14em;text-transform:uppercase;
  border-radius:12px;
  font-family:"Inter",sans-serif;
}
.request-box h2{
  font-family:"Fraunces",Georgia,serif;
  color:var(--ink);font-size:26px;font-weight:800;
  letter-spacing:-0.01em;margin-bottom:8px;
  font-variation-settings:"SOFT" 40;
  border:none;padding:0;display:block;
}
.request-box > p{color:var(--ink-soft);font-size:15px;margin-bottom:18px;max-width:620px;}
.request-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px;margin-bottom:10px;
}
.request-form input{
  padding:14px 16px;
  border:1.5px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;
  background:var(--paper-soft);color:var(--ink);
}
.request-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow);}
.request-form input#request-problem{grid-column:1 / -1;}
.request-form input#request-email{grid-column:1 / 3;}
.request-consent-item{
  grid-column:1 / -1;display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;cursor:pointer;
}
.request-consent-item input{width:auto;padding:0;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent);}
.request-form button{
  background:var(--ink);color:var(--lime);
  border:none;padding:14px 22px;border-radius:10px;
  font-weight:800;font-size:14px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:background 0.15s;
}
.request-form button:hover{background:var(--accent);color:var(--ink);}
.request-privacy{
  font-size:13px;color:var(--ink-soft);margin:0 0 16px;
  line-height:1.55;max-width:640px;
}
.request-privacy strong{color:var(--ink);}
.request-thanks{
  display:none;padding:14px 16px;background:var(--lime);color:var(--ink);
  border-radius:8px;margin-bottom:14px;font-size:14px;
}
.request-thanks.show{display:block;}
.request-thanks.error{background:var(--coral);color:#fff;}
@media (max-width:680px){
  .request-form{grid-template-columns:1fr;}
  .request-form input#request-email,
  .request-form input#request-problem{grid-column:1 / -1;}
}
/* dark-mode-only override, found live measuring (Browser tab,
   getComputedStyle contrast check): var(--ink) resolves to a light cream
   in dark theme (#F2E9D8) and this button already sets background:
   var(--ink), so the homepage's own color:var(--lime) (#C4F02A) on that
   background measures ~1.1:1, far under the 4.5:1 floor. The homepage
   itself does not carry a dark-mode override for this button either (not
   this file's bug to fix there), so this rule is scoped to pages loading
   this shared file. A literal dark ink on the existing light background
   measures ~14:1 in this same dark theme. */
[data-theme="dark"] .request-form button{
  color:#1A1A1A;
}