/* HubSpot embedded-form theming, for pages rendered by MarketingLayout.astro.
 *
 * Lifted out of metomic.css, where these rules originated and where they still
 * live: metomic.css is loaded directly by 23 pages (not 3, as the ticket
 * estimated -- /, /platform/, /book-a-demo/, /about/, /guides/,
 * /security-center/, /register-a-deal/, /post-event-thank-you/,
 * /google-drive-risk-report/, /email-subscription-management/,
 * /integration/request-an-integration/, 4 /events/* and 8 /solution/*), all of
 * which are migrated later. So this is a COPY, not a move -- unlike
 * site-chrome.css, which could move the nav/footer rules out because every page
 * loads it. The duplicate is deliberate and temporary: delete these rules from
 * metomic.css only once all 23 of those pages are Astro-rendered.
 *
 * NOTHING LOADS THIS FILE YET. The tickets that link it are HubspotForm.astro
 * and MarketingLayout.astro; until one of them lands, adding this file cannot
 * change any rendered page.
 *
 * ONE INTERACTION TO KNOW ABOUT IF A PAGE EVER LOADS BOTH THIS AND metomic.css
 * (e.g. mid-migration on /book-a-demo/): the counter-reset below and
 * metomic.css's `.field label{font-weight:600}` are both 0,1,1, so whichever
 * stylesheet is linked second wins. Linked after metomic.css, as it would be,
 * this file takes the HubSpot error message from semibold to regular. That is
 * the whole of the overlap -- one property, on one element.
 *
 * The lifted section at the bottom is byte-identical to metomic.css line 492
 * and lines 494-579, less the 2-space indent that file carries throughout.
 * Verify with:
 *
 *   diff <(sed -n '492p;494,579p' metomic.css | sed 's/^  //') \
 *        <(sed -n '/^\/\* ==== BEGIN VERBATIM LIFT/,$p' hubspot-form.css | tail -n +4)
 *
 * Nothing there was reformatted or retyped, so that diff stays mechanical and a
 * real change can never hide as a whitespace change. The two blocks ABOVE the
 * lift are new, and are what makes the lift work outside metomic.css; each has
 * its own note explaining why it is not optional.
 *
 * WHAT IS DELIBERATELY NOT HERE -- metomic.css's `:root` block and its four
 * global rules (`*`, `html`, `body`, `h1`). Those fight the Webflow bundle that
 * every page loads: measured against the homepage, adding them moved h1 from
 * 72px to 54px and grew the page by 757px. site-chrome.css's own doc comment
 * records the same finding. This file exists precisely so a page can have the
 * HubSpot form styling WITHOUT that reset, which is why loading metomic.css
 * wholesale is not an option. Every selector in the lift was audited: 21 rules,
 * all led by a class, zero universal selectors, zero bare element selectors,
 * zero html/body/h1.
 *
 * ALSO NOT HERE, AND THIS ONE IS VISIBLE -- metomic.css's `.field` rules (its
 * lines 469-482). HubSpot's embed emits `field` in its field-wrapper class list
 * (`hs_email hs-email hs-fieldtype-text field hs-form-field`), so on the 23
 * pages that load metomic.css those rules reach the embed by accident and add a
 * `display:flex; gap:.4rem` on top of the margins the .hs-* rules already set,
 * plus `font-weight:600` on the error message. Measured: that makes today's form
 * ~50px taller over ~600px, and its error text semibold. They are not lifted
 * here, deliberately -- `.field` is an unscoped generic class that would collide
 * with any element named `field` on a migrated page, which is the same category
 * of hazard as the global reset, and no page in this repo actually uses
 * `class="field"` in its own markup (checked: zero), so the effect on the embed
 * is a side-effect of dead rules rather than intended design. Consequence: a
 * migrated form is ~8% shorter than /book-a-demo/'s and has regular-weight error
 * text. If exact parity is ever wanted, the fix is one rule --
 * `.form--hubspot .hs-form-field{display:flex;flex-direction:column;gap:.4rem}`
 * -- not a lift of `.field`.
 *
 * CONTRACT FOR CONSUMERS (HubspotForm.astro, MarketingLayout.astro): loading
 * this stylesheet is not sufficient on its own. Every rule is scoped under
 * `.form--hubspot` or `.demo-form-card` -- with one exception, the unscoped
 * `.hs-form-loading` placeholder rule, lifted as it stands -- so the embed
 * target must sit inside an element carrying one of those classes, or none of
 * this applies and the form renders as raw HubSpot default markup. Use
 * `.form--hubspot` -- it is the general-purpose wrapper already on 90 pages,
 * and the Webflow bundle only gives it `width/height:100%` plus a font-size and
 * font-weight, so nothing of its own fights these rules. `.demo-form-card`
 * additionally carries book-a-demo's card chrome (white background, shadow,
 * sticky position), which is NOT in this file, because metomic.css's own comment
 * is right that it is specific to that page's split layout and wrong glued onto
 * an arbitrary card elsewhere.
 *
 * UNITS ARE rem, AS LIFTED. metomic.css also sets html{font-size:16px} (18px
 * above 1919px, 15px below 991px); that rule is one of the four globals left
 * behind, so on an Astro page 1rem is the browser default instead. Between
 * 992px and 1918px the two agree exactly, which is where a side-by-side check
 * against /book-a-demo/ should be done. Outside that range the form tracks its
 * own page's root size rather than book-a-demo's -- the more correct of the two
 * behaviours, since the rest of a migrated page is sized off the Webflow bundle.
 * Converting to px (as site-chrome.css did, for a different reason: it is one
 * shared file across page families that disagree about the root size) would mean
 * retyping every value, and was rejected on those grounds.
 */

