/*
 * Mapp 2027: the GEMA page's HubSpot demo form (js/gema-2026-hubspot.js), styled like the design's form
 * (.form / .fgrid / .field in new-gema-v2/gema-landing-page.html, css/gema-2026.css). Hand-written, not generated.
 * The HubSpot embed is created with css:'' so these are the only styles on it.
 */
#book-demo .mpg-hs{min-width:0}
#book-demo .mpg-hs.mpg-is-loading{min-height:calc(24*var(--mp-rem))}
#book-demo .mpg-hs .hs-form{display:flex;flex-direction:column;gap:calc(1.375*var(--mp-rem));margin:0}

/* rows: two fields side by side (.fgrid), one column on phones; HubSpot's hidden tracking fields take no room */
#book-demo .mpg-hs .hs-form fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.375*var(--mp-rem)) calc(1*var(--mp-rem));max-width:none;min-width:0;margin:0;padding:0;border:0}
#book-demo .mpg-hs .hs-form fieldset.form-columns-1{grid-template-columns:minmax(0,1fr)}
#book-demo .mpg-hs .hs-form fieldset:not(:has(.hs-input:not([type="hidden"]), .legal-consent-container)){display:none}
#book-demo .mpg-hs .hs-form .hs-form-field{display:flex;flex-direction:column;gap:calc(0.5*var(--mp-rem));width:auto;min-width:0;float:none;margin:0;padding:0}
#book-demo .mpg-hs .hs-form .hs-form-field .input{margin:0}

/* labels (.field label) */
#book-demo .mpg-hs .hs-form .hs-form-field>label{display:block;margin:0;padding:0;font-family:"Mona Sans SemiBold";font-weight:400;font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:max(calc(1.25*var(--mp-rem)),20px);letter-spacing:normal;text-transform:none;color:#fff}
#book-demo .mpg-hs .hs-form .hs-form-required{margin-left:calc(0.25*var(--mp-rem));color:var(--mpg-p3)}

/* inputs and the select (.field input) */
#book-demo .mpg-hs .hs-form .hs-form-field .hs-input:is([type="text"],[type="email"],[type="tel"],[type="url"],[type="number"],select,textarea){
  display:block;width:100%;max-width:none;height:calc(3.25*var(--mp-rem));margin:0;padding:0 calc(1*var(--mp-rem));
  border:1px solid rgba(255,255,255,.22);border-radius:calc(0.75*var(--mp-rem));background-color:rgba(255,255,255,.06);box-shadow:none;color:#fff;
  font-family:"Mona Sans";font-weight:400;font-size:max(calc(1*var(--mp-rem)),14px);line-height:normal;letter-spacing:normal;text-transform:none;
  transition:border-color .2s,box-shadow .2s}
#book-demo .mpg-hs .hs-form .hs-form-field .hs-input::placeholder{color:rgba(255,255,255,.45);opacity:1}
#book-demo .mpg-hs .hs-form .hs-form-field .hs-input:focus{outline:none;border-color:var(--mpg-p3);box-shadow:0 0 0 calc(0.1875*var(--mp-rem)) rgba(188,172,248,.3)}
#book-demo .mpg-hs .hs-form .hs-form-field select.hs-input{appearance:none;-webkit-appearance:none;padding-right:calc(3*var(--mp-rem));cursor:pointer;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCACF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(1*var(--mp-rem)) center/calc(1.25*var(--mp-rem))}
#book-demo .mpg-hs .hs-form .hs-form-field select.hs-input.is-placeholder{color:rgba(255,255,255,.45)}
#book-demo .mpg-hs .hs-form .hs-form-field select.hs-input option{color:var(--mpg-navy);background:#fff}

/* the free text field (.field textarea) */
#book-demo .mpg-hs .hs-form .hs-form-field textarea.hs-input.hs-fieldtype-textarea{height:calc(6*var(--mp-rem));min-height:calc(3.25*var(--mp-rem));padding:calc(0.875*var(--mp-rem)) calc(1*var(--mp-rem));line-height:1.5;resize:vertical}

/* the website and category hints (.field .help) */
#book-demo .mpg-hs .mpg-help{margin:0;font-size:max(calc(0.75*var(--mp-rem)),12px);line-height:max(calc(1*var(--mp-rem)),16px);color:var(--mpg-p4);opacity:.85}
#book-demo .mpg-hs .hs-fieldtype-checkbox .mpg-help{margin-top:2px}

