/* ============================================================
   FRACS — THE PAD
   The claim box, styled as a notepad rather than a form: one big place
   to type the list, a red button, and nothing else until the list has
   been priced. Name and email appear only at the point of sending.
   Shared by index.html and lp/*.html. Layers on styles.css + home.css.
   ============================================================ */

/* THE HONEYPOT. `<p class="hp">` wraps the bot-field input on every claim
   form. It had markup and no style, anywhere in the site, so it rendered:
   a visible text input labelled "Leave this empty" as the first thing in
   the form. Anyone who obligingly typed in it had their submission thrown
   away by netlify-honeypot, silently.

   Offscreen rather than display:none — a trap that announces itself in the
   computed style is not a trap. The input itself already has tabindex="-1"
   and autocomplete="off", so nothing tabs into it and nothing fills it.
   Kept at the top of this file because it is a correctness rule, not part
   of the pad's look, and because the next person to add a claim form
   somewhere should see it before anything else. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.hm-how3{list-style:none;margin:0 auto 28px;padding:0;display:flex;justify-content:center;gap:10px 34px;flex-wrap:wrap;
  font-size:var(--fs-small);color:var(--body)}
.hm-how3 li{display:flex;align-items:center;gap:10px}
.hm-how3 b{font-family:var(--bomb);font-weight:400;color:var(--cream);background:var(--red-dark);width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-fine);flex:none}
.hm-pad-wrap{max-width:820px;margin:0 auto}

.hm-form--pad{padding:0;gap:0;background:var(--paper);box-shadow:10px 10px 0 var(--ink);overflow:visible}
.hm-form--pad .hd{padding:16px 22px;border-bottom:1.5px solid var(--ink);background:var(--cream-2);margin:0}
.hm-form--pad .hd span{font-family:var(--serif);font-size:var(--fs-lead);letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
.hm-form--pad .pad{display:block;margin:0;padding:0}
.hm-form--pad .pad textarea{border:0;background:
  repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 35px,var(--line) 36px);
  background-position:0 10px;line-height:36px;padding:8px 22px 14px;font-size:var(--fs-base);min-height:300px;resize:vertical;
  font-family:var(--sans);color:var(--ink)}
.hm-form--pad .pad textarea::placeholder{color:#8a7f6e}
.hm-form--pad .pad textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--red)}
.hm-form--pad .sc{padding:18px 22px 0}
.hm-form--pad .who{padding:18px 22px 0;border-top:1.5px solid var(--ink);background:var(--cream-2)}
.hm-form--pad .who-lab{margin:0 0 12px;font-family:var(--serif);font-size:var(--fs-lead);color:var(--ink)}
.hm-form--pad .who .row{grid-template-columns:1fr 1fr 1fr;padding-bottom:18px}
@media(max-width:700px){.hm-form--pad .who .row{grid-template-columns:1fr}}
.hm-form--pad .act{padding:18px 22px 22px;border-top:1.5px solid var(--ink);display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap}
.hm-form--pad .act button{margin:0;padding:18px 30px;flex:none}
.hm-form--pad .act .fine{flex:1;min-width:220px}
.hm-form--pad .err{padding:0 22px 18px}
.hm-form--pad .is-hid{display:none!important}
.hm-form--pad[data-state="scoped"] .hd span::after{content:" — priced";color:var(--red-dark);font-style:italic}