/* Design tokens, scoped -- NOT on :root.
 *
 * Same reason site-chrome.css scopes its own copy, and its comment says so: the
 * Webflow bundle defines --black (#181718) and --radius (4px) on :root, both
 * different from the values these rules were written against (#1a1a1a, 8px), so
 * declaring ours globally would silently repaint Webflow pages. It also defines
 * --purple, --orange-hover and --font-body nowhere at all, so without this block
 * the focus ring, the button hover and the form's entire font-family resolve to
 * nothing. Custom properties inherit, so scoping to the two wrappers reaches
 * every field inside a form and nothing outside one.
 *
 * Copied from metomic.css's :root -- only the 11 the lifted rules reference.
 * Keep in sync with it.
 */
.demo-form-card,
.form--hubspot{
  --black:#1a1a1a;
  --cream-light:#f7f7f7;
  --grey-light:#e5e3dd;
  --grey-mid:#8a8a8e;
  --grey-dark:#5c5c5c;
  --purple:#614ab3;
  --orange:#ff7e47;
  --orange-hover:#d5691b;
  --coral:#ff5e4e;
  --radius:8px;
  --font-body:'Inter',sans-serif;
}

/* Host-page counter-reset, scoped to the same two wrappers.
 *
 * The lifted rules were written against metomic.css, whose global `*` and `body`
 * rules quietly supplied margin:0, padding:0, font-weight:400, a colour and a
 * UNITLESS line-height to every element HubSpot's embed generates. Those globals
 * are exactly what must not come across, so on a page carrying the Webflow
 * bundle instead, HubSpot's markup picks up the bundle's element defaults -- and
 * they are not neutral. Measured against the bundle, this is the complete list
 * of its declarations that reach inside the form and change it:
 *
 *   body           { color:var(--neutral--700); line-height:120% }
 *   .form--hubspot { font-weight:500 }      <- renders every field's text semibold
 *   label          { margin-bottom:.75rem; font-weight:600; display:block }
 *   p              { font-size:1rem; line-height:1.5rem; margin-bottom:1rem }
 *   li             { margin-bottom:.5rem; padding-left:.5rem }
 *   ul, ol         { padding-left:2.5rem }
 *
 * Without this block the form renders semibold throughout, with 16px
 * legal-consent copy instead of 12px, and with stray indent and margin on every
 * checkbox and error row. site-chrome.css hit the same problem when it left the
 * same globals behind and solved it the same way -- see its "Chrome-scoped
 * reset" block.
 *
 * Enumerated rather than done with a scoped `*` so that, e.g., a <strong> in
 * HubSpot's consent rich-text still renders bold, as it does today. Every
 * selector here is 0,1,1 or lower, so every rule in the lift below outranks it.
 *
 * Left alone deliberately:
 *   - `*{box-sizing:border-box}` -- the bundle already sets it globally, exactly
 *     as metomic.css did, so nothing to restore.
 *   - `fieldset{border:0}` -- the bundle clears the UA fieldset border that
 *     metomic.css leaves VISIBLE around two-column rows on /book-a-demo/ today.
 *     Dropping a stray 2px groove border is an improvement, not a regression.
 *   - `label{display:block}` -- moves .hs-error-msg from inline to block, which
 *     drops the <li>'s 16px inline strut and so makes the error row and the
 *     consent row 3.6px shorter each. Measured, not assumed; forcing display
 *     back would be inventing a rule to chase 3.6px.
 */
.demo-form-card,
.form--hubspot{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--black);
  line-height:1.2;
}
.demo-form-card label,
.demo-form-card legend,
.demo-form-card p,
.demo-form-card ul,
.demo-form-card li,
.form--hubspot label,
.form--hubspot legend,
.form--hubspot p,
.form--hubspot ul,
.form--hubspot li{
  margin:0;
  padding:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}

/* ==== BEGIN VERBATIM LIFT -- metomic.css line 492 and lines 494-579 ====
 * Byte-for-byte below this line. Do not edit it here: edit metomic.css and
 * re-lift, or the diff command at the top of this file stops being a check. */