/* Main categories: the checkboxes as pills (.cats); "Select all that apply" in the label (.field legend .hint) */
#book-demo .mpg-hs .hs-fieldtype-checkbox>label .mpg-hint{margin-left:calc(0.5*var(--mp-rem));font-family:"Mona Sans";font-weight:400;font-size:max(calc(0.8125*var(--mp-rem)),12px);color:var(--mpg-p4)}
#book-demo .mpg-hs .hs-fieldtype-checkbox .inputs-list{display:flex;flex-wrap:wrap;gap:calc(0.5*var(--mp-rem));margin:calc(0.125*var(--mp-rem)) 0 0;padding:0;list-style:none}
#book-demo .mpg-hs .hs-fieldtype-checkbox .inputs-list li{margin:0;padding:0;list-style:none}
#book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display{position:relative;display:block;margin:0;cursor:pointer}
#book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display input.hs-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display span{display:inline-flex;margin:0;padding:calc(0.625*var(--mp-rem)) calc(1.25*var(--mp-rem));border-radius:calc(62.4375*var(--mp-rem));border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);color:#fff;
  font-family:"Mona Sans Medium";font-weight:400;font-size:max(calc(0.9375*var(--mp-rem)),14px);line-height:max(calc(1.25*var(--mp-rem)),18.6667px);transition:background-color .2s,border-color .2s,color .2s}
#book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display input:checked+span{background:#fff;border-color:#fff;color:var(--mpg-navy);font-family:"Mona Sans SemiBold"}
#book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display input:focus-visible+span{outline:2px solid var(--mpg-p3);outline-offset:calc(0.1875*var(--mp-rem))}

/* errors (.field .err, .field.invalid input) */
#book-demo .mpg-hs .hs-form .hs-form-field .hs-input.invalid.error{border-color:#FF87AF}
#book-demo .mpg-hs .hs-form .hs-error-msgs{margin:0;padding:0;list-style:none}
#book-demo .mpg-hs .hs-form .hs-error-msgs li{margin:0;padding:0;list-style:none}
#book-demo .mpg-hs .hs-form .hs-error-msgs label,#book-demo .mpg-hs .hs-form .hs_error_rollup label{display:block;margin:0;font-family:"Mona Sans";font-weight:400;font-size:max(calc(0.75*var(--mp-rem)),12px);line-height:max(calc(1*var(--mp-rem)),16px);color:#FFC7DA}
#book-demo .mpg-hs .hs-form .hs_error_rollup{text-align:center}
#book-demo .mpg-hs .hs-form .hs-field-desc:empty{display:none}

/* HubSpot's consent text and checkbox, in the design's privacy-note style (.form .priv) */
#book-demo .mpg-hs .legal-consent-container{display:flex;flex-direction:column;gap:calc(0.75*var(--mp-rem));margin:0;padding:0;font-family:"Mona Sans";font-size:max(calc(0.75*var(--mp-rem)),12px);line-height:max(calc(1*var(--mp-rem)),16px);color:var(--mpg-p4)}
#book-demo .mpg-hs .legal-consent-container :is(p,.hs-richtext){margin:0;font:inherit;color:inherit}
#book-demo .mpg-hs .legal-consent-container a{color:#fff;text-decoration:underline}
#book-demo .mpg-hs .legal-consent-container .hs-form-field{display:block}
#book-demo .mpg-hs .legal-consent-container .inputs-list{margin:0;padding:0;list-style:none}
#book-demo .mpg-hs .legal-consent-container li.hs-form-booleancheckbox{margin:0;padding:0;list-style:none}
#book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display{display:flex;align-items:center;gap:calc(0.75*var(--mp-rem));margin:0;cursor:pointer;font-family:"Mona Sans";font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:calc(1.375*var(--mp-rem));color:#fff}
#book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display>span{display:block;margin:0}
#book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input{appearance:none;-webkit-appearance:none;flex:none;float:none;display:block;width:calc(1.25*var(--mp-rem));height:calc(1.25*var(--mp-rem));margin:0;
  border:1.5px solid rgba(255,255,255,.4);border-radius:5px;background:rgba(255,255,255,.06) no-repeat center/calc(0.75*var(--mp-rem));cursor:pointer;transition:background-color .2s,border-color .2s}
