.product-grid{margin:3rem 0}
.product-grid-lede{color:var(--muted,#5b6472);max-width:var(--measure,68ch)}
.product-grid-media{margin:0 0 1rem}
.product-grid-media img{width:100%;height:auto;border-radius:6px}
.product-grid-items{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));padding:0;border:0;margin:0}
.product-grid-variant{border:1px solid var(--rule,#d8dce4);border-radius:6px;padding:1.25rem}
.product-grid-variant h3{margin:0 0 .35rem}
.product-grid-price{font-size:1.4rem;font-weight:600;margin:0;color:var(--ink,#1a2744)}
.product-grid-setup,.product-grid-interval{color:var(--muted,#5b6472);font-size:.9rem}
.product-grid-features{margin:.75rem 0;padding-left:1.1rem}
.product-grid-unavailable{color:var(--muted,#5b6472);font-weight:600}
.product-grid-form .field{margin:.75rem 0;display:flex;flex-direction:column;gap:.3rem}
.product-grid-form label{font-weight:600}
.product-grid-form input,.product-grid-form select,.product-grid-form textarea{font:inherit;padding:.55rem;border:1px solid var(--rule,#d8dce4);border-radius:4px;background:transparent;color:inherit}
.product-grid summary{cursor:pointer;font-weight:600;color:var(--accent,#2d6a4f)}
.product-grid a,.product-grid button{color:var(--accent,#2d6a4f)}
.product-grid button{font:inherit;padding:.6rem 1.1rem;border:1px solid var(--accent,#2d6a4f);border-radius:4px;background:transparent;cursor:pointer}
.product-grid :focus-visible{outline:3px solid var(--focus,#2d6a4f);outline-offset:2px}
/* THE HONEYPOT, HIDDEN FROM EYES. `aria-hidden` and `inert` keep it away from
   assistive technology; only CSS keeps it away from a person, and the two are
   easy to get out of step -- the order form shipped for weeks with a visible
   "Website" field because `.order-form .hp` was missing from site.css while the
   other two were in it, and every order a customer filled it in on was silently
   dropped. The site-template-content job greps this exact string. */
.product-grid .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* THE TWO PLACED FORMS. One selector list rather than two rule blocks, because
   a contact form and a signup box that looked like different products of the
   same site would be exactly the "generated" tell the design standards refuse.
   The class .stagg-form is the one BOTH forms carry and the one the
   site-template-content honeypot loop greps, so a single rule covers both and
   there is no second spelling to fall out of step -- which is the failure that
   shipped a visible "Website" field on the order form for weeks. */
.stagg-enquiry,.stagg-signup{margin:3rem 0;max-width:var(--measure,68ch)}
.stagg-enquiry>h2,.stagg-signup>h2{margin:0 0 .35rem}
.stagg-form-lede{color:var(--muted,#5b6472);margin:0 0 1rem}
.stagg-form .field{margin:.85rem 0;display:flex;flex-direction:column;gap:.3rem}
.stagg-form label{font-weight:600}
.stagg-form .field-check label{font-weight:400;display:flex;gap:.55rem;align-items:flex-start}
.stagg-form input,.stagg-form textarea{font:inherit;padding:.55rem;border:1px solid var(--rule,#d8dce4);border-radius:4px;background:transparent;color:inherit}
.stagg-form .field-check input{padding:0;width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem}
.stagg-form button{font:inherit;padding:.6rem 1.1rem;border:1px solid var(--accent,#2d6a4f);border-radius:4px;background:transparent;color:var(--accent,#2d6a4f);cursor:pointer}
.stagg-form-terms{color:var(--muted,#5b6472);font-size:.9rem;margin:.85rem 0 0}
.stagg-form :focus-visible{outline:3px solid var(--focus,#2d6a4f);outline-offset:2px}
/* The same honeypot rule, for the same reason, over the class both forms
   carry. The aria-hidden and inert attributes keep it from assistive
   technology; only this keeps it from eyes. */
.stagg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}