.hs-form-loading{font-size:.9375rem;color:var(--grey-mid);padding:1rem 0;}
/* HubSpot embed theming (scoped to the demo form card).
   Also scoped to .form--hubspot: the same demo-request form (formId
   bd97123a-e739-49c3-b2cf-a92e269973b2) is embedded on dozens of pages via
   that older Webflow-export wrapper, which has no field-level styling of
   its own -- only .demo-form-card ever did. Extending the selectors here
   is a CSS-only fix that reaches every one of those pages without editing
   each one's markup; container/box styling (background, shadow, sticky
   position) stays on .demo-form-card only, since that is specific to the
   book-a-demo split layout and would be wrong glued onto an arbitrary
   surrounding card elsewhere. */
.demo-form-card .hs-form,
.demo-form-card form.hs-form,
.form--hubspot .hs-form,
.form--hubspot form.hs-form{display:flex;flex-direction:column;gap:1rem;}
.demo-form-card .hs-form-field,
.form--hubspot .hs-form-field{margin:0;}
.demo-form-card .hs-form-field > label,
.form--hubspot .hs-form-field > label{
  display:block;font-size:.8125rem;font-weight:600;color:var(--black);margin-bottom:.4rem;
}
.demo-form-card .hs-form-field > label .hs-form-required,
.form--hubspot .hs-form-field > label .hs-form-required{color:var(--coral);margin-left:.15rem;}
.demo-form-card .hs-field-desc,
.form--hubspot .hs-field-desc{font-size:.75rem;color:var(--grey-mid);margin:.15rem 0 .35rem;}
.demo-form-card .hs-input:not([type=checkbox]):not([type=radio]),
.demo-form-card .hs-input select,
.demo-form-card select.hs-input,
.demo-form-card textarea.hs-input,
.form--hubspot .hs-input:not([type=checkbox]):not([type=radio]),
.form--hubspot .hs-input select,
.form--hubspot select.hs-input,
.form--hubspot textarea.hs-input{
  width:100%!important;box-sizing:border-box;
  font-family:var(--font-body);font-size:.9375rem;color:var(--black);
  padding:.75rem .85rem;border:1.5px solid var(--grey-light);border-radius:var(--radius);
  background:var(--cream-light);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.demo-form-card select.hs-input,
.form--hubspot select.hs-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235c5c5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem;
}
.demo-form-card .hs-input::placeholder,
.form--hubspot .hs-input::placeholder{color:var(--grey-mid);}
.demo-form-card .hs-input:focus,
.form--hubspot .hs-input:focus{
  outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(97,74,179,.12);
}
.demo-form-card .hs-input.invalid.error,.demo-form-card .hs-input.error,
.form--hubspot .hs-input.invalid.error,.form--hubspot .hs-input.error{border-color:var(--coral);}
.demo-form-card .hs-error-msgs,
.form--hubspot .hs-error-msgs{list-style:none;margin:.35rem 0 0;padding:0;}
.demo-form-card .hs-error-msg,.demo-form-card .hs-error-msgs label,
.form--hubspot .hs-error-msg,.form--hubspot .hs-error-msgs label{color:var(--coral);font-size:.8125rem;}
.demo-form-card .inputs-list,
.form--hubspot .inputs-list{list-style:none;margin:0;padding:0;}
.demo-form-card .hs-form-booleancheckbox-display,
.demo-form-card .hs-form-checkbox-display,
.form--hubspot .hs-form-booleancheckbox-display,
.form--hubspot .hs-form-checkbox-display{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;color:var(--grey-dark);line-height:1.5;}
.demo-form-card .legal-consent-container,
.form--hubspot .legal-consent-container{font-size:.75rem;line-height:1.5;color:var(--grey-mid);}
.demo-form-card .legal-consent-container p,
.form--hubspot .legal-consent-container p{margin-bottom:.5rem;}
.demo-form-card .hs-submit,
.form--hubspot .hs-submit{margin-top:.35rem;}
.demo-form-card .hs-button,
.demo-form-card input[type=submit].hs-button,
.form--hubspot .hs-button,
.form--hubspot input[type=submit].hs-button{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  padding:.875rem 1.75rem;border-radius:var(--radius);border:none;cursor:pointer;
  background:var(--orange);color:var(--black);
  transition:background .15s ease,color .15s ease;
}
.demo-form-card .hs-button:hover,
.demo-form-card input[type=submit].hs-button:hover,
.form--hubspot .hs-button:hover,
.form--hubspot input[type=submit].hs-button:hover{background:var(--orange-hover);color:#fff;}
/* HubSpot two-column rows (e.g. first/last name) fall back to single column for reliability */
.demo-form-card .hs-form fieldset,
.form--hubspot .hs-form fieldset{max-width:none!important;}
.demo-form-card .hs-form fieldset .hs-form-field,
.form--hubspot .hs-form fieldset .hs-form-field{width:100%!important;float:none!important;padding:0!important;}