#book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input:checked{background-color:var(--mpg-p2);border-color:var(--mpg-p2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%232B2449' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input:focus-visible{outline:2px solid var(--mpg-p3);outline-offset:2px}
#book-demo .mpg-hs .legal-consent-container .hs-field-desc:empty{display:none}

/* submit: the design's purple button (added by the script) replaces HubSpot's */
#book-demo .mpg-hs .hs-submit .actions{display:flex;flex-direction:column;margin:0;padding:0}
#book-demo .mpg-hs .hs-submit .actions:has(.mpg-btn) .hs-button{display:none}

/* sent: HubSpot's thank-you text (set in HubSpot) in place of the fields, like the design's .thanks */
#book-demo .mpg-hs .submitted-message{margin:0;font-family:"Mona Sans";font-size:max(calc(1.125*var(--mp-rem)),14px);line-height:max(calc(1.75*var(--mp-rem)),21.7778px);color:var(--mpg-p4)}
#book-demo .mpg-hs .submitted-message p{margin:0 0 calc(0.75*var(--mp-rem))}
#book-demo .mpg-hs .submitted-message :is(h1,h2,h3,strong){font-family:"Mona Sans SemiBold";font-weight:400;color:#fff}
#book-demo .mpg-hs .submitted-message:focus{outline:none}

/* HubSpot didn't load */
#book-demo .mpg-hs .mpg-hs-err{margin:0;font-size:max(calc(1*var(--mp-rem)),14px);line-height:calc(1.625*var(--mp-rem));color:var(--mpg-p4)}
#book-demo .mpg-hs .mpg-hs-err a{color:#fff;text-decoration:underline}

@media (min-width:900px) and (max-width:1099px){
  /* the design's tablet layout keeps a normal-width button rather than one spanning the card */
  #book-demo .mpg-hs .hs-submit .actions{align-items:flex-start}
}
@media (max-width:640px){
  #book-demo .mpg-hs .hs-form fieldset{grid-template-columns:minmax(0,1fr)}
  #book-demo .mpg-hs .mpg-help{font-size:calc(0.8125*var(--mp-rem));line-height:calc(1.125*var(--mp-rem))}
  /* four categories as an even 2 × 2 grid, so none is left alone on a row */
  #book-demo .mpg-hs .hs-fieldtype-checkbox .inputs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(0.5*var(--mp-rem))}
  #book-demo .mpg-hs .hs-fieldtype-checkbox .hs-form-checkbox-display span{display:flex;justify-content:center;padding:calc(0.625*var(--mp-rem)) calc(1*var(--mp-rem));font-size:calc(0.9375*var(--mp-rem))}
  #book-demo .mpg-hs .legal-consent-container .hs-form-booleancheckbox-display{align-items:flex-start}
}

/* no HubSpot consent yet: the consent box in the form's place (js/mapp-2027-hubspot.js, copy in #mp-hs-consent),
   in the card's glass style; "Accept" is the design's purple button */
#book-demo .mpg-hs .mp-hs-consent{display:flex;flex-direction:column;align-items:stretch;gap:calc(0.75*var(--mp-rem));margin:0;padding:calc(1.5*var(--mp-rem));
  border:1px solid rgba(255,255,255,.16);border-radius:calc(0.75*var(--mp-rem));background:rgba(255,255,255,.04)}
#book-demo .mpg-hs .mp-hs-consent-h{margin:0;font-family:"Mona Sans SemiBold";font-weight:400;font-size:calc(1.125*var(--mp-rem));line-height:calc(1.5*var(--mp-rem));color:#fff}
#book-demo .mpg-hs .mp-hs-consent-p{margin:0;font-family:"Mona Sans";font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:calc(1.375*var(--mp-rem));color:var(--mpg-p4)}
#book-demo .mpg-hs .mp-hs-consent-btns{display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--mp-rem));margin-top:calc(0.5*var(--mp-rem))}
#book-demo .mpg-hs .mp-hs-consent-more{margin:0;padding:0;border:0;background:none;cursor:pointer;font-family:"Mona Sans SemiBold";font-weight:400;font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:calc(1.375*var(--mp-rem));
  color:#fff;text-decoration:underline;text-underline-offset:3px}
#book-demo .mpg-hs .mp-hs-consent-more:hover{text-decoration-thickness:2px}
#book-demo .mpg-hs .mp-hs-consent :is(button):focus-visible{outline:2px solid var(--mpg-p3);outline-offset:3px}