/* :L17 */
html {
  position: relative;
  min-height: 100%;
}
/* :L22 */
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
/* :L27 */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}
/* :L36 */
.instanda-built-by-footer {
  text-align: center;
  position: absolute;
  bottom: 2px;
  width: 100%;
  font-size: 0.7em;
}
/* :L44 */
.instanda-documents {
  text-align: center;
}
/* :L48 */
.instanda-buttonList {
  margin-top: 20px;
}
/* :L52 */
.instanda-confirm-billing-address {
  margin-top: 20px;
  margin-bottom: 50px;
}
/* :L58 */
.instanda-container-fluid {
  background-color: #f4f4f4;
}
/* :L62 */
.instanda-questionHeader h3 {
  margin-bottom: 20px;
}
/* :L66 */
.instanda-side-content {
  position: absolute;
  top: 20px;
  min-height: 50px;
  padding: 10px;
  border: 1px solid lightgray;
  border-radius: 8px;
  background-color: white;
  width: 400px;
}
/* :L77 */
.instanda-main-content-container {
  position: relative;
}
/* :L81 */
.instanda-sort-code-input {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
/* :L87 */
#instanda-site-layout {
  padding-right: 0;
  padding-left: 0;
}
/* :L92 */
.instanda-choose-address-inner {
  border: 2px solid #eeeeee;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}
/* :L99 */
.instanda-choose-address-inner .instanda-choose-address-btn {
  margin-top: 10px;
}
/* :L103 */
.instanda-previously-selected {
  display: inline-block;
}
/*Approval action*/

/* :L108 */
.quote-referral-item h6 {
  color: #828990;
  font-weight: normal;
  margin: 15px 0 10px 0;
}
/* :L114 */
.mobile-quote-referral-heading,
.mobile-claim-heading {
  color: #828990;
  font-size: 12px;
  margin: 10px 0 0 0;
}
/*on confirmation screen*/

/* :L122 */
.send-policy-email-button {
  min-width: 250px;
}
/* Large desktops and laptops */

@media (min-width: 1800px) {
  /* :L128 */
  .instanda-side-content {
    left: 59.5%;
  }
}
/* Large desktops and laptops */

@media (min-width: 1600px) and (max-width: 1799px) {
  /* :L135 */
  .instanda-side-content {
    left: 61%;
  }
}
/* Large desktops and laptops */

@media (min-width: 1400px) and (max-width: 1599px) {
  /* :L142 */
  .instanda-side-content {
    left: 63%;
  }
}
/* Large desktops and laptops */

@media (min-width: 1200px) and (max-width: 1399px) {
  /* :L149 */
  .instanda-side-content {
    left: 65%;
  }
}
@media (min-width: 1098px) and (max-width: 1199px) {
  /* :L155 */
  .instanda-side-content {
    left: 57.1%;
  }
}
/* Portrait tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1099px) {
  /* :L162 */
  .instanda-side-content {
    left: 57.1%;
  }
}
/* Portrait tablets and small desktops */

@media (min-width: 768px) and (max-width: 991px) {
  /* :L169 */
  .instanda-side-content {
    left: 58%;
    width: 300px;
  }
}
/* Landscape phones and portrait tablets */

@media (max-width: 767px) {
  /*View quote or policy page action buttons*/
  
  /* :L180 */
  .btn-group > .btn {
    width: 50%;
    margin: 0 auto 3px auto;
  }
  /* :L185 */
  .btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle):nth-of-type(odd) {
    border-radius: 4px 0 0 4px;
  }
  /* :L189 */
  .btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle):nth-of-type(even) {
    border-radius: 0 4px 4px 0;
  }
  /* :L193 */
  .quote-referral-item ~ .quote-referral-item,
  .claim-referral-item ~ .claim-referral-item,
  .claim-item ~ .claim-item {
    border-top: 1px solid #e7e7e7;
    padding-top: 5px;
    margin-top: 15px;
  }
}
/* Landscape phones and smaller */

@media (max-width: 480px) {
  /* :L204 */
  .instanda-question-help-col {
    padding-left: 0;
    padding-right: 0;
  }
}
/*Car brands & models question*/

/* :L212 */
.car-models-wrapper,
.car-brands-wrapper {
  overflow-y: auto;
  max-height: 250px;
  margin-bottom: 10px;
}
/* :L219 */
.car-brands-wrapper ul.list-group,
.car-models-wrapper ul.list-group {
  margin-bottom: 0;
}
/* :L224 */
.selected-model,
.selected-brand {
  color: white;
  background-color: #337ab7;
  border-color: #2e6da4;
}
/* :L231 */
.car-brands-and-models-summary.well > div {
  margin-bottom: 5px;
}
/* :L235 */
button.car-brands-and-models-show-summary {
  margin-bottom: 10px;
}
/* :L239 */
.car-brands.list-group > li:first-child,
.car-models.list-group > li:first-child {
  display: none;
}
/* :L243 */
.car-models-wrapper,
.car-brands-wrapper {
  display: none;
}
/* :L247 */
.warning-message-payment {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000000;
  width: 100%;
  text-align: center;
  background-color: #efdccf;
  font-weight: bold;
  padding: 25px;
}
/* :L260 */
.alert-autosave {
  color: black;
  background-color: #ffbe46;
  border-color: orange;
}


/* =========================================================================
   Coplus sales homepage — content stylesheet
   Brand: AncillaryHUB visual system (Navy / Gold / Teal / Slate), Arial only.
   Namespaced entirely under .general-container — never bare :root — so
   nothing here can leak into or collide with the host Instanda page.
   ========================================================================= */

/* :L24 */
.general-container {
  /* ---- literal palette ---- */
  --ah-navy: #1b2c6b;
  --ah-navy-deep: #12224f;
  --ah-gold: #f4a820;
  --ah-teal: #0d7c8f;
  --ah-slate: #3c476b;
  --ah-slate-light: #5c688c;
  --ah-white: white;
  --ah-mist: #edf0f6;
  --ah-mist-deep: #e4e8f1;
  --ah-ink-grey: #44546a;
  --ah-error: #c0392b;
  /* ---- semantic aliases — components below reference these, not hex ---- */
  --ah-color-primary: var(--ah-navy);
  --ah-color-signal: var(--ah-gold);
  --ah-color-accent: var(--ah-teal);
  --ah-color-heading: var(--ah-slate);
  --ah-color-muted: var(--ah-slate-light);
  --ah-surface-page: var(--ah-mist);
  --ah-surface-card: var(--ah-white);
  --ah-surface-card-alt: var(--ah-mist-deep);
  --ah-text-body: var(--ah-ink-grey);
  --ah-text-on-dark: var(--ah-white);
  --ah-text-on-dark-muted: var(--ah-slate-light);
  /* ---- spacing / radius / elevation ---- */
  --ah-space-1: 4px;
  --ah-space-2: 8px;
  --ah-space-3: 16px;
  --ah-space-4: 24px;
  --ah-space-5: 32px;
  --ah-space-6: 48px;
  --ah-space-7: 64px;
  --ah-radius-card: 12px;
  --ah-radius-pill: 999px;
  --ah-shadow-card: 0 2px 8px rgba(27, 44, 107, 0.08);
  --ah-content-max: 1080px;
  /* ---- type ---- */
  --ah-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ah-fs-stat: 44px;
  --ah-fs-title: 30px;
  --ah-fs-section: 17px;
  --ah-fs-body: 14px;
  --ah-fs-caption: 11px;
  --ah-track-caption: 0.1em;
  --ah-fw-bold: 700;
  font-family: var(--ah-font);
  color: var(--ah-text-body);
  background: var(--ah-surface-page);
  padding-top: var(--ah-space-5);
  padding-bottom: var(--ah-space-5);
}
/* :L76 */
.general-container * {
  box-sizing: border-box;
}
/* :L77 */
.general-container img {
  max-width: none;
}
/* :L79 */
.general-container a {
  color: inherit;
}
/* Instanda's own fluid layout wrapper — grid/width left alone (see product.css
   convention), just strip the platform's default background so our page
   surface (--ah-surface-page) shows through instead. */

/* :L84 */
.general-container .instanda-container-fluid {
  background-color: unset !important;
}
/* content width helper — leaves the host's own .container/.row grid alone */

/* :L89 */
.hp-root .hp-inner {
  max-width: var(--ah-content-max);
  margin: 0 auto;
  padding: 0 24px;
}
/* =========================================================================
   Buttons
   ========================================================================= */

/* :L98 */
.hp-root .hp-btn {
  display: inline-block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  padding: 13px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  text-align: center;
}
/* :L111 */
.hp-root .hp-btn--primary {
  background: var(--ah-color-signal);
  color: var(--ah-color-primary);
}
/* :L112 */
.hp-root .hp-btn--secondary {
  background: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L113 */
.hp-root .hp-btn--tertiary {
  background: transparent;
  color: var(--ah-color-primary);
  border: 1.5px solid var(--ah-color-primary);
  padding: 11.5px 24px;
}
/* :L119 */
.hp-root .hp-btn--primary:hover {
  background: #e39a0f;
}
/* :L120 */
.hp-root .hp-btn--secondary:hover {
  background: #142253;
}
/* :L121 */
.hp-root .hp-btn--tertiary:hover {
  background: rgba(27, 44, 107, 0.06);
}
/* =========================================================================
   01 · Hero / news carousel — flat Navy, no baked-in pattern or photo
   ========================================================================= */

/* :L126 */
.hp-root .hp-hero {
  padding: 0 24px;
}
/* :L128 */
.hp-root .hp-hero__carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ah-radius-card);
  background: var(--ah-color-primary);
  max-width: var(--ah-content-max);
  margin: 0 auto;
  height: 400px;
}
/* :L137 */
.hp-root .hp-hero__inner,
.hp-root .hp-hero__inner .item {
  height: 400px;
}
/* :L140 */
.hp-root .hp-hero__slide {
  height: 400px;
  display: flex;
  align-items: center;
}
/* :L145 */
.hp-root .hp-hero__content {
  width: 100%;
  padding: 0 64px;
}
/* :L149 */
.hp-root .hp-hero__eyebrow {
  display: inline-block;
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-signal);
}
/* :L157 */
.hp-root .hp-hero__title {
  margin: 14px 0 0;
  font-size: 34px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* :L165 */
.hp-root .hp-hero__body {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ah-mist);
  max-width: none;
}
/* :L172 */
.hp-root .hp-hero__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: var(--ah-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(27, 44, 107, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  text-shadow: none;
}
/* :L187 */
.hp-root .hp-hero__control:hover,
.hp-root .hp-hero__control:focus {
  opacity: 1;
  background: rgba(27, 44, 107, 0.6);
}
/* Compound selectors here deliberately: Bootstrap 3 ships
   `.carousel-control.left { left: 0; }` and
   `.carousel-control.right { right: 0; left: auto; }` as compound
   (two-class) selectors, which outrank a single-class rule regardless
   of stylesheet order. Matching that specificity is what makes our
   16px offset actually win instead of Bootstrap's flush-to-edge 0. */

/* :L196 */
.hp-root .hp-hero__carousel .hp-hero__control.hp-hero__control--prev {
  left: 16px;
  right: auto;
}
/* :L197 */
.hp-root .hp-hero__carousel .hp-hero__control.hp-hero__control--next {
  right: 16px;
  left: auto;
}
/* chevron-white.png points down by default — rotate it left/right so the
   same shared asset serves both controls (no duplicate icon files). */

/* :L201 */
.hp-root .hp-hero__control-icon {
  width: 14px;
  height: 14px;
}
/* :L202 */
.hp-root .hp-hero__control--prev .hp-hero__control-icon {
  transform: rotate(90deg);
}
/* :L203 */
.hp-root .hp-hero__control--next .hp-hero__control-icon {
  transform: rotate(-90deg);
}
/* :L205 */
.hp-root .hp-hero__indicators {
  position: absolute;
  bottom: 22px;
  left: 64px;
  margin: 0;
  display: flex;
  gap: 8px;
  width: auto;
}
/* :L214 */
.hp-root .hp-hero__indicators li {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: var(--ah-radius-pill);
  background: rgba(255, 255, 255, 0.35);
  border: none;
  text-indent: 0;
  transition: width .3s ease, background .3s ease;
}
/* :L224 */
.hp-root .hp-hero__indicators li.active {
  width: 24px;
  height: 8px;
  background: var(--ah-color-signal);
}
/* =========================================================================
   02 · Featured product spotlight — the one Gold moment besides hero CTAs
   -------------------------------------------------------------------------
   Updated to match AncillaryHUB_CSS_Guidelines.html's "08 · Spotlight"
   spec: deliberately light, not a second hero — the hero owns the dark
   Navy field, the spotlight inverts it. Mist Deep surround (.hp-spotlight)
   holding a white inner card (.hp-spotlight__inner, added to Home/html's
   markup to match this nesting), Navy heading/body copy, Teal glyph on a
   Mist plate with no Gold border. Gold appears exactly once, as the
   eyebrow chip; the CTA is solid Navy (.hp-btn--secondary, swapped from
   the previous .hp-btn--primary in the markup) so no Gold button competes
   with the hero's.
   ========================================================================= */

/* :L243 */
.hp-root .hp-spotlight-section {
  padding: var(--ah-space-6) 24px 0;
}
/* :L245 */
.hp-root .hp-spotlight {
  max-width: var(--ah-content-max);
  margin: 0 auto;
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  padding: var(--ah-space-4);
}
/* :L252 */
.hp-root .hp-spotlight__inner {
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: 0 2px 10px rgba(27, 44, 107, 0.1);
  padding: 32px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
/* :L262 */
.hp-root .hp-spotlight__plate {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: none;
  background: var(--ah-surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* :L273 */
.hp-root .hp-spotlight__icon {
  width: 34px;
  height: 34px;
  display: block;
}
/* :L274 */
.hp-root .hp-spotlight__content {
  flex: 1;
  min-width: 260px;
}
/* :L275 */
.hp-root .hp-spotlight__eyebrow {
  display: inline-block;
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-primary);
  background: var(--ah-color-signal);
  padding: 5px 12px;
  border-radius: var(--ah-radius-pill);
}
/* :L286 */
.hp-root .hp-spotlight__category {
  margin-left: 10px;
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-muted);
}
/* :L294 */
.hp-root .hp-spotlight__title {
  margin: 14px 0 0;
  font-size: 24px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  line-height: 1.15;
}
/* :L301 */
.hp-root .hp-spotlight__body {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ah-text-body);
  max-width: 520px;
}
/* :L308 */
.hp-root .hp-spotlight__cta {
  flex-shrink: 0;
}
/* =========================================================================
   03–09 · Product directory — search, chips, count, responsive grid
   ========================================================================= */

/* :L313 */
.hp-root .hp-directory {
  padding: var(--ah-space-6) 24px var(--ah-space-3);
}
/* :L314 */
.hp-root .hp-directory__inner {
  max-width: var(--ah-content-max);
  margin: 0 auto;
}
/* :L316 */
.hp-root .hp-directory__eyebrow {
  display: block;
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-signal);
}
/* :L324 */
.hp-root .hp-directory__title {
  margin: 6px 0 0;
  font-size: var(--ah-fs-title);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  letter-spacing: -0.01em;
}
/* :L332 */
.hp-root .hp-directory__controls {
  margin-top: var(--ah-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ah-space-3);
  align-items: flex-start;
  justify-content: space-between;
}
/* search field — fixed 50px, Slate resting border, Navy on hover/focus */

/* :L342 */
.hp-root .hp-search {
  position: relative;
  width: 100%;
  max-width: 360px;
}
/* :L343 */
.hp-root .hp-search__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
/* :L352 */
.hp-root .hp-search__input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px 0 42px;
  outline: none;
}
/* :L365 */
.hp-root .hp-search__input::placeholder {
  color: var(--ah-color-muted);
}
/* :L366 */
.hp-root .hp-search__input:hover {
  border-color: var(--ah-color-primary);
}
/* :L367 */
.hp-root .hp-search__input:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* category chips */

/* :L373 */
.hp-root .hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* :L374 */
.hp-root .hp-chip {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 9px 16px;
  border-radius: var(--ah-radius-pill);
  cursor: pointer;
  background: var(--ah-surface-card);
  color: var(--ah-color-primary);
  border: 1.5px solid var(--ah-color-primary);
  white-space: nowrap;
}
/* :L387 */
.hp-root .hp-chip:hover {
  background: var(--ah-mist);
}
/* :L388 */
.hp-root .hp-chip--active,
.hp-root .hp-chip--active:hover {
  background: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L394 */
.hp-root .hp-directory__count {
  margin-top: var(--ah-space-4);
  font-size: 13px;
  color: var(--ah-color-muted);
}
/* responsive grid: 3 / 2 / 1 */

/* :L401 */
.hp-root .hp-grid {
  margin-top: var(--ah-space-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ah-space-3);
}
@media (max-width: 900px) {
  /* :L408 */
  .hp-root .hp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  /* :L411 */
  .hp-root .hp-grid {
    grid-template-columns: 1fr;
  }
}
/* card — hatched header strip across the top, plain body below */

/* :L415 */
.hp-root .hp-card {
  display: flex;
  flex-direction: column;
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* :L424 */
.hp-root .hp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(27, 44, 107, 0.14);
}
/* :L428 */
.hp-root .hp-card__header {
  width: 100%;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--ah-space-4);
  background-color: rgba(13, 124, 143, 0.07);
  background-image: repeating-linear-gradient(135deg, rgba(13, 124, 143, 0.18) 0px, rgba(13, 124, 143, 0.18) 2px, rgba(13, 124, 143, 0) 2px, rgba(13, 124, 143, 0) 8px);
}
/* :L444 */
.hp-root .hp-card__icon-plate {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--ah-surface-card);
  box-shadow: 0 1px 4px rgba(27, 44, 143, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* :L455 */
.hp-root .hp-card__icon {
  display: block;
  width: 24px;
  height: 24px;
}
/* :L456 */
.hp-root .hp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--ah-space-4);
}
/* :L462 */
.hp-root .hp-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-accent);
  margin-bottom: var(--ah-space-2);
}
/* :L471 */
.hp-root .hp-card__title {
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  line-height: 1.3;
}
/* :L477 */
.hp-root .hp-card__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ah-text-body);
  flex: 1;
}
/* :L484 */
.hp-root .hp-card__cta {
  margin-top: var(--ah-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  text-decoration: none;
}
/* :L494 */
.hp-root .hp-card__cta img {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
/* :L495 */
.hp-root .hp-card__cta:hover img {
  transform: translateX(3px);
}
/* empty state */

/* :L498 */
.hp-root .hp-empty {
  margin-top: var(--ah-space-5);
  text-align: center;
  padding: var(--ah-space-6) var(--ah-space-3);
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
}
/* :L505 */
.hp-root .hp-empty--hidden {
  display: none;
}
/* :L506 */
.hp-root .hp-empty__message {
  margin: 0 0 var(--ah-space-3);
  font-size: 15px;
  color: var(--ah-color-heading);
  font-weight: var(--ah-fw-bold);
}
/* =========================================================================
   10 · Footer strip splashes — same card treatment, Slate trailing arrow
   ========================================================================= */

/* :L516 */
.hp-root .hp-splashes {
  padding: var(--ah-space-6) 24px var(--ah-space-7);
  max-width: var(--ah-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ah-space-3);
}
@media (max-width: 900px) {
  /* :L525 */
  .hp-root .hp-splashes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  /* :L528 */
  .hp-root .hp-splashes {
    grid-template-columns: 1fr;
  }
}
/* :L530 */
.hp-root .hp-splash {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* :L540 */
.hp-root .hp-splash:hover {
  box-shadow: 0 8px 20px rgba(27, 44, 107, 0.14);
}
/* :L541 */
.hp-root .hp-splash__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
/* :L542 */
.hp-root .hp-splash__text {
  flex: 1;
}
/* :L543 */
.hp-root .hp-splash__title {
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* :L544 */
.hp-root .hp-splash__desc {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ah-text-body);
}
/* :L545 */
.hp-root .hp-splash__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
/* Empty anchor stretched over the whole card — Instanda won't allow markup
   nested inside an <a>, so the link carries only plain text (its own
   card title, matching the visible label) with no nested elements. That
   text is visually collapsed here since the real, visible title already
   renders elsewhere in the card; the anchor just needs to sit on top and
   catch the click for the whole splash. */

/* :L553 */
.hp-root .hp-splash__hit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
}
/* =========================================================================
   11 · Modals — Navy header, white body, 75vh scrollable
   ========================================================================= */

/* :L570 */
.hp-root .hp-modal .modal-dialog {
  max-width: 560px;
  margin: 40px auto;
}
/* :L571 */
.hp-root .hp-modal .hp-modal__content {
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}
/* :L580 */
.hp-root .hp-modal .hp-modal__header {
  background: var(--ah-color-primary);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: none;
  border-radius: 0;
}
/* :L590 */
.hp-root .hp-modal .hp-modal__title {
  color: var(--ah-text-on-dark);
  font-size: 17px;
  font-weight: var(--ah-fw-bold);
  margin: 0;
}
/* :L591 */
.hp-root .hp-modal .hp-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
/* :L598 */
.hp-root .hp-modal .hp-modal__close img {
  width: 20px;
  height: 20px;
}
/* The host site's own Bootstrap CSS applies a clearfix to .modal-header
   and .modal-footer via ::before/::after { display:table; content:" "; }.
   That's harmless in Bootstrap's own block layout, but because we turn
   these into flex containers, the pseudo-elements become real flex items
   sitting at each end — squeezing the title and close button in from the
   edges instead of letting them sit flush left/right. Kill the generated
   content so only our two real children remain in the flex row. */

/* :L607 */
.hp-root .hp-modal .hp-modal__header::before,
.hp-root .hp-modal .hp-modal__header::after,
.hp-root .hp-modal .hp-modal__footer::before,
.hp-root .hp-modal .hp-modal__footer::after {
  content: none;
  display: none;
}
/* :L614 */
.hp-root .hp-modal .hp-modal__body {
  background: var(--ah-surface-card);
  padding: 24px 22px;
  color: var(--ah-text-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
}
/* :L623 */
.hp-root .hp-modal .hp-modal__body p {
  margin: 0 0 14px;
}
/* :L624 */
.hp-root .hp-modal .hp-modal__body p:last-child {
  margin-bottom: 0;
}
/* :L625 */
.hp-root .hp-modal .hp-modal__footer {
  padding: 16px 22px 22px;
  display: flex;
  justify-content: flex-end;
  border: none;
}
/* :L631 */
.hp-root .hp-modal .modal-backdrop.in {
  opacity: 0.55;
  background: var(--ah-navy);
}
/* Leaflet downloads modal (#hpModalLeaflets) — each download link is its own
   .hp-btn--tertiary wrapped in a <p>, stacked one per line; full-width here
   so every link fills the modal body edge to edge instead of sizing to its
   own (very different-length) label text. Scoped to #hpModalLeafletsBody so
   the modal's own Close button — same .hp-btn.hp-btn--tertiary classes, but
   sitting in .hp-modal__footer outside this id — is unaffected. */

/* :L639 */
.hp-root #hpModalLeafletsBody a.hp-btn {
  display: block;
  width: 100%;
}
/* =========================================================================
   Base typography — bare heading elements
   h3 sits at the "section header" tier of the type scale (same size/weight
   as .hp-card__title / .hp-splash__title). Left-aligned and bold per brand
   guidelines (titles are never centred; emphasis is bold, never italic).
   ========================================================================= */

/* :L650 */
.general-container h3 {
  margin: 0 0 var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  line-height: 1.3;
  color: var(--ah-color-primary);
  text-align: left;
}
/* =========================================================================
   12 · Agent quote search results — policy list table
   Entry point: .agent-quotesearch-results-container (Instanda's own markup,
   not under .hp-root — a policy management view, not the homepage).
   ========================================================================= */

/* :L665 */
.general-container .agent-quotesearch-results-container h3 {
  margin-bottom: var(--ah-space-4);
}
/* card wrapper around Bootstrap's own .table-responsive — overflow-x stays
   auto (not hidden) so small screens keep their horizontal scroll; Bootstrap
   loads before this stylesheet, so equal-specificity overrides below win on
   source order alone. */

/* :L673 */
.general-container .agent-quotesearch-results-container .table-responsive {
  margin-top: var(--ah-space-3);
  background: var(--ah-surface-card);
  border: none;
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  overflow-x: auto;
  overflow-y: hidden;
}
/* :L683 */
.general-container .agent-quotesearch-results-container #agentSearchResultsTable {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--ah-font);
}
/* .table-bordered ships compound (class+element) border selectors — the ID
   here outranks them regardless of stylesheet order, so no !important needed. */

/* :L692 */
.general-container .agent-quotesearch-results-container #agentSearchResultsTable.table-bordered,
.general-container .agent-quotesearch-results-container #agentSearchResultsTable.table-bordered thead > tr > th,
.general-container .agent-quotesearch-results-container #agentSearchResultsTable.table-bordered tbody > tr > td {
  border: none;
}
/* :L698 */
.general-container .agent-quotesearch-results-container #agentSearchResultsTable thead th {
  background: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  text-align: left;
  padding: var(--ah-space-3) var(--ah-space-4);
  white-space: nowrap;
}
/* :L710 */
.general-container .agent-quotesearch-results-container #agentSearchResultsTable tbody td {
  padding: var(--ah-space-3) var(--ah-space-4);
  font-size: var(--ah-fs-body);
  color: var(--ah-text-body);
  vertical-align: middle;
  border-bottom: 1px solid var(--ah-mist-deep);
}
/* .table-hover's own compound hover selector is high-specificity too — match
   it with the same ID anchor rather than reaching for !important. */

/* :L720 */
.general-container .agent-quotesearch-results-container #agentSearchResultsTable.table-hover tbody tr.active-quoteRow:hover td {
  background: var(--ah-mist);
}
/* Action toolbar row — a lone td[colspan] spanning the full row width (no
   sibling cells to keep column-aligned with), so it's the one row-level
   background break in the table: Mist Deep marks it as "controls", not data. */

/* :L727 */
.general-container .agent-quotesearch-results-container td[colspan] {
  background: var(--ah-surface-card-alt);
  padding: var(--ah-space-3) var(--ah-space-4);
  border-bottom: 1px solid var(--ah-mist-deep);
}
/* Anchor-as-button, tertiary (Navy outline) tier — default for every
   action-link (Cancel / Renew / Adjust policy / Log Claim / Abandon MTA /
   Abandon Renewal / Abandon Cancellation). */

/* :L736 */
.general-container .agent-quotesearch-results-container td[colspan] a.action-link {
  display: inline-block;
  margin: 4px var(--ah-space-2) 4px 0;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--ah-color-primary);
  background: var(--ah-surface-card);
  color: var(--ah-color-primary);
  text-decoration: none;
  cursor: pointer;
}
/* :L751 */
.general-container .agent-quotesearch-results-container td[colspan] a.action-link:hover {
  background: var(--ah-mist);
}
/* Abandon MTA / Abandon Renewal / Abandon Cancellation are destructive —
   they delete the in-progress quote — so they're marked with the design
   system's error red instead of Navy. All three share the same
   AbandonChange endpoint (unlike Cancel, which posts to CancelPolicy), so
   that's the reliable hook rather than trying to match on link text. */

/* :L760 */
.general-container .agent-quotesearch-results-container td[colspan] a.action-link[href*="AbandonChange"] {
  border-color: var(--ah-error);
  color: var(--ah-error);
}
/* :L764 */
.general-container .agent-quotesearch-results-container td[colspan] a.action-link[href*="AbandonChange"]:hover {
  background: rgba(192, 57, 43, 0.08);
}
/* Anchor-as-button, secondary (Navy fill) tier — the completion action for
   an in-progress quote (Complete MTA / Complete Renewal / Complete
   Cancellation). Instanda emits a stray trailing space in this anchor's
   class attribute and nowhere else — there's no other markup hook that
   distinguishes it from Cancel/Renew/Log Claim/Abandon, so the exact
   attribute-value match below is deliberate, not a typo. */

/* :L774 */
.general-container .agent-quotesearch-results-container td[colspan] a[class="action-link "] {
  background: var(--ah-color-primary);
  border-color: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L779 */
.general-container .agent-quotesearch-results-container td[colspan] a[class="action-link "]:hover {
  background: var(--ah-navy-deep);
  border-color: var(--ah-navy-deep);
}
/* Log Claim hidden per request — no distinguishing class of its own (it's a
   plain .action-link like Cancel/Renew/Adjust policy), so it's hooked via
   its stable AgentClaims href instead. */

/* :L787 */
.general-container .agent-quotesearch-results-container td[colspan] a.action-link[href*="AgentClaims"] {
  display: none;
}
/* Block renewal checkbox — native input kept (no custom graphics, so it
   doesn't fight Instanda/Bootstrap's own JS toggling), just recoloured and
   given breathing room next to the buttons. */

/* :L794 */
.general-container .agent-quotesearch-results-container td[colspan] label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 13px;
  font-weight: normal;
  color: var(--ah-color-muted);
}
/* :L803 */
.general-container .agent-quotesearch-results-container td[colspan] label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ah-color-primary);
}
/* Detail row first cell — PDF / All Docs / Notes, styled the same
   tertiary-button way as the action-link row above for visual consistency. */

/* :L812 */
.general-container .agent-quotesearch-results-container tr.active-quoteRow td:first-child > a {
  display: inline-block;
  width: 92px;
  margin: 4px var(--ah-space-2) 4px 0;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 1.5px solid var(--ah-color-primary);
  background: var(--ah-surface-card);
  color: var(--ah-color-primary);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
/* :L829 */
.general-container .agent-quotesearch-results-container tr.active-quoteRow td:first-child > a:hover {
  background: var(--ah-mist);
}
/* PDF hidden per request — this anchor has no class at all (unlike All
   Docs/Notes, it's not distinguishable by anything but its href), so it's
   hooked via its stable AgentPolicyDoc href instead. */

/* :L836 */
.general-container .agent-quotesearch-results-container tr.active-quoteRow td:first-child > a[href*="AgentPolicyDoc"] {
  display: none;
}
/* Notes modal — same Navy-header / white-body pattern as the homepage's
   .hp-modal (§11), redeclared here because this markup has no .hp-modal
   wrapper class to hook into; Bootstrap's own header/footer float layout is
   left alone, only colour/spacing is overridden. */

/* :L844 */
.general-container .agent-quotesearch-results-container .modal-dialog {
  max-width: 480px;
  margin: 40px auto;
}
/* :L848 */
.general-container .agent-quotesearch-results-container .modal-content {
  border: none;
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
}
/* :L854 */
.general-container .agent-quotesearch-results-container .modal-header {
  background: var(--ah-color-primary);
  border: none;
  border-radius: 0;
  padding: 18px 22px;
}
/* :L860 */
.general-container .agent-quotesearch-results-container .modal-title {
  margin: 0;
  color: var(--ah-text-on-dark);
  font-size: 17px;
  font-weight: var(--ah-fw-bold);
}
/* :L866 */
.general-container .agent-quotesearch-results-container .modal-header .close {
  color: var(--ah-text-on-dark);
  opacity: 0.85;
  text-shadow: none;
}
/* :L871 */
.general-container .agent-quotesearch-results-container .modal-header .close:hover {
  opacity: 1;
}
/* :L874 */
.general-container .agent-quotesearch-results-container .modal-body {
  background: var(--ah-surface-card);
  padding: 22px;
  color: var(--ah-text-body);
  font-size: 14px;
  line-height: 1.6;
}
/* :L881 */
.general-container .agent-quotesearch-results-container .modal-body label {
  display: block;
  margin-bottom: 6px;
  color: var(--ah-color-primary);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
}
/* :L888 */
.general-container .agent-quotesearch-results-container .modal-body .form-control {
  width: 100%;
  font-family: var(--ah-font);
  font-size: 14px;
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
/* :L899 */
.general-container .agent-quotesearch-results-container .modal-body .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* :L903 */
.general-container .agent-quotesearch-results-container .modal-footer {
  border: none;
  padding: 16px 22px 22px;
}
/* :L907 */
.general-container .agent-quotesearch-results-container .modal-footer .btn {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 11px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
/* :L917 */
.general-container .agent-quotesearch-results-container .modal-footer .btn-primary {
  background: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L921 */
.general-container .agent-quotesearch-results-container .modal-footer .btn-primary:hover {
  background: var(--ah-navy-deep);
}
/* :L924 */
.general-container .agent-quotesearch-results-container .modal-footer .btn-secondary {
  background: transparent;
  color: var(--ah-color-primary);
  border: 1.5px solid var(--ah-color-primary);
}
/* :L929 */
.general-container .agent-quotesearch-results-container .modal-footer .btn-secondary:hover {
  background: var(--ah-mist);
}
/* :L932 */
.general-container .agent-quotesearch-results-container .modal-backdrop.in {
  background: var(--ah-navy);
  opacity: 0.55;
}
/* =========================================================================
   12b · Agent quote search results — "Quotes" variant (listquote.html)
   Same .agent-quotesearch-results-container entry point as §12, but
   Instanda's markup here is a different shape: no #agentSearchResultsTable
   id, header th's sit in the first <tbody> tr instead of a <thead>, data
   rows carry no .active-quoteRow class, and each row's Complete/Expired +
   All docs + Notes links share one merged first cell instead of §12's
   separate toolbar row. Kept as its own block (rather than loosening §12's
   selectors) so the list.html styling above is never at risk of regressing.
   The :not(#agentSearchResultsTable) guard is belt-and-braces — that id
   doesn't exist on this table anyway — to make the separation explicit.
   The .table-responsive card treatment and the Notes modal branding are
   already unscoped by id/class in §12, so both are shared as-is; nothing
   new is needed for either here.
   ========================================================================= */

/* :L952 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--ah-font);
}
/* :L959 */
.general-container .agent-quotesearch-results-container table.agent-table.table-bordered:not(#agentSearchResultsTable),
.general-container .agent-quotesearch-results-container table.agent-table.table-bordered:not(#agentSearchResultsTable) tbody > tr > th,
.general-container .agent-quotesearch-results-container table.agent-table.table-bordered:not(#agentSearchResultsTable) tbody > tr > td {
  border: none;
}
/* :L965 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:first-child > th {
  background: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  text-align: left;
  padding: var(--ah-space-3) var(--ah-space-4);
  white-space: nowrap;
}
/* :L977 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td {
  padding: var(--ah-space-3) var(--ah-space-4);
  font-size: var(--ah-fs-body);
  color: var(--ah-text-body);
  vertical-align: middle;
  border-bottom: 1px solid var(--ah-mist-deep);
}
/* :L984 */
.general-container .agent-quotesearch-results-container table.agent-table.table-hover:not(#agentSearchResultsTable) tbody > tr:not(:first-child):hover > td {
  background: var(--ah-mist);
}
/* Anchor-as-button, tertiary (Navy outline) tier — default for every anchor
   in the merged first cell (All docs / Notes, and Complete before the
   primary-tier override below). */

/* :L991 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td:first-child > a {
  display: inline-block;
  width: 92px;
  margin: 4px var(--ah-space-2) 4px 0;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 1.5px solid var(--ah-color-primary);
  background: var(--ah-surface-card);
  color: var(--ah-color-primary);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
/* :L1008 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td:first-child > a:hover {
  background: var(--ah-mist);
}
/* "Complete" is this row's completion action — same solid-Navy primary tier
   as §12's Complete MTA/Renewal/Cancellation. Every action-link on this
   table IS a completion action (there's no Cancel/Renew/Abandon sibling
   here), so unlike §12 there's no need for the trailing-space attribute
   trick to single it out — the class alone is enough. */

/* :L1017 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td:first-child > a.action-link {
  background: var(--ah-color-primary);
  border-color: var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L1022 */
.general-container .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td:first-child > a.action-link:hover {
  background: var(--ah-navy-deep);
  border-color: var(--ah-navy-deep);
}
/* =========================================================================
   13 · Quote results wrapper spacing
   ========================================================================= */

/* :L1030 */
.general-container #divQuoteResults {
  margin-top: var(--ah-space-4);
}
/* =========================================================================
   14 · List navigation buttons — See All / Next Page / Previous Page
   Entry point: #divNavigation (Instanda's own markup, a separate component
   from the quote/policy tables above). The host's own "action-buttons" /
   "left" / "right" / "full-width" utility classes float these three
   buttons to the right edge — switching the container to flex overrides
   that (flex items ignore float entirely, so no specificity fight is
   needed there), and float/width are reset explicitly so the "left"/
   "full-width" classes on the container itself can't leave it shrink-to-
   fit and mis-centred.
   ========================================================================= */

/* :L1045 */
.general-container #divNavigation .action-buttons {
  display: flex;
  float: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ah-space-3);
  margin-top: var(--ah-space-4);
}
/* Matches site.css's .btn-default (Bootstrap's tertiary treatment) exactly —
   these buttons carry no .btn-default class of their own, so the look is
   reproduced here rather than shared via selector. */

/* :L1059 */
.general-container #divNavigation .action-buttons button {
  display: inline-block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background-color: transparent;
  border: 1.5px solid var(--ah-color-primary);
  box-shadow: none;
  text-shadow: none;
  padding: 11.5px 24px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* :L1075 */
.general-container #divNavigation .action-buttons button:hover,
.general-container #divNavigation .action-buttons button:focus {
  background-color: rgba(27, 44, 107, 0.06);
}
/* :L1079 */
.general-container #divNavigation .action-buttons button:active {
  background-color: rgba(27, 44, 107, 0.12);
}
/* Timeout error message — only shown conditionally by Instanda's own JS;
   given its own full-width line so it doesn't crowd into the button row
   when it does appear. */

/* :L1086 */
.general-container #divNavigation .action-buttons [name="timeoutAlertDiv"] {
  flex-basis: 100%;
  margin-top: var(--ah-space-2);
  color: var(--ah-error);
  font-size: 13px;
  text-align: center;
}
/* =========================================================================
   15 · Agent login — welcome content
   Entry point: .general-container .login-root (Content/General Content/
   Agent login/html). This fragment shipped with no class hooks at all
   beyond the shared .general-container wrapper, so — same precedent as
   the homepage's .hp-root — a scoping root class and BEM hooks were added
   directly to the fragment's markup; every rule below is namespaced under
   both .general-container and .login-root together, matching this file's
   convention of never leaving a component scoped to bare .general-container
   alone, so nothing here can leak onto any other page.
   ========================================================================= */

/* Width matches .hp-root's pattern: content maxes out at --ah-content-max
   (1080px) with a 24px gutter outside that — not --ah-content-max alone
   with padding cut into it, which would render ~48px narrower than the
   homepage at wide viewports. 1128px = 1080px + 24px gutter each side. */

/* :L1109 */
.general-container .login-root {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0px 24px var(--ah-space-6);
}
/* :L1115 */
.general-container .login-root .login-hero {
  background: var(--ah-color-primary);
  border-radius: var(--ah-radius-card);
  padding: var(--ah-space-5) var(--ah-space-5);
}
/* :L1120 */
.general-container .login-root .login-hero__title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  line-height: 1.35;
}
/* :L1127 */
.general-container .login-root .login-hero__logo {
  height: 26px;
  width: auto;
  vertical-align: middle;
  margin-left: var(--ah-space-2);
}
/* "HUB" in the AncillaryHUB wordmark — matches the design guideline's own
   header treatment (AncillaryHUB_CSS_Guidelines.html), not a CTA, so it's
   exempt from the once-per-page Gold rule. */

/* :L1136 */
.general-container .login-root .login-hero__brand-hub {
  color: var(--ah-color-signal);
}
/* :L1139 */
.general-container .login-root .login-hero__notice {
  display: inline-block;
  margin-top: var(--ah-space-4);
  padding: var(--ah-space-3) var(--ah-space-4);
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--ah-color-signal);
  border-radius: 4px;
  font-size: var(--ah-fs-body);
  color: var(--ah-mist);
}
/* .login-banner itself carries no background/radius/overflow — in
   production it isn't just an image frame, it's also where Instanda nests
   the real sign-in form (§16) after the banner image, so the "card" framing
   lives on the image alone rather than risking clipping/squashing whatever
   else ends up inside this div. */

/* :L1155 */
.general-container .login-root .login-banner {
  margin-top: var(--ah-space-5);
}
/* :L1158 */
.general-container .login-root .login-banner__img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  object-fit: cover;
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
}
/* :L1169 */
.general-container .login-root .login-tagline {
  margin: var(--ah-space-5) 0 0;
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  text-align: center;
}
/* :L1177 */
.general-container .login-root .login-services {
  margin-top: var(--ah-space-5);
  display: flex;
  align-items: center;
  gap: var(--ah-space-4);
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-5);
}
/* The uploaded asset here is a landscape Coplus + tagline lockup (~3:1,
   e.g. co-plus-tagline.png), not a square icon — sized by width only so its
   aspect ratio is never forced/cropped regardless of the exact upload. */

/* :L1190 */
.general-container .login-root .login-services__icon {
  flex-shrink: 0;
  width: 240px;
}
/* :L1194 */
.general-container .login-root .login-services__icon img {
  display: block;
  width: 100%;
  height: auto;
}
/* :L1199 */
.general-container .login-root .login-services__text {
  flex: 1;
  font-size: var(--ah-fs-body);
  line-height: 1.6;
  color: var(--ah-text-body);
}
/* How To Log In + Contact us splashes — same card/icon/arrow treatment as
   the homepage's .hp-splash (§10), reproduced here under .login-root since
   this page isn't a descendant of .hp-root. Two cards, not the full 3-up
   grid, so .login-links lays them out as a single flex row with each card
   taking an equal share, rather than .hp-splashes' grid. */

/* :L1211 */
.general-container .login-root .login-links {
  margin-top: var(--ah-space-4);
  display: flex;
  gap: var(--ah-space-3);
}
/* :L1216 */
.general-container .login-root .login-contact {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* :L1227 */
.general-container .login-root .login-contact:hover {
  box-shadow: 0 8px 20px rgba(27, 44, 107, 0.14);
}
/* :L1228 */
.general-container .login-root .login-contact__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
/* :L1229 */
.general-container .login-root .login-contact__text {
  flex: 1;
}
/* :L1230 */
.general-container .login-root .login-contact__title {
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* :L1231 */
.general-container .login-root .login-contact__desc {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ah-text-body);
}
/* :L1232 */
.general-container .login-root .login-contact__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
/* Empty anchor stretched over the whole card, same reasoning as
   .hp-splash__hit — Instanda won't allow markup nested inside an <a>, so
   the visible title/desc live outside it and this hit-target carries only
   its own collapsed, transparent copy of the label. */

/* :L1237 */
.general-container .login-root .login-contact__hit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
}
/* =========================================================================
   16 · Agent login — sign-in form
   Entry point: .instanda-agent-login (Instanda's own live-rendered login
   template, not the editable content fragment above). Instanda nests this
   form inside .login-banner itself, after the banner image — so it's a
   descendant of .login-root/.general-container, and §15's .login-banner
   was adjusted (card framing moved onto .login-banner__img alone) so it
   doesn't clip or squash this form sitting alongside the image.
   ========================================================================= */

/* :L1260 */
.general-container .instanda-agent-login {
  margin-top: var(--ah-space-6);
  margin-bottom: var(--ah-space-6);
}
/* Bootstrap's .well ships its own grey background/inset-shadow/border —
   replaced with the same white-card treatment used everywhere else. */

/* :L1267 */
.general-container .instanda-agent-login .well.instanda-well {
  background: var(--ah-surface-card);
  border: none;
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-5);
}
/* :L1275 */
.general-container .instanda-agent-login .form-group {
  margin-bottom: var(--ah-space-4);
}
/* :L1278 */
.general-container .instanda-agent-login .control-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* Matches product.css's text-input pattern (e.g. .ah-css-vehicle .form-control)
   so the login fields look like every other text field in this build. */

/* :L1289 */
.general-container .instanda-agent-login .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L1303 */
.general-container .instanda-agent-login .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L1306 */
.general-container .instanda-agent-login .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Validation message — Bootstrap's .label-warning ships an orange pill
   background/padding meant for badge-style labels, not inline field
   errors, so that's stripped back to plain text here. Bootstrap's .label
   also sets white-space: nowrap (badges are meant to stay one line), which
   left uncorrected pushes any longer error message past the form's width
   instead of wrapping — reset back to normal wrapping here. */

/* :L1317 */
.general-container .instanda-agent-login .field-validation-valid,
.general-container .instanda-agent-login .field-validation-error {
  display: block;
  margin-top: var(--ah-space-2);
  padding: 0;
  background: none;
  font-family: var(--ah-font);
  font-size: 12.5px;
  font-weight: normal;
  color: var(--ah-error);
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}
/* Sign In — the one Gold primary CTA for this entire page, overriding the
   site-wide Navy .btn-primary mapping (site.css §2) just for this button;
   this markup sits outside .site so that mapping wouldn't reach it anyway. */

/* :L1335 */
.general-container .instanda-agent-login .btn.btn-primary.instanda-btn {
  display: block;
  width: 100%;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: var(--ah-color-signal);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L1351 */
.general-container .instanda-agent-login .btn.btn-primary.instanda-btn:hover,
.general-container .instanda-agent-login .btn.btn-primary.instanda-btn:focus {
  background: #e39a0f;
  color: var(--ah-color-primary);
}
/* :L1357 */
.general-container .instanda-agent-login .agent-login-links {
  margin-top: var(--ah-space-4);
  text-align: center;
}
/* :L1361 */
.general-container .instanda-agent-login .agent-login-forgot-password {
  font-size: 13px;
  color: var(--ah-color-primary);
  text-decoration: none;
}
/* :L1366 */
.general-container .instanda-agent-login .agent-login-forgot-password:hover {
  text-decoration: underline;
}
/* =========================================================================
   17 · Agent login — "How To Log In" modal
   Same Navy-header / white-body treatment as the homepage's .hp-modal
   (§11), redeclared here under .login-root since this page isn't a
   descendant of .hp-root and has no .hp-btn mapping to reuse for its
   footer button, so .login-modal__btn gets its own tertiary treatment.
   ========================================================================= */

/* :L1377 */
.general-container .login-root .login-modal .modal-dialog {
  max-width: 560px;
  margin: 40px auto;
}
/* :L1378 */
.general-container .login-root .login-modal .login-modal__content {
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}
/* :L1387 */
.general-container .login-root .login-modal .login-modal__header {
  background: var(--ah-color-primary);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: none;
  border-radius: 0;
}
/* :L1397 */
.general-container .login-root .login-modal .login-modal__title {
  color: var(--ah-text-on-dark);
  font-size: 17px;
  font-weight: var(--ah-fw-bold);
  margin: 0;
}
/* :L1398 */
.general-container .login-root .login-modal .login-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
/* :L1405 */
.general-container .login-root .login-modal .login-modal__close img {
  width: 20px;
  height: 20px;
}
/* Same Bootstrap clearfix override as §11 — .modal-header/.modal-footer's
   ::before/::after become stray flex items once turned into flex containers. */

/* :L1409 */
.general-container .login-root .login-modal .login-modal__header::before,
.general-container .login-root .login-modal .login-modal__header::after,
.general-container .login-root .login-modal .login-modal__footer::before,
.general-container .login-root .login-modal .login-modal__footer::after {
  content: none;
  display: none;
}
/* :L1416 */
.general-container .login-root .login-modal .login-modal__body {
  background: var(--ah-surface-card);
  padding: 24px 22px;
  color: var(--ah-text-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
}
/* :L1425 */
.general-container .login-root .login-modal .login-modal__body p {
  margin: 0 0 14px;
}
/* :L1426 */
.general-container .login-root .login-modal .login-modal__body p:last-child {
  margin-bottom: 0;
}
/* :L1427 */
.general-container .login-root .login-modal .login-modal__footer {
  padding: 16px 22px 22px;
  display: flex;
  justify-content: flex-end;
  border: none;
}
/* :L1433 */
.general-container .login-root .login-modal .modal-backdrop.in {
  opacity: 0.55;
  background: var(--ah-navy);
}
/* :L1434 */
.general-container .login-root .login-modal .login-modal__btn {
  display: inline-block;
  background: transparent;
  color: var(--ah-color-primary);
  border: 1.5px solid var(--ah-color-primary);
  border-radius: 8px;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  padding: 11.5px 24px;
  line-height: 1;
  cursor: pointer;
}
/* :L1447 */
.general-container .login-root .login-modal .login-modal__btn:hover {
  background: rgba(27, 44, 107, 0.06);
}
/* Session-expired dialog — no .modal-header at all (unlike §11/§12's
   modals), so there's no Navy header band to carry the brand colour;
   Restart Quote stays Navy, not Gold, so Sign In keeps this page's one
   Gold moment. Bootstrap's clearfix pseudo-elements are neutralised on
   .modal-footer for the same reason as §11 even without a header present. */

/* :L1454 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-content {
  border: none;
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
}
/* :L1460 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-body {
  padding: var(--ah-space-5) var(--ah-space-5) var(--ah-space-4);
  font-family: var(--ah-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ah-color-primary);
  text-align: center;
}
/* :L1468 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-footer {
  border: none;
  padding: 0 var(--ah-space-5) var(--ah-space-5);
  text-align: center;
}
/* :L1473 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-footer::before,
.general-container #publicLiveSessionExpiredPopupDialog .modal-footer::after {
  content: none;
  display: none;
}
/* :L1478 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-footer .btn.btn-primary {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  padding: 11px 28px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L1490 */
.general-container #publicLiveSessionExpiredPopupDialog .modal-footer .btn.btn-primary:hover {
  background: var(--ah-navy-deep);
}
/* =========================================================================
   18 · Agent forgot/reset password — standalone page
   Entry point: .instanda-reset-agent-password (Instanda's own live-rendered
   "Forgot your password?" destination, linked from §16's
   .agent-login-forgot-password). Instanda puts .well.instanda-well on the
   grid column here instead of the <form> — same white-card treatment as
   §16 regardless of which element carries it.
   ========================================================================= */

/* :L1502 */
.general-container .instanda-reset-agent-password .well.instanda-well {
  background: var(--ah-surface-card);
  border: none;
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-5);
}
/* :L1510 */
.general-container .instanda-reset-agent-password h4 {
  margin: 0 0 var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  line-height: 1.3;
  color: var(--ah-color-primary);
}
/* :L1518 */
.general-container .instanda-reset-agent-password p {
  margin: 0 0 var(--ah-space-4);
  font-family: var(--ah-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ah-text-body);
}
/* :L1526 */
.general-container .instanda-reset-agent-password .form-group {
  margin-bottom: var(--ah-space-4);
}
/* Matches §16's .form-control pattern so this page's field looks like every
   other text field in the build. */

/* :L1532 */
.general-container .instanda-reset-agent-password .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L1546 */
.general-container .instanda-reset-agent-password .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L1549 */
.general-container .instanda-reset-agent-password .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* This markup's validation span carries Bootstrap's .label/.label-warning
   badge classes (§16's login form doesn't) — the three-class selector below
   still outranks those on specificity alone, so the orange pill background/
   padding is overridden back to §16's plain inline-text treatment without
   needing !important. */

/* :L1559 */
.general-container .instanda-reset-agent-password .field-validation-valid,
.general-container .instanda-reset-agent-password .field-validation-error {
  display: block;
  margin-top: var(--ah-space-2);
  padding: 0;
  background: none;
  font-family: var(--ah-font);
  font-size: 12.5px;
  font-weight: normal;
  color: var(--ah-error);
}
/* Submit — the one Gold primary CTA for this page, same treatment as §16's
   Sign In button. Its container (col-lg-9) is narrower than the card, so
   width:100% here fills that column rather than the whole card — matches
   the source markup's grid instead of fighting it. */

/* :L1575 */
.general-container .instanda-reset-agent-password .btn.btn-primary.instanda-btn {
  display: block;
  width: 100%;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: var(--ah-color-signal);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L1591 */
.general-container .instanda-reset-agent-password .btn.btn-primary.instanda-btn:hover,
.general-container .instanda-reset-agent-password .btn.btn-primary.instanda-btn:focus {
  background: #e39a0f;
  color: var(--ah-color-primary);
}
/* =========================================================================
   19 · Agent forgot/reset password — "details sent" confirmation
   Entry point: .instanda-agent-password-details-sent (Instanda's own
   live-rendered confirmation shown after §18's form is submitted). Same
   white-card treatment and heading/body type as §18 — no form controls
   here, just the card and copy.
   ========================================================================= */

/* :L1604 */
.general-container .instanda-agent-password-details-sent .well.instanda-well {
  background: var(--ah-surface-card);
  border: none;
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-5);
}
/* :L1612 */
.general-container .instanda-agent-password-details-sent h4 {
  margin: 0 0 var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  line-height: 1.3;
  color: var(--ah-color-primary);
}
/* :L1620 */
.general-container .instanda-agent-password-details-sent .section_content p {
  margin: 0;
  font-family: var(--ah-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ah-text-body);
}
/* =========================================================================
   20 · Agent select-package screen — entry point .instanda-agent-select-packages
   -------------------------------------------------------------------------
   Instanda-generated markup — a flat run of per-package "select" links
   plus one "Cross Package Search" link, all sharing identical classes
   (btn btn-default package-select) with only the id distinguishing them:
   "select-cross-package" for the one to keep, "select-package-<packageId>"
   for every per-package link — hidden per instruction so only Cross
   Package Search remains visible.
   The trailing <br> Instanda emits right after that link is hidden too —
   harmless while every other link sat on the line(s) below, but with
   those gone it would just leave an empty line under the button once
   centred.
   The button's own text ("Cross Package Search") can't be edited — no
   HTML changes on this platform — so it's shortened to "Customer Search" the same
   way this file already fakes a shorter label elsewhere: collapse the
   real text to font-size:0 and supply the replacement via a ::before
   content string instead (matches product.css's ::before label technique
   and this file's own .hp-splash__hit real-text-collapse trick).
   With every other button hidden, Search is this page's one remaining
   action — styled as the guide's Secondary treatment (solid Navy fill,
   white text, same as .hp-btn--secondary at the top of this file), not
   Gold, since Gold stays reserved as the once-per-page primary CTA
   elsewhere. Kept inline-block rather than full-width since it's centred
   as a standalone button here, not a form's only submit control.
   ========================================================================= */

/* :L1654 */
.general-container .instanda-agent-select-packages a.package-select[id^="select-package-"] {
  display: none;
}
/* :L1657 */
.general-container .instanda-agent-select-packages a#select-cross-package + br {
  display: none;
}
/* :L1661 */
.general-container .instanda-agent-select-packages .container {
  text-align: center;
}
/* :L1664 */
.general-container .instanda-agent-select-packages a#select-cross-package {
  display: inline-block;
  font-size: 0;
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 30px;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* :L1678 */
.general-container .instanda-agent-select-packages a#select-cross-package:hover,
.general-container .instanda-agent-select-packages a#select-cross-package:focus {
  background: #142253;
  color: var(--ah-text-on-dark);
  text-decoration: none;
}
/* :L1684 */
.general-container .instanda-agent-select-packages a#select-cross-package::before {
  content: "Customer Search";
  font-family: var(--ah-font);
  font-size: 40px;
  font-weight: var(--ah-fw-bold);
}
/* "Products" — entry point .instanda-select-products, a second button on
   this flow styled to match Search above (same solid-Navy secondary look,
   same size). Its own text ("Products") is already short, unlike Cross
   Package Search, so it's sized directly rather than needing the
   font-size:0 + ::before text-swap trick used above. */

/* :L1696 */
.general-container .instanda-select-products {
  text-align: center;
}
/* :L1699 */
.general-container .instanda-select-products a.btn.btn-default {
  display: inline-block;
  font-family: var(--ah-font);
  font-size: 40px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 30px;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* :L1715 */
.general-container .instanda-select-products a.btn.btn-default:hover,
.general-container .instanda-select-products a.btn.btn-default:focus {
  background: #142253;
  color: var(--ah-text-on-dark);
  text-decoration: none;
}
/* =========================================================================
   Responsive — mobile
   ========================================================================= */

@media (max-width: 700px) {
  /* :L1726 */
  .hp-root .hp-hero__carousel,
  .hp-root .hp-hero__inner,
  .hp-root .hp-hero__inner .item,
  .hp-root .hp-hero__slide {
    height: 420px;
  }
  /* :L1730 */
  .hp-root .hp-hero__content {
    padding: 0 28px;
  }
  /* :L1731 */
  .hp-root .hp-hero__title {
    font-size: 24px;
  }
  /* :L1732 */
  .hp-root .hp-hero__indicators {
    left: 28px;
  }
  /* :L1733 */
  .hp-root .hp-hero__control {
    width: 32px;
    height: 32px;
  }
  /* :L1734 */
  .hp-root .hp-hero__control-icon {
    width: 12px;
    height: 12px;
  }
  /* :L1736 */
  .hp-root .hp-spotlight {
    padding: var(--ah-space-3);
  }
  /* :L1737 */
  .hp-root .hp-spotlight__inner {
    padding: var(--ah-space-4) var(--ah-space-3);
  }
  /* :L1738 */
  .hp-root .hp-spotlight__title {
    font-size: 21px;
  }
  /* :L1740 */
  .hp-root .hp-directory__controls {
    flex-direction: column;
  }
  /* :L1741 */
  .hp-root .hp-search {
    max-width: none;
  }
  /* :L1743 */
  .agent-quotesearch-results-container #agentSearchResultsTable thead th,
  .agent-quotesearch-results-container #agentSearchResultsTable tbody td {
    padding: var(--ah-space-2) var(--ah-space-3);
  }
  /* :L1745 */
  .agent-quotesearch-results-container td[colspan] a.action-link {
    font-size: 12px;
    padding: 7px 14px;
  }
  /* :L1746 */
  .agent-quotesearch-results-container tr.active-quoteRow td:first-child > a {
    font-size: 12px;
    width: 80px;
    padding: 7px 0;
  }
  /* :L1748 */
  .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:first-child > th,
  .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td {
    padding: var(--ah-space-2) var(--ah-space-3);
  }
  /* :L1750 */
  .agent-quotesearch-results-container table.agent-table:not(#agentSearchResultsTable) tbody > tr:not(:first-child) > td:first-child > a {
    font-size: 12px;
    width: 80px;
    padding: 7px 0;
  }
  /* :L1752 */
  .general-container .login-root .login-hero {
    padding: var(--ah-space-4) var(--ah-space-3);
  }
  /* :L1753 */
  .general-container .login-root .login-hero__title {
    font-size: 21px;
  }
  /* :L1754 */
  .general-container .login-root .login-services {
    flex-direction: column;
    text-align: center;
  }
  /* :L1755 */
  .general-container .login-root .login-links {
    flex-direction: column;
  }
}
/* =========================================================================
   Coplus product — content stylesheet
   Brand: AncillaryHUB visual system (Navy / Gold / Teal / Slate), Arial only.
   Namespaced entirely under .product — never bare :root — so
   nothing here can leak into or collide with the host Instanda page.
   ========================================================================= */

/* :L1764 */
.product {
  /* ---- literal palette ---- */
  --ah-navy: #1b2c6b;
  --ah-navy-deep: #12224f;
  --ah-gold: #f4a820;
  --ah-teal: #0d7c8f;
  --ah-slate: #3c476b;
  --ah-slate-light: #5c688c;
  --ah-white: white;
  --ah-mist: #edf0f6;
  --ah-mist-deep: #e4e8f1;
  --ah-ink-grey: #44546a;
  --ah-error: #c0392b;
  /* ---- semantic aliases — components below reference these, not hex ---- */
  --ah-color-primary: var(--ah-navy);
  --ah-color-signal: var(--ah-gold);
  --ah-color-accent: var(--ah-teal);
  --ah-color-heading: var(--ah-slate);
  --ah-color-muted: var(--ah-slate-light);
  --ah-surface-page: var(--ah-mist);
  --ah-surface-card: var(--ah-white);
  --ah-surface-card-alt: var(--ah-mist-deep);
  --ah-text-body: var(--ah-ink-grey);
  --ah-text-on-dark: var(--ah-white);
  --ah-text-on-dark-muted: var(--ah-slate-light);
  /* ---- spacing / radius / elevation ---- */
  --ah-space-1: 4px;
  --ah-space-2: 8px;
  --ah-space-3: 16px;
  --ah-space-4: 24px;
  --ah-space-5: 32px;
  --ah-space-6: 48px;
  --ah-space-7: 64px;
  --ah-radius-card: 12px;
  --ah-radius-pill: 999px;
  --ah-shadow-card: 0 2px 8px rgba(27, 44, 107, 0.08);
  --ah-content-max: 1080px;
  /* ---- type ---- */
  --ah-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ah-fs-stat: 44px;
  --ah-fs-title: 30px;
  --ah-fs-section: 17px;
  --ah-fs-body: 14px;
  --ah-fs-caption: 11px;
  --ah-track-caption: 0.1em;
  --ah-fw-bold: 700;
  font-family: var(--ah-font);
  color: var(--ah-text-body);
  background: var(--ah-surface-page);
  padding-top: var(--ah-space-5);
}
/* :L1815 */
.product * {
  box-sizing: border-box;
}
/* :L1816 */
.product img {
  max-width: none;
}
/* :L1818 */
.product a {
  color: inherit;
}
/* =========================================================================
   12 · Vehicle details lookup — entry point .ah-css-vehicle
   -------------------------------------------------------------------------
   Instanda-generated markup — classes/structure are fixed, IDs carry a
   per-question numeric suffix (e.g. "..._316282") so those are matched
   with [id^="…"] rather than hardcoded. This is one "question" made up
   of a Registration field + lookup action, revealing a nested Make /
   Model / Year group once a vehicle is found — the exact "question
   container with nested sub-fields" pattern from the guide: Mist Deep
   card, no border, no accent stripe, Slate-bordered white inputs stay
   distinct against the Mist Deep fill. Layout/grid classes (form-group,
   row, col-xs-11 …) are left alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L1834 */
.product .ah-css-vehicle {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question title — "Please enter the car's details *" */

/* :L1842 */
.product .ah-css-vehicle > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Nested sub-fields — Registration, Make, Model, Year of manufacture */

/* :L1852 */
.product .ah-css-vehicle .instanda-question-item.form-group {
  margin-bottom: var(--ah-space-3);
}
/* :L1855 */
.product .ah-css-vehicle .instanda-question-item.form-group:last-child {
  margin-bottom: 0;
}
/* :L1858 */
.product .ah-css-vehicle .instanda-question-inner-label label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* Inputs — fixed 50px, Slate resting border (distinct on the Mist Deep
   card), Navy on hover/focus with a soft Navy glow. Gold never used here. */

/* :L1871 */
.product .ah-css-vehicle .instanda-question-input .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L1885 */
.product .ah-css-vehicle .instanda-question-input .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L1888 */
.product .ah-css-vehicle .instanda-question-input .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L1891 */
.product .ah-css-vehicle .instanda-question-input .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Look up details — a utility action within the question, not the page's
   primary CTA, so it takes the Navy secondary treatment (Gold stays rare).
   Instanda emits this as a bare <a href="#" onclick="..."> with no class
   at all (no .instanda-button/.btn/.btn-primary to hook), so the button
   look is built directly on the plain anchor. */

/* :L1901 */
.product .ah-css-vehicle .instanda-buttonList {
  margin: var(--ah-space-3) 0 0;
}
/* :L1904 */
.product .ah-css-vehicle .instanda-buttonList a {
  display: inline-block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* :L1920 */
.product .ah-css-vehicle .instanda-buttonList a:hover,
.product .ah-css-vehicle .instanda-buttonList a:focus {
  background: #142253;
  color: var(--ah-text-on-dark);
  text-decoration: none;
}
/* :L1926 */
.product .ah-css-vehicle .instanda-buttonList a:active {
  background: #0f1a40;
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L1932 */
.product .ah-css-vehicle .instanda-question-validation-message {
  margin-top: 6px;
}
/* :L1935 */
.product .ah-css-vehicle .instanda-question-validation-message .label.label-danger {
  display: inline-block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
/* Lookup outcome messages (vehicle not found, access forbidden, lookup
   error, incorrect length, system failure) — shown/hidden by the host's
   own JS via inline display; this only sets their look once visible. */

/* :L1949 */
.product .ah-css-vehicle .ui-state-error-text {
  display: block;
  margin-top: 6px;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
/* Revealed Make / Model / Year group — separated from the Registration
   field with a hairline, not another card (already inside one). */

/* :L1960 */
.product .ah-css-vehicle [id^="instanda-car-details-question-input_"] {
  margin-top: var(--ah-space-4);
  padding-top: var(--ah-space-4);
  border-top: 1px solid rgba(27, 44, 107, 0.12);
}
@media (max-width: 700px) {
  /* :L1967 */
  .product .ah-css-vehicle {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   13 · Address lookup — entry point .ah-css-address
   -------------------------------------------------------------------------
   Instanda-generated markup — classes/structure are fixed, IDs carry a
   per-question numeric suffix (e.g. "..._316281") so those are matched by
   class rather than hardcoded. One "question" made up of a Data8
   single-line predictive lookup (with an Edit action) that toggles into a
   nested Address line 1/2, City, State/Province and Postcode group — the
   "question container with nested sub-fields" pattern from the guide:
   Mist Deep card, no border, no accent stripe, Slate-bordered white inputs
   stay distinct against the fill. Default field layout: fields stack
   full-width, one per row (no denser grid requested). The Data8 predictive-
   address suggestion dropdown is a third-party JS widget and keeps its own
   native styling by default — only the static input/label/validation is
   styled here. Layout/grid classes (form-group, row, col-xs-11 …) are left
   alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L1988 */
.product .ah-css-address {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question title — "Please enter your address *" */

/* :L1996 */
.product .ah-css-address > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Vertical rhythm between the single-line lookup row and each revealed
   sub-field group. Instanda toggles "single-line-showhide" on all of
   them at runtime — including the state/province container, added via
   JS — so this one class covers spacing for every group uniformly. */

/* :L2009 */
.product .ah-css-address .single-line-showhide {
  margin-bottom: var(--ah-space-3);
}
/* :L2012 */
.product .ah-css-address .instanda-question-input > .postcode-lookup-container:last-child {
  margin-bottom: 0;
}
/* Single-line predictive address (Data8) + Edit action, side by side */

/* :L2017 */
.product .ah-css-address .data8-pa-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ah-space-2);
  align-items: center;
}
/* :L2023 */
.product .ah-css-address .data8-pa-container .form-control {
  flex: 1;
  min-width: 220px;
}
/* Edit — secondary action (Navy fill, white text). Cancel stays the
   quieter Navy-outline (tertiary) treatment, one step down from Edit. */

/* :L2030 */
.product .ah-css-address .address-search-edit,
.product .ah-css-address .address-search-cancel {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  box-shadow: none;
  text-shadow: none;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* :L2044 */
.product .ah-css-address .address-search-edit {
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  padding: 13px 20px;
}
/* :L2050 */
.product .ah-css-address .address-search-edit:hover,
.product .ah-css-address .address-search-edit:focus {
  background: #142253;
  color: var(--ah-text-on-dark);
  text-decoration: none;
}
/* :L2056 */
.product .ah-css-address .address-search-edit:active {
  background: #0f1a40;
}
/* :L2059 */
.product .ah-css-address .address-search-cancel {
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 11.5px 20px;
  margin-top: var(--ah-space-2);
}
/* :L2066 */
.product .ah-css-address .address-search-cancel:hover,
.product .ah-css-address .address-search-cancel:focus {
  background: rgba(27, 44, 107, 0.06);
  color: var(--ah-color-primary);
  text-decoration: none;
}
/* Inner labels that already exist in the markup — City, State/Province,
   Postcode. */

/* :L2075 */
.product .ah-css-address .instanda-question-inner-label label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* Address line 1 / 2 ship with no label markup at all. Per the guide's
   CSS-only label rule (real, unambiguous fields only — markup can't be
   edited here), add one via ::before, matching the inner-label style. */

/* :L2089 */
.product .ah-css-address .instanda-address-line-1::before,
.product .ah-css-address .instanda-address-line-2::before {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* :L2100 */
.product .ah-css-address .instanda-address-line-1::before {
  content: "Address line 1";
}
/* :L2103 */
.product .ah-css-address .instanda-address-line-2::before {
  content: "Address line 2";
}
/* Inputs — fixed 50px, Slate resting border (distinct on the Mist Deep
   card), Navy on hover/focus with a soft Navy glow. Gold never used here.
   Covers the Data8 single-line box plus line 1/2, city, postcode and the
   state/province select. */

/* :L2111 */
.product .ah-css-address .instanda-question-input .form-control,
.product .ah-css-address .data8-pa-container .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L2126 */
.product .ah-css-address .instanda-question-input .form-control::placeholder,
.product .ah-css-address .data8-pa-container .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L2130 */
.product .ah-css-address .instanda-question-input .form-control:hover,
.product .ah-css-address .data8-pa-container .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L2134 */
.product .ah-css-address .instanda-question-input .form-control:focus,
.product .ah-css-address .data8-pa-container .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* State / Province select — CSS-drawn caret exception (functional chrome
   only, no image-generation step in this build). Slate at rest, Navy on
   hover/focus, matching the input chrome above. */

/* :L2143 */
.product .ah-css-address select.form-control {
  width: 100% !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--ah-surface-card);
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-heading) 50%), linear-gradient(135deg, var(--ah-color-heading) 50%, transparent 50%);
  /* right/center keyword syntax, not calc() — this build's CSS pipeline
     flattens calc(100% - 22px) into a raw "78%", stripping the px unit
     and treating the whole expression as a plain percentage subtraction.
     right Npx center expresses the same offset with no arithmetic for
     anything to mangle. */
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
/* :L2163 */
.product .ah-css-address select.form-control:hover,
.product .ah-css-address select.form-control:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-primary) 50%), linear-gradient(135deg, var(--ah-color-primary) 50%, transparent 50%);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2172 */
.product .ah-css-address .instanda-question-validation-message {
  margin-top: 6px;
}
/* :L2175 */
.product .ah-css-address .instanda-question-validation-message .label.label-danger {
  display: inline-block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2187 */
  .product .ah-css-address {
    padding: var(--ah-space-3);
  }
  /* :L2188 */
  .product .ah-css-address .address-search-edit,
  .product .ah-css-address .address-search-cancel {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================================
   14 · Name (Title / First / Last) — entry point .ah-css-name
   -------------------------------------------------------------------------
   Instanda-generated markup — classes/structure are fixed, ID carries a
   per-question numeric suffix (e.g. "question316287") so this is matched
   by class rather than hardcoded. One "question" made up of three nested
   sub-fields — a Title select, First name and Last name — the same
   "question container with nested sub-fields" pattern as the vehicle and
   address questions: Mist Deep card, no border, no accent stripe, Slate-
   bordered white inputs stay distinct against the fill. Default field
   layout: fields stack full-width, one per row (no denser layout
   requested). The outer question label reads "Title *" — an Instanda
   quirk where the composite question borrows its first sub-field's label
   rather than actually labelling the group; left as-is and styled as the
   question title, matching the vehicle/address pattern. The Title select
   itself ships with no field-level label in the markup — per instruction
   it stays unlabelled rather than adding one via ::before, unlike First
   name / Last name which already carry real inner labels. Layout/grid
   classes (form-group, row, col-xs-11 …) are left alone — only colour,
   type, radius, spacing.
   ========================================================================= */

/* :L2217 */
.product .ah-css-name {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question title — "Title *" (Instanda's composite-question label) */

/* :L2225 */
.product .ah-css-name > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Nested sub-fields — Title, First name, Last name */

/* :L2235 */
.product .ah-css-name .instanda-question-item.form-group {
  margin-bottom: var(--ah-space-3);
}
/* :L2238 */
.product .ah-css-name .instanda-question-item.form-group:last-child {
  margin-bottom: 0;
}
/* Field labels — First name / Last name only (Title has no field-level
   label, by instruction — see section note above) */

/* :L2244 */
.product .ah-css-name .instanda-question-inner-label label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* Inputs + select — fixed 50px, Slate resting border (distinct on the
   Mist Deep card), Navy on hover/focus with a soft Navy glow. Gold never
   used here. Covers the Title select and the First/Last name text inputs
   — all three share the .form-control class. */

/* :L2259 */
.product .ah-css-name .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L2273 */
.product .ah-css-name .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L2276 */
.product .ah-css-name .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L2279 */
.product .ah-css-name .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Title select — CSS-drawn caret exception (functional chrome only, no
   image-generation step in this build). Slate at rest, Navy on
   hover/focus, matching the input chrome above. */

/* :L2287 */
.product .ah-css-name select.form-control {
  /* Instanda often ships an ID-based width rule (e.g. #Customer_Title)
     for its own JS plugins — an ID always beats our class selector
     regardless of stylesheet order, so the select can silently shrink to
     its native content width, throwing off the caret position below.
     Force the width so our layout wins outright rather than depending
     on cascade order. */
  width: 100% !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--ah-surface-card);
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-heading) 50%), linear-gradient(135deg, var(--ah-color-heading) 50%, transparent 50%);
  /* right/center keyword syntax, not calc() — this build's CSS pipeline
     was flattening calc(100% - 22px) into a raw "78%", stripping the px
     unit and treating the whole expression as a plain percentage
     subtraction. right Npx center expresses the same offset with no
     arithmetic for anything to mangle. */
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
/* :L2313 */
.product .ah-css-name select.form-control:hover,
.product .ah-css-name select.form-control:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-primary) 50%), linear-gradient(135deg, var(--ah-color-primary) 50%, transparent 50%);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2322 */
.product .ah-css-name .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2335 */
  .product .ah-css-name {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   15 · Phone Number — entry point .ah-css-text
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question316288") so this is matched by class
   rather than hardcoded. A single plain text question — label + input +
   validation, no nested sub-fields — but still wrapped in the same Mist
   Deep "question container" as the vehicle/address/name questions: no
   border, no accent stripe, Slate-bordered white input stays distinct
   against the fill. Layout/grid classes (form-group, row, col-xs-11 …)
   are left alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L2351 */
.product .ah-css-text {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question label — "Phone Number" */

/* :L2359 */
.product .ah-css-text > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Input — fixed 50px, Slate resting border (distinct on the Mist Deep
   card), Navy on hover/focus with a soft Navy glow. Gold never used here. */

/* :L2370 */
.product .ah-css-text .instanda-question-input .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L2384 */
.product .ah-css-text .instanda-question-input .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L2387 */
.product .ah-css-text .instanda-question-input .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L2390 */
.product .ah-css-text .instanda-question-input .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2397 */
.product .ah-css-text .instanda-question-input + div + div .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2410 */
  .product .ah-css-text {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   16 · Policy start date — entry point .ah-css-date
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question316284") so this is matched by class
   rather than hardcoded. A single date question — label + date input with
   a calendar-glyph addon + validation, no nested sub-fields — wrapped in
   the same Mist Deep "question container" as the other questions: no
   border, no accent stripe, Slate-bordered white chrome stays distinct
   against the fill. The input + addon follow the guide's "input with
   addon" pattern: addon box stays minimal (white fill, matching Slate
   border, no colour fill), Teal applied only to the calendar glyph — never
   a solid Navy/Teal button block. Per the guide's "third-party popups
   unstyled" rule, the wiDatePicker calendar overlay itself is left with
   its native styling; only the static input/addon/label/validation are
   styled here. Layout/grid classes (form-group, row, col-xs-11 …) are
   left alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L2432 */
.product .ah-css-date {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question label — "When would you like the cover to start from? *" */

/* :L2440 */
.product .ah-css-date > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Date input + calendar addon — treated as a single field-group so the
   input and addon share one continuous 50px-tall chrome. */

/* :L2451 */
.product .ah-css-date .instanda-question-date {
  display: flex;
}
/* :L2455 */
.product .ah-css-date .instanda-question-date .form-control {
  flex: 1;
  min-width: 0;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L2471 */
.product .ah-css-date .instanda-question-date .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* Addon — white fill, matching Slate border, no colour block. Glyph only
   (glyphicon-calendar) carries the Teal accent. */

/* :L2477 */
.product .ah-css-date .instanda-question-date .input-group-addon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 0 8px 8px 0;
  transition: border-color 0.15s ease;
}
/* :L2489 */
.product .ah-css-date .instanda-question-date .input-group-addon .glyphicon-calendar {
  font-size: 16px;
  color: var(--ah-color-accent);
}
/* Hover / focus — Navy border across the whole group, soft Navy glow on
   the input side. Gold never used for input chrome. */

/* :L2496 */
.product .ah-css-date .instanda-question-date:hover .form-control,
.product .ah-css-date .instanda-question-date:hover .input-group-addon {
  border-color: var(--ah-color-primary);
}
/* :L2500 */
.product .ah-css-date .instanda-question-date:focus-within .form-control,
.product .ah-css-date .instanda-question-date:focus-within .input-group-addon {
  border-color: var(--ah-color-primary);
}
/* :L2504 */
.product .ah-css-date .instanda-question-date:focus-within .form-control {
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2510 */
.product .ah-css-date .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2523 */
  .product .ah-css-date {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   17 · Section header — entry point .ah-css-header
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question316285") so this is matched by class
   rather than hardcoded. Styled after the guide's HEADER / COVER pattern:
   flat Navy block, white H1 — no gold eyebrow, since the markup has no
   separate element for one and none should be invented. Rounded corners +
   card shadow so the block sits as a discrete component within the page
   rather than a full-bleed strip (matching how hero/spotlight are reused
   inline elsewhere in this system). Title stays at --ah-fs-title (this
   component's existing size) rather than the guide's larger 40px splash
   size, since this is a form section header, not a marketing cover.
   Layout/grid classes (container, row, col-xs-12) are left alone — only
   colour, type, spacing.
   ========================================================================= */

/* :L2543 */
.product .ah-css-header {
  background: var(--ah-color-primary);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-6) var(--ah-space-4);
  margin-left: auto;
  margin-right: auto;
}
/* Match Bootstrap 3's .container breakpoints/widths exactly, so the Navy
   block lines up with any other .container on the page rather than
   stretching to fill its parent. */

@media (min-width: 768px) {
  /* :L2556 */
  .product .ah-css-header {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  /* :L2559 */
  .product .ah-css-header {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  /* :L2562 */
  .product .ah-css-header {
    max-width: 1170px;
  }
}
/* :L2565 */
.product .ah-css-header h1 {
  margin: 0;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-title);
  font-weight: var(--ah-fw-bold);
  line-height: 1.2;
  color: var(--ah-text-on-dark);
  text-align: left;
}
@media (max-width: 700px) {
  /* :L2576 */
  .product .ah-css-header {
    padding: var(--ah-space-4);
  }
}
/* =========================================================================
   18 · Mandatory-fields notice — entry point .ah-css-header-text
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question316286") so this is matched by class
   rather than hardcoded. A single static text notice ("Fields marked with
   * are mandatory") — no input, no validation, nothing to lay out — so
   unlike the other .demo-css-* entries above this deliberately does NOT
   get the Mist Deep "question container" treatment (background, radius,
   shadow, padding): background is explicitly transparent and only a
   bottom margin separates it from whatever follows — it's plain inline
   caption text that sits quietly above a form rather than a data-entry
   component competing for a card. Ink Grey (muted), small size, bold for
   emphasis. Note: CSS cannot target the "*" character alone inside this
   plain text node (no wrapping element exists in the markup for it), so
   the whole line is bolded as the closest available emphasis; isolating
   the asterisk alone would need a small JS wrapper or a markup change.
   Where a <strong> tag is present, it's set to 900 (heavier than this
   component's own --ah-fw-bold weight) per instruction.
   Layout/grid classes (questionHeader, container, instanda-container-fluid)
   are left alone — only colour, type, spacing.
   ========================================================================= */

/* :L2604 */
.product .ah-css-header-text {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1.5;
  color: var(--ah-color-muted);
  background: transparent !important;
  margin-bottom: var(--ah-space-3);
}
/* :L2613 */
.product .ah-css-header-text strong {
  font-weight: 900;
}
@media (max-width: 700px) {
  /* :L2618 */
  .product .ah-css-header-text {
    margin-bottom: var(--ah-space-2);
  }
}
/* =========================================================================
   19 · Choice question (button-style radios) — entry point .ah-css-choice-parent
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question205738") so this is matched by class
   rather than hardcoded. Reuses Instanda's yes/no radio markup for a
   multi-option choice question (here: level of cover) — each option is a
   native radio wrapped in a label, and Instanda itself toggles
   "instanda-selected" / "instanda-unselected" on that label as the user
   picks an option, so selection state is read from those classes rather
   than :checked. Options render as full-width stacked buttons (labels are
   full sentences, not short yes/no answers) using the same two-tier Navy
   treatment as the action-link buttons elsewhere in this build: solid
   Navy fill for the selected option, Navy outline for the rest. The
   native radio dot is visually hidden — the label itself is already the
   full click target — so nothing indicates "this is a radio" beyond the
   button state. Card wrapper (Mist Deep, radius, shadow, padding) is
   scoped to .instanda-question-parent-yes-no only, not the whole
   .ah-css-choice-parent container, since that container also holds the
   Indemnity_Level_Children reveal — already styled independently via
   .ah-css-header-text — which shouldn't be nested inside this card.
   Layout/grid classes (form-group, row, col-xs-11 …) and the empty help
   column are left alone, per existing convention in this file.
   ========================================================================= */

/* :L2648 */
.product .ah-css-choice-parent > .instanda-question-parent-yes-no {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
  margin-left: -15px;
  margin-right: -15px;
}
/* Bootstrap's .container carries fixed max-widths at each breakpoint —
   override to auto so any nested .container inside the revealed
   Indemnity_Level_Children group (IPID/Policy Wording links, broker rate,
   cover summary — each already wrapped in .questionHeader.container by
   Instanda) sizes to this card's content width instead of Bootstrap's
   page-level breakpoints. */

/* :L2663 */
.product .ah-css-choice-parent #Indemnity_Level_Children .container {
  width: auto;
}
/* Question title — "Please choose your level of cover" */

/* :L2668 */
.product .ah-css-choice-parent > .instanda-question-parent-yes-no > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Option group — stacked full-width, one button per row */

/* :L2678 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input {
  display: flex;
  flex-direction: column;
}
/* Native radio dot hidden — the click target is unchanged since <label>
   already wraps the <input>. */

/* :L2685 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
/* Button-style option — full sentence labels, so kept at regular weight
   rather than the bold used on short CTA buttons, for readability. */

/* :L2695 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 var(--ah-space-2);
  padding: var(--ah-space-3) var(--ah-space-4);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: normal;
  line-height: 1.4;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* :L2711 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline:last-child {
  margin-bottom: 0;
}
/* Keyboard focus — no aria attributes available, so :focus-within on the
   label (the input itself is visually hidden but stays tabbable) gives
   keyboard users a visible ring the mouse never needs to see. */

/* :L2718 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline:focus-within {
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.25);
}
/* Unselected — Navy outline, transparent fill (guide's Tertiary treatment,
   matching .btn-default elsewhere in this build) */

/* :L2724 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline.instanda-unselected {
  background-color: transparent;
  border: 1.5px solid var(--ah-color-primary);
  color: var(--ah-color-primary);
}
/* :L2730 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline.instanda-unselected:hover {
  background-color: rgba(27, 44, 107, 0.06);
}
/* Selected — solid Navy fill, white text (guide's Secondary treatment,
   matching .btn-primary elsewhere in this build) */

/* :L2736 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline.instanda-selected {
  background-color: var(--ah-color-primary);
  border: 1.5px solid var(--ah-color-primary);
  color: var(--ah-text-on-dark);
}
/* :L2742 */
.product .ah-css-choice-parent .instanda-question-input > .instanda-question-input label.radio-inline.instanda-selected:hover {
  background-color: #142253;
  border-color: #142253;
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2749 */
.product .ah-css-choice-parent .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2762 */
  .product .ah-css-choice-parent > .instanda-question-parent-yes-no {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   20 · Document-link buttons — entry point .ah-css-header-buttons
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question205739") so this is matched by class rather
   than hardcoded. A variation of §18's .ah-css-header-text: same plain,
   no-card wrapper (transparent background, bottom margin only) since this
   is a document-links row rather than a data-entry component competing for
   a card, but here the two <a> tags (IPID / Policy Wording) are rendered as
   evenly-split outline Navy buttons instead of a text notice. Outline
   (tertiary) treatment throughout — matching .ah-css-choice-parent's unselected
   option and .btn-default elsewhere in this build — since neither link is
   a page's single primary CTA (Gold stays reserved for that).
   Note: Instanda emits a trailing "&nbsp;" text node after the two anchors
   inside .link-area. Non-breaking spaces aren't collapsed by the flexbox
   whitespace-only-text-run rule the way plain spaces are, so left alone it
   would render as a third, un-grown flex item and throw off the even
   split — font-size: 0 on .link-area (reset to the button's own font-size
   on the anchors) neutralises it without needing a markup change.
   ========================================================================= */

/* :L2788 */
.product .ah-css-header-buttons {
  background: transparent !important;
  margin-bottom: var(--ah-space-3);
}
/* :L2793 */
.product .ah-css-header-buttons .link-area {
  display: flex;
  gap: var(--ah-space-3);
  font-size: 0;
}
/* :L2799 */
.product .ah-css-header-buttons .link-area a {
  display: block;
  flex: 1 1 0;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  text-align: center;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--ah-color-primary);
  background: transparent;
  color: var(--ah-color-primary);
  text-decoration: none;
  cursor: pointer;
}
/* :L2816 */
.product .ah-css-header-buttons .link-area a:hover {
  background-color: rgba(27, 44, 107, 0.06);
}
@media (max-width: 700px) {
  /* :L2821 */
  .product .ah-css-header-buttons {
    margin-bottom: var(--ah-space-2);
  }
  /* :L2824 */
  .product .ah-css-header-buttons .link-area {
    flex-direction: column;
  }
}
/* =========================================================================
   21 · Confirmation checkbox — entry point .ah-css-confirm
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question205746") so this is matched by class rather
   than hardcoded. A single legal-confirmation checkbox wrapped in the same
   Mist Deep "question container" as the other questions — no extra revealed
   content nests inside this one (unlike .ah-css-choice-parent), so the card sits
   directly on the entry-point class.
   The checkbox markup nests the <input> INSIDE the <label>, with the
   .confirmQuestionText sibling OUTSIDE the label — so clicking the
   confirmation copy does not toggle the box; only the checkbox's own
   custom hit area does. This is a fixed Instanda markup order and, per the
   platform's no-HTML-modification rule, cannot be changed from here.
   Native checkbox visually hidden; a custom Slate-bordered box (::before)
   and CSS-drawn checkmark (::after, rotated border — no inline SVG) take
   over, matching the CSS-drawn caret/hidden-radio-dot pattern used
   elsewhere. Because the input sits inside the label rather than as its
   preceding sibling, the classic "input:checked + label" trick doesn't
   apply, and Instanda doesn't toggle a selection class on this control the
   way it does for the §19 choice radios — so checked state is read
   directly off :checked via label:has(input:checked).
   The confirmation text arrives as deeply nested WYSIWYG spans/<font> tags
   carrying inline font-family/font-size/color/font-weight — inline styles
   that beat any class selector, so overrides here use !important. The
   bold "Please confirm" run and the regular-weight explanation that
   follows share the same markup shape apart from one inline style value
   (font-weight: 700 vs 400), so — per the exact-attribute-value technique
   already used for action-link buttons — those exact values are the hook
   used to style the pair as a heading + body, per instruction, rather than
   flattening both to one uniform style.
   Layout/grid classes (questionItem, form-group, container) are left
   alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L2864 */
.product .ah-css-confirm {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* :L2871 */
.product .ah-css-confirm .confirmQuestionCheckbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ah-space-3);
  margin: 0;
}
/* Native input — kept in the DOM and hittable (for its own hit area,
   accessibility and form submission) but visually replaced below. */

/* :L2880 */
.product .ah-css-confirm .confirmQuestionCheckbox input[type="checkbox"] {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* :L2889 */
.product .ah-css-confirm .confirmQuestionCheckbox label {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  padding-left: 0;
  cursor: pointer;
}
/* Box — Slate at rest (distinct on the Mist Deep card), Navy fill once
   checked. Gold never used for form chrome. */

/* :L2902 */
.product .ah-css-confirm .confirmQuestionCheckbox label::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* :L2912 */
.product .ah-css-confirm .confirmQuestionCheckbox label:hover::before {
  border-color: var(--ah-color-primary);
}
/* :L2915 */
.product .ah-css-confirm .confirmQuestionCheckbox label:focus-within::before {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* :L2919 */
.product .ah-css-confirm .confirmQuestionCheckbox label:has(input:checked)::before {
  background: var(--ah-color-primary);
  border-color: var(--ah-color-primary);
}
/* Checkmark — CSS-drawn (rotated border corner), no inline SVG. Hidden
   until the box is checked. */

/* :L2926 */
.product .ah-css-confirm .confirmQuestionCheckbox label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--ah-text-on-dark);
  border-bottom: 2px solid var(--ah-text-on-dark);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity .1s ease;
}
/* :L2939 */
.product .ah-css-confirm .confirmQuestionCheckbox label:has(input:checked)::after {
  opacity: 1;
}
/* Confirmation copy — heading + body pair carved out of the WYSIWYG
   markup's inline styles (see section note above). */

/* :L2945 */
.product .ah-css-confirm .confirmQuestionText,
.product .ah-css-confirm .confirmQuestionText * {
  font-family: var(--ah-font) !important;
}
/* :L2949 */
.product .ah-css-confirm .confirmQuestionText > div {
  line-height: 1.5;
}
/* :L2952 */
.product .ah-css-confirm .confirmQuestionText span[style="font-weight: 700"] {
  display: inline-block;
  margin-bottom: var(--ah-space-1);
  color: var(--ah-color-primary) !important;
  font-size: var(--ah-fs-section) !important;
}
/* :L2958 */
.product .ah-css-confirm .confirmQuestionText span[style="font-weight: 400"] {
  color: var(--ah-text-body) !important;
  font-size: var(--ah-fs-body) !important;
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L2965 */
.product .ah-css-confirm .instanda-question-validation-message-confirm {
  margin-top: var(--ah-space-2);
}
/* :L2968 */
.product .ah-css-confirm .instanda-question-validation-message-confirm .label.label-danger {
  display: inline-block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L2980 */
  .product .ah-css-confirm {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   22 · Choice question (dropdown select) — entry point .ah-css-choice
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question205743") so this is matched by class
   rather than hardcoded. A single-select dropdown question (here: Policy
   Type) wrapped in the same Mist Deep "question container" as the other
   questions — card sits directly on the entry-point class, no nested
   reveal content. Select chrome (fixed height, Slate border, CSS-drawn
   caret) reuses the exact §14 .ah-css-name Title-select pattern for
   consistency across every dropdown in this build. The disabled
   "other answer" text box (Instanda's optional free-text fallback when the
   last dropdown option is picked) never renders into the DOM while turned
   off in this question's config, so no markup exists yet to style it.
   Layout/grid classes (form-group, row, col-xs-11 …) and the empty help
   column are left alone, per existing convention in this file.
   ========================================================================= */

/* :L3001 */
.product .ah-css-choice {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question title — "Policy Type" */

/* :L3009 */
.product .ah-css-choice > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* Select — fixed 50px, Slate resting border (distinct on the Mist Deep
   card), Navy on hover/focus with a soft Navy glow. Gold never used here. */

/* :L3020 */
.product .ah-css-choice .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L3034 */
.product .ah-css-choice .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L3037 */
.product .ah-css-choice .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* CSS-drawn caret exception (functional chrome only, no image-generation
   step in this build). Slate at rest, Navy on hover/focus, matching the
   select chrome above. */

/* :L3045 */
.product .ah-css-choice select.form-control {
  /* Instanda often ships an ID-based width rule (e.g. #PolicyType) for its
     own JS plugins — an ID always beats our class selector regardless of
     stylesheet order, so the select can silently shrink to its native
     content width, throwing off the caret position below. Force the width
     so our layout wins outright rather than depending on cascade order. */
  width: 100% !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--ah-surface-card);
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-heading) 50%), linear-gradient(135deg, var(--ah-color-heading) 50%, transparent 50%);
  /* right/center keyword syntax, not calc() — this build's CSS pipeline
     was flattening calc(100% - 22px) into a raw "78%", stripping the px
     unit and treating the whole expression as a plain percentage
     subtraction. right Npx center expresses the same offset with no
     arithmetic for anything to mangle. */
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
/* :L3070 */
.product .ah-css-choice select.form-control:hover,
.product .ah-css-choice select.form-control:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-primary) 50%), linear-gradient(135deg, var(--ah-color-primary) 50%, transparent 50%);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L3079 */
.product .ah-css-choice .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L3092 */
  .product .ah-css-choice {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   23 · Number question (currency-prefixed) — entry point .ah-css-number
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, ID carries a per-question
   numeric suffix (e.g. "question205761") so this is matched by class
   rather than hardcoded. A single number question — label + numeric input
   with a "£" prefix addon + validation, no nested sub-fields — wrapped in
   the same Mist Deep "question container" as the other questions. Input +
   addon follow the same "input with addon" pattern as §16 .ah-css-date,
   mirrored left-to-right since the addon here prepends rather than
   appends: addon box stays minimal (white fill, matching Slate border, no
   colour fill), Teal applied only to the "£" symbol — never a solid
   Navy/Teal button block. Layout/grid classes (form-group, row,
   col-xs-11 …) are left alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L3111 */
.product .ah-css-number {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Question label — "Client Retail Price inc IPT" */

/* :L3119 */
.product .ah-css-number > .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* "£" addon + number input — treated as a single field-group so both
   share one continuous 50px-tall chrome. */

/* :L3130 */
.product .ah-css-number .input-group {
  display: flex;
}
/* Addon — white fill, matching Slate border, no colour block. Symbol only
   carries the Teal accent. */

/* :L3136 */
.product .ah-css-number .input-group-addon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-accent);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-right: none;
  border-radius: 8px 0 0 8px;
  transition: border-color 0.15s ease;
}
/* :L3154 */
.product .ah-css-number .form-control {
  flex: 1;
  min-width: 0;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 0 8px 8px 0;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L3169 */
.product .ah-css-number .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* Hover / focus — Navy border across the whole group, soft Navy glow on
   the input side. Gold never used for input chrome. */

/* :L3175 */
.product .ah-css-number .input-group:hover .form-control,
.product .ah-css-number .input-group:hover .input-group-addon {
  border-color: var(--ah-color-primary);
}
/* :L3179 */
.product .ah-css-number .input-group:focus-within .form-control,
.product .ah-css-number .input-group:focus-within .input-group-addon {
  border-color: var(--ah-color-primary);
}
/* :L3183 */
.product .ah-css-number .input-group:focus-within .form-control {
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L3189 */
.product .ah-css-number .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L3202 */
  .product .ah-css-number {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   24 · Quote summary (label/value rows) — entry point .summary
   -------------------------------------------------------------------------
   Instanda-generated content-page markup (Quote display / Sale
   confirmation), not a "question" — there's no assignable custom CSS
   class field here, so this is hooked directly on Instanda's own fixed
   classes (.summary, .line-item, .title, .variable) rather than an
   ah-css-* entry point. Card-wrapped list of label/value rows, two-column
   receipt style (label left, value right), each row separated by a
   hairline. Two rows ship with an extra "main-detail" class (Broker Price
   ex IPT, Package Selected) and are emphasised at section-title size/
   weight so price and package selection read as the headline info.
   Several rows (Home Phone, Mobile Phone, Email Address) can render with
   no captured data on a given quote — sometimes as a truly empty
   .variable.item-value, sometimes as a single literal space character.
   CSS's :empty only matches the former (a space is one character of
   content, so it doesn't count as empty by spec), and there's no
   selector for "content is whitespace-only", so hiding one case and not
   the other would make quotes look inconsistent depending on which one
   Instanda happened to render — every row is left visible instead, per
   instruction, so every quote looks the same regardless of which case
   applies.
   Final row is a bare .line-item with no title/variable, just Instanda's
   Edit link (class="btn btn-primary instanda_nav_link") — styled as the
   same solid Navy button used for the vehicle lookup action (§12) and
   other .btn-primary instances in this build, right-aligned, with the
   row-divider styling stripped since it isn't a label/value pair.
   ========================================================================= */

/* :L3234 */
.product .summary {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
  margin-top: var(--ah-space-4);
  margin-bottom: var(--ah-space-4);
}
/* :L3243 */
.product .summary .line-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: var(--ah-space-4);
  row-gap: var(--ah-space-1);
  padding: var(--ah-space-3) 0;
  border-bottom: 1px solid rgba(27, 44, 107, 0.12);
}
/* :L3253 */
.product .summary .line-item:last-child {
  border-bottom: none;
  padding-top: var(--ah-space-4);
  justify-content: flex-end;
}
/* Label / value — regular rows */

/* :L3260 */
.product .summary .line-item > .title.item-value {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: normal;
  color: var(--ah-color-heading);
}
/* :L3266 */
.product .summary .line-item > .variable.item-value {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: normal;
  color: var(--ah-color-primary);
  text-align: right;
}
/* Label / value — main-detail rows (Broker Price ex IPT, Package Selected) */

/* :L3275 */
.product .summary .line-item.main-detail > .title.item-value {
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* :L3280 */
.product .summary .line-item.main-detail > .variable.item-value {
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* Edit link — Instanda's own .btn.btn-primary, restyled to the same solid
   Navy button used elsewhere in this build (see §12). */

/* :L3288 */
.product .summary .line-item:last-child a.btn.btn-primary {
  display: inline-block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
/* :L3304 */
.product .summary .line-item:last-child a.btn.btn-primary:hover,
.product .summary .line-item:last-child a.btn.btn-primary:focus {
  background: #142253;
  color: var(--ah-text-on-dark);
  text-decoration: none;
}
/* :L3310 */
.product .summary .line-item:last-child a.btn.btn-primary:active {
  background: #0f1a40;
}
@media (max-width: 700px) {
  /* :L3315 */
  .product .summary {
    padding: var(--ah-space-3);
  }
  /* :L3316 */
  .product .summary .line-item {
    flex-direction: column;
    align-items: flex-start;
  }
  /* :L3320 */
  .product .summary .line-item > .variable.item-value {
    text-align: left;
  }
  /* :L3323 */
  .product .summary .line-item:last-child {
    align-items: flex-end;
  }
}
/* =========================================================================
   25 · Purchase confirmation — entry point .instanda-confirmation-details
   -------------------------------------------------------------------------
   Instanda-generated content-page markup (Sale/Purchase confirmation),
   not a "question" — there's no assignable custom CSS class field here,
   so this is hooked directly on Instanda's own fixed classes rather than
   an ah-css-* entry point. Card body (Mist Deep) with the page's h3
   ("Purchase Confirmation") rendered as a full-bleed Navy banner across
   the card's top edge, matching §17's HEADER/COVER pattern — negative
   margins on the wrapping .instanda-container-fluid pull it out to the
   card's own padding edges rather than sitting indented like the body
   copy below it.
   Every content block in this markup (.instanda-questionHeader,
   .instanda-upper-content, .instanda-documents) also carries Bootstrap's
   .container class, which would otherwise impose page-level breakpoint
   max-widths and its own side padding inside our already-padded card —
   same issue as §19's Indemnity_Level_Children fix, applied blanket here
   since it recurs on nearly every child.
   Body copy arrives as WYSIWYG spans with inline font-family (Verdana)
   and colour — overridden with !important per the guide's Arial-only
   rule, same technique as §21's confirmation checkbox copy. The icon
   glyphs (<i class="fa fa-file-pdf">) are excluded from the font-family
   override so Font Awesome's own icon font isn't clobbered.
   The Policy Number line and the thank-you/contact paragraphs share
   identical classes and inline styles apart from one detail: the
   thank-you/contact copy nests a third "line-height: 107%" span around
   its text, Policy Number doesn't — so :not(:has(span)) on the innermost
   span isolates Policy Number as the only "leaf" span, per the guide's
   exact-attribute-value technique, and is used to bold it as the page's
   key reference number.
   Document links (Policy Wording, IPID, Policy Schedule) reuse §20's
   outline-Navy pill treatment, stacked one per row at a fixed 280px
   width per instruction. The fa-file-pdf icons are hidden outright
   (display: none) rather than styled — with a fixed pill width and no
   icon, the two markup shapes (icon+link wrapped in .hidefooterDocLink
   vs. bare sibling <i>/<a>) collapse to the same visible result, so the
   split-layout handling the icon previously needed no longer applies.
   ========================================================================= */

/* :L3367 */
.product .instanda-confirmation-details {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Bootstrap's .container carries fixed max-widths/padding at each
   breakpoint — override to auto/zero so every nested .container in this
   markup sizes to the card's own content width instead. */

/* :L3377 */
.product .instanda-confirmation-details .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Header banner — bleeds to the card's edges via negative margin so it
   reads as a full-bleed strip across the top, not an indented block.
   Literal -24px rather than calc(-1 * var(--ah-space-4)) — this build's
   CSS pipeline mangles calc() (see the background-position gotcha
   elsewhere in this file), so the offset is hardcoded to match the
   token's current value instead. */

/* :L3390 */
.product .instanda-confirmation-details > .instanda-container-fluid {
  background: transparent !important;
  margin: -24px -24px var(--ah-space-4);
}
/* :L3394 */
.product .instanda-confirmation-details .instanda-questionHeader.container {
  background: var(--ah-color-primary);
  border-radius: var(--ah-radius-card) var(--ah-radius-card) 0 0;
  padding: var(--ah-space-4);
}
/* :L3399 */
.product .instanda-confirmation-details .instanda-questionHeader.container h3 {
  margin: 0;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-title);
  font-weight: var(--ah-fw-bold);
  line-height: 1.2;
  color: var(--ah-text-on-dark);
}
/* Body copy — WYSIWYG spans carrying inline Verdana/colour, overridden to
   the brand font. Icons keep their own icon font. */

/* :L3410 */
.product .instanda-confirmation-details .instanda-upper-content,
.product .instanda-confirmation-details .instanda-upper-content *:not(i) {
  font-family: var(--ah-font) !important;
}
/* :L3414 */
.product .instanda-confirmation-details .instanda-upper-content {
  font-size: var(--ah-fs-body);
  line-height: 1.6;
  color: var(--ah-text-body);
}
/* :L3419 */
.product .instanda-confirmation-details .instanda-upper-content a {
  color: var(--ah-color-primary) !important;
  text-decoration: underline !important;
}
/* :L3423 */
.product .instanda-confirmation-details .instanda-upper-content a * {
  color: inherit !important;
  text-decoration: inherit !important;
}
/* Policy Number — the only "leaf" span in this markup (no nested
   line-height span), per the section note above. */

/* :L3430 */
.product .instanda-confirmation-details .instanda-upper-content > span[style="font-size: 14px"] > span[style="font-family: Verdana, Geneva, sans-serif"]:not(:has(span)) {
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* Document links — outline Navy pills, matching §20, stacked one per row
   at a fixed (card-width) size rather than wrapping inline. */

/* :L3437 */
.product .instanda-documents {
  display: flex;
  flex-direction: column;
  gap: var(--ah-space-2);
  margin-top: var(--ah-space-2);
}
/* :L3443 */
.product .instanda-documents .hidefooterDocLink,
.product .instanda-documents > i.fa-file-pdf + a {
  display: flex;
  align-items: center;
  width: 280px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1.5px solid var(--ah-color-primary);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* :L3460 */
.product .instanda-documents .hidefooterDocLink:hover,
.product .instanda-documents > i.fa-file-pdf + a:hover {
  background-color: rgba(27, 44, 107, 0.06);
}
/* The body-copy link rule above (.instanda-upper-content a) outranks the
   pill styling here on class count alone, so the anchor's underline needs
   its own explicit, equally-specific override. */

/* :L3468 */
.product .instanda-confirmation-details .instanda-upper-content .instanda-documents a {
  color: inherit !important;
  text-decoration: none !important;
}
/* Icons hidden per instruction — covers both markup shapes (wrapped in
   .hidefooterDocLink, or the bare sibling <i> on the third document). */

/* :L3475 */
.product .instanda-documents i.fa-file-pdf {
  display: none;
}
@media (max-width: 700px) {
  /* :L3480 */
  .product .instanda-confirmation-details {
    padding: var(--ah-space-3);
  }
  /* :L3481 */
  .product .instanda-confirmation-details > .instanda-container-fluid {
    margin: -16px -16px var(--ah-space-3);
  }
  /* :L3484 */
  .product .instanda-confirmation-details .instanda-questionHeader.container {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   26 · Agent all documents — customer documents list
   Entry point: .agent-all-docs-responsive (Instanda's own markup — a
   utility page listing a policy's generated documents for the agent to
   open/download, a Re-generate action, and a media-preview modal). No
   assignable custom-class field on this page type, so styled directly on
   Instanda's own fixed classes/IDs, same approach as §24/§25's content
   pages elsewhere in this file.
   ========================================================================= */

/* :L3499 */
.product .agent-all-docs-responsive {
  background: var(--ah-surface-card);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-5);
}
/* :L3505 */
.product .agent-all-docs-responsive h3 {
  margin: 0 0 var(--ah-space-4);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* Document list — outline-Navy buttons, matching the document-link
   treatment used elsewhere in this build (§20, §25). The markup's own
   inline <style>li{margin-bottom:10px}</style> loses out here on
   specificity alone (ID + two classes vs. a bare element selector), no
   !important needed. */

/* :L3518 */
.product .agent-all-docs-responsive #documentsList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ah-space-2);
}
/* :L3526 */
.product .agent-all-docs-responsive #documentsList li {
  margin: 0;
}
/* :L3529 */
.product .agent-all-docs-responsive #documentsList li a {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  text-decoration: none;
  border: 1.5px solid var(--ah-color-primary);
  border-radius: 8px;
  padding: 13px 18px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* :L3542 */
.product .agent-all-docs-responsive #documentsList li a:hover {
  background-color: rgba(27, 44, 107, 0.06);
}
/* Media-preview modal — no .modal-header in this markup, so there's no
   Navy header band to carry the brand colour; only the card chrome and
   Close button are styled. */

/* :L3549 */
.product #modalDialog .modal-dialog {
  max-width: 640px;
  margin: 40px auto;
}
/* :L3553 */
.product #modalDialog .modal-content {
  border: none;
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
}
/* :L3559 */
.product #modalDialog .modal-body {
  padding: var(--ah-space-4);
  text-align: center;
}
/* :L3563 */
.product #modalDialog .modal-footer {
  border: none;
  padding: 0 var(--ah-space-4) var(--ah-space-4);
}
/* :L3567 */
.product #modalDialog .modal-footer::before,
.product #modalDialog .modal-footer::after {
  content: none;
  display: none;
}
/* :L3572 */
.product #modalDialog .modal-footer .btn.btn-default {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 11px 22px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L3584 */
.product #modalDialog .modal-footer .btn.btn-default:hover {
  background: var(--ah-mist);
}
/* Re-generate Documents — a utility action within the page, not a
   destructive one, so it takes the solid-Navy Secondary treatment (Gold
   stays reserved elsewhere) rather than Bootstrap's own warning colour. */

/* :L3591 */
.product .documents-regenerate {
  margin-top: var(--ah-space-4);
}
/* :L3594 */
.product .documents-regenerate .btn.btn-warning {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  margin-bottom: var(--ah-space-3);
  cursor: pointer;
}
/* :L3609 */
.product .documents-regenerate .btn.btn-warning:hover,
.product .documents-regenerate .btn.btn-warning:focus {
  background: var(--ah-navy-deep);
}
/* :L3613 */
.product .documents-regenerate .btn.btn-warning:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* "Quote is missing" notice — plain inline error text, matching the
   error colour used throughout this build; Bootstrap's own
   .validation-summary-errors panel/border is stripped back here. Shown/
   hidden by the page's own JS via inline display, so only its look once
   visible is set here. */

/* :L3623 */
.product #quoteIsMissing.validation-summary-errors {
  margin-top: var(--ah-space-3);
  padding: 0;
  background: none;
  border: none;
}
/* :L3629 */
.product #quoteIsMissing.validation-summary-errors label {
  margin: 0;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
/* Back — tertiary Navy-outline action. Matched by its onclick handler
   (exact-attribute-value technique, per the guide) since this button
   carries no unique class or ID and site.css's own .btn-default mapping
   doesn't reach this markup, which sits outside .site. */

/* :L3641 */
.product button.btn.btn-default[onclick="GoBack()"] {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 11px 22px;
  border-radius: 8px;
  line-height: 1;
  margin-bottom: var(--ah-space-3);
  cursor: pointer;
}
/* :L3654 */
.product button.btn.btn-default[onclick="GoBack()"]:hover {
  background: var(--ah-mist);
}
@media (max-width: 700px) {
  /* :L3659 */
  .product .agent-all-docs-responsive {
    padding: var(--ah-space-4);
  }
  /* :L3660 */
  .product #modalDialog .modal-dialog {
    margin: var(--ah-space-4) var(--ah-space-3);
  }
}
/* =========================================================================
   27 · Multi-item repeater (e.g. Vehicles) — entry point .ah-css-multi-item
   -------------------------------------------------------------------------
   Instanda-generated markup — classes are fixed, IDs carry per-question/
   per-item numeric suffixes (e.g. "342988", "32828") so these are matched
   by class rather than hardcoded. One "question" made up of: an
   instructional line, a summary table of already-added items (label header
   row + one answer row per item, each row exposing Edit/Hide + Remove),
   and a per-item edit panel (cloned from a display:none template on "Add")
   holding the item's own sub-fields plus Save/Cancel/Remove, and an
   Add/Bulk-upload footer, plus the bulk-upload dialog itself (native file
   controls, download links, progress bar) and its three result banners.
   Styled incrementally against the actual HTML each step revealed —
   everything the "Add Vehicles" click reveals (the summary row and the
   edit panel, including both remove-confirmation modals reachable from
   it) plus the bulk-upload flow are covered here now. The template-cloned
   per-item toast messages ("Changes saved.", "Item removed.", etc. in
   <template id="multi-item-…-messages">) are a separate surface (they
   attach near an item row after a Save/Remove action, not part of the
   bulk-upload dialog) and aren't covered yet.
   Same Mist Deep "question container" card as every other .ah-css-* entry
   point in this file — this is one question, just a repeating one.
   Unlike this build's other single-field questions, the item panel's own
   sub-fields (VehicleReg/Manufacturer/Model) don't carry .ah-css-text —
   Instanda's multi-item clone strips that custom class off — so their
   label/input chrome is styled directly here on Instanda's own fixed
   classes (.instanda-question-label, .instanda-text-question,
   .instanda-question-input, .form-control) rather than inherited from
   §15, matching that section's look without relying on its hook.
   Bootstrap's .container carries fixed max-widths/padding at each
   breakpoint — reset the same way as §19/§25 so the several nested
   .container wrappers in this markup (summary row, item panel, add/remove
   footer) size to the card's own content width instead.
   Two confirmation modals (remove-from-summary-row, remove-from-item-panel)
   share identical classes bar their id suffix, so one set of rules below
   covers both — same Navy-header/white-body pattern as the Notes modal
   (general-container.css §12), including the Bootstrap clearfix override
   the CSS guidelines flag for .modal-header/.modal-footer.
   Remove actions (both the compact summary-row button and the standalone
   "Remove Vehicles" button, which share the same .instanda-multi-item-remove
   class) use the error-red outline treatment rather than Navy, reading as
   a delete action even though a confirmation modal sits behind the click —
   consistent with the Abandon-action red used elsewhere in this build.
   Both Remove buttons ship disabled while the item count sits at this
   question's configured minimum (1), so a dimmed disabled state is
   included alongside Cancel's.
   "Add Vehicles" is this component's own primary constructive action (not
   the page's single Gold CTA — Gold stays reserved), so it takes the solid
   Navy treatment; "Bulk upload" is the alternate path to the same result,
   so it takes the Navy outline tertiary treatment instead.
   Layout/grid classes (questionItem, form-group, row, col-xs-11 …) and
   Instanda's own summary-grid column classes (…-3-summary-cols) are left
   alone — only colour, type, radius, spacing.
   ========================================================================= */

/* :L3718 */
.product .ah-css-multi-item {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* :L3725 */
.product .ah-css-multi-item .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Instanda re-parents a saved item's summary row from its original "blank
   summary line" wrapper (col-xs-12 col-sm-6 col-md-6 col-lg-6) into the
   header block once it settles, but not always — a newly-added item's row
   can still sit inside that wrapper, which halves its width on ≥768px
   screens. That squeezes the row's "3-summary-cols" grid into half the
   space the header above it uses, breaking column alignment. Reset to
   full width so a summary row lines up under the header the same way
   regardless of which of the two locations Instanda left it in. This is
   the generic Bootstrap grid column class, not Instanda's own
   summary-grid system (…-3-summary-cols, left alone elsewhere in this
   file) — col-xs-12 makes it distinguishable from the field/help-column
   split used inside each question (col-xs-11 / col-xs-1). */

/* :L3744 */
.product .ah-css-multi-item .col-xs-12.col-sm-6.col-md-6.col-lg-6 {
  width: 100%;
  float: none;
}
/* Instructional line — "Please enter between one and fifty items", plain
   muted caption copy sitting above the data, same treatment as §18's
   mandatory-fields notice rather than a bold question title. */

/* :L3752 */
.product .ah-css-multi-item .instanda-question-multi-item-question-text-label .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-muted);
  margin: 0 0 var(--ah-space-3);
}
/* Summary header row — compact uppercase caption labels over a hairline,
   like a table head. */

/* :L3763 */
.product .ah-css-multi-item .instanda-multi-item-summary-header {
  padding-bottom: var(--ah-space-2);
  border-bottom: 1.5px solid var(--ah-color-primary);
  margin-bottom: var(--ah-space-1);
}
/* :L3768 */
.product .ah-css-multi-item .instanda-multi-item-summary-header-label,
.product .ah-css-multi-item .instanda-multi-item-summary-header-action {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
}
/* One answer row per added item — hairline-separated, matching §24's
   .summary .line-item rhythm. */

/* :L3780 */
.product .ah-css-multi-item .instanda-multi-item-summary-item {
  padding: var(--ah-space-3) 0;
  border-bottom: 1px solid rgba(27, 44, 107, 0.12);
}
/* :L3784 */
.product .ah-css-multi-item .instanda-multi-item-summary-answer {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
}
/* "Draft" chip — Teal, not Gold (Gold stays this page's single reserved
   CTA accent), for an item that's been added but not yet saved. */

/* :L3792 */
.product .ah-css-multi-item .draft-chip {
  display: inline-block;
  margin-left: var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: 11px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-accent) !important;
  border: none;
  padding: 3px 10px;
}
/* Row actions (Edit/Hide + Remove) — compact tertiary buttons. This li's
   own display is left alone (it's Instanda's "-3-summary-cols" grid
   column, not a plain layout wrapper — forcing display:flex on it here
   broke it out of that grid, dropping the buttons onto their own line
   below the row instead of into the Actions column); only colour/type/
   size is set below, letting the native inline button + .pull-right
   float position the pair same as Instanda's own default. */

/* Edit/Hide toggle — tertiary Navy outline, matching .btn-default elsewhere
   in this build. */

/* :L3814 */
.product .ah-css-multi-item .instanda-single-multi-item-edit.btn.btn-default {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 8px 16px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L3826 */
.product .ah-css-multi-item .instanda-single-multi-item-edit.btn.btn-default:hover {
  background: var(--ah-mist);
}
/* Remove (summary row + the standalone "Remove Vehicles" button below the
   item panel both carry this same class) — error-red outline, reading as a
   delete action even though a confirmation modal always sits behind it.
   Dimmed when Instanda disables it (item count at this question's
   configured minimum). */

/* :L3835 */
.product .ah-css-multi-item .instanda-multi-item-remove.btn.btn-default {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
  background: transparent;
  border: 1.5px solid var(--ah-error);
  padding: 8px 16px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L3847 */
.product .ah-css-multi-item .instanda-multi-item-remove.btn.btn-default:hover {
  background: rgba(192, 57, 43, 0.08);
}
/* :L3850 */
.product .ah-css-multi-item .instanda-multi-item-remove.btn.btn-default:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}
/* Standalone "Remove Vehicles" button — same red-outline look, full-size
   padding since it stands alone rather than sharing a compact row. */

/* :L3858 */
.product .ah-css-multi-item .instanda-multi-item-add-remove .instanda-multi-item-remove.btn.btn-default {
  padding: 11px 22px;
}
/* Per-item edit panel — hairline above rather than another nested card, so
   several stacked "Vehicles N" panels read as sections of one card, not a
   stack of cards-within-a-card. */

/* :L3865 */
.product .ah-css-multi-item .instanda-multi-item {
  padding-top: var(--ah-space-4);
  margin-top: var(--ah-space-4);
  border-top: 1px solid rgba(27, 44, 107, 0.12);
}
/* :L3870 */
.product .ah-css-multi-item .instanda-multi-item-header h3 {
  margin: 0 0 var(--ah-space-3);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* The h3's own wrapping .instanda-container-fluid ships an Instanda
   background that would otherwise sit as a stray fill behind the "Vehicles
   N" heading — same override as general-container.css's base rule for
   this class, needed again here since this instance sits inside its own
   nested stacking context. */

/* :L3883 */
.product .ah-css-multi-item .instanda-multi-item .instanda-container-fluid {
  background-color: transparent !important;
}
/* Item sub-fields (Vehicle Registration / Manufacturer / Model) — no
   .ah-css-text hook on the clone (see section note above), so label/input
   chrome is built directly on Instanda's own fixed classes instead,
   matching §15's look. Stacked with a bottom margin rather than each
   getting its own Mist Deep card, since they already sit inside this
   card — same "hairline not nested cards" approach as §12. */

/* :L3893 */
.product .ah-css-multi-item .instanda-multi-item .questionItem.form-group {
  margin-bottom: var(--ah-space-3);
}
/* :L3896 */
.product .ah-css-multi-item .instanda-multi-item .questionItem.form-group:last-of-type {
  margin-bottom: 0;
}
/* :L3899 */
.product .ah-css-multi-item .instanda-multi-item .instanda-question-label > .control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* :L3909 */
.product .ah-css-multi-item .instanda-multi-item .instanda-question-input .form-control {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L3923 */
.product .ah-css-multi-item .instanda-multi-item .instanda-question-input .form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L3926 */
.product .ah-css-multi-item .instanda-multi-item .instanda-question-input .form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L3929 */
.product .ah-css-multi-item .instanda-multi-item .instanda-question-input .form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* :L3933 */
.product .ah-css-multi-item .instanda-multi-item .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
/* Save changes — solid Navy primary, the item panel's main action. Neither
   Save nor Cancel carries a distinguishing class beyond bare .btn (Save
   also has .btn-default, Cancel doesn't), so — per the guide's exact-
   attribute-value technique already used for the Back button — their
   onclick handlers are the hook. */

/* :L3950 */
.product .ah-css-multi-item button.btn.btn-default[onclick="saveMultiItemInstance(this)"] {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L3964 */
.product .ah-css-multi-item button.btn.btn-default[onclick="saveMultiItemInstance(this)"]:hover {
  background: var(--ah-navy-deep);
}
/* Cancel — plain ghost text button, lower emphasis than Save; dims further
   when Instanda disables it (no pending changes to cancel). */

/* :L3970 */
.product .ah-css-multi-item button.btn[onclick="resetMultiItemInstance(this)"] {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  box-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
/* :L3983 */
.product .ah-css-multi-item button.btn[onclick="resetMultiItemInstance(this)"]:hover {
  background: var(--ah-mist);
}
/* :L3986 */
.product .ah-css-multi-item button.btn[onclick="resetMultiItemInstance(this)"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}
/* Remove-confirmation modals — two instances in this markup (summary row +
   item panel), sharing identical classes bar an id suffix, so one set of
   rules covers both. Same Navy-header/white-body pattern — and the same
   560px width and scrollable-body max-height — as this site's other
   modals (hp-modal §11 / login-modal, general-container.css). */

/* :L3997 */
.product .ah-css-multi-item .modal-dialog {
  max-width: 560px;
  margin: 40px auto;
}
/* :L4001 */
.product .ah-css-multi-item .modal-content {
  border: none;
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}
/* Bootstrap's default modal-header relies on the title floating inline and
   .close floating right — the two don't share a common vertical center,
   so title and close icon sit at slightly different heights. Flex here
   instead, matching the cleaner alignment this site's other modals
   (hp-modal/login-modal) already use for their title + close pairing. */

/* :L4015 */
.product .ah-css-multi-item .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ah-space-3);
  background: var(--ah-color-primary);
  border: none;
  border-radius: 0;
  padding: 18px 22px;
}
/* :L4025 */
.product .ah-css-multi-item .modal-title {
  margin: 0;
  color: var(--ah-text-on-dark);
  font-size: 17px;
  font-weight: var(--ah-fw-bold);
}
/* :L4031 */
.product .ah-css-multi-item .modal-header .close {
  float: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ah-text-on-dark);
  background: none;
  border: none;
  opacity: 0.85;
  text-shadow: none;
}
/* :L4043 */
.product .ah-css-multi-item .modal-header .close:hover {
  opacity: 1;
}
/* :L4046 */
.product .ah-css-multi-item .modal-body {
  background: var(--ah-surface-card);
  padding: 22px;
  color: var(--ah-text-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
}
/* Bootstrap's default footer floats its buttons (.pull-left / .pull-right)
   — this site's other modals lay their footer out with flex instead
   (hp-modal__footer / login-modal__footer: justify-content: flex-end).
   Adapted to space-between here since this footer holds two buttons
   (Close + Remove Item) rather than the single Close those modals have,
   keeping Close left / Remove Item right without relying on floats. */

/* :L4061 */
.product .ah-css-multi-item .modal-footer {
  display: flex;
  justify-content: space-between;
  background: var(--ah-surface-card);
  border: none;
  padding: 16px 22px 22px;
}
/* Bootstrap's own clearfix on .modal-header/.modal-footer (::before/::after
   { display:table; content:" "; }) otherwise becomes a stray flex item —
   same fix as §26's #modalDialog. */

/* :L4071 */
.product .ah-css-multi-item .modal-header::before,
.product .ah-css-multi-item .modal-header::after,
.product .ah-css-multi-item .modal-footer::before,
.product .ah-css-multi-item .modal-footer::after {
  content: none;
  display: none;
}
/* :L4078 */
.product .ah-css-multi-item .modal-footer .btn {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  line-height: 1;
  padding: 11px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  float: none;
  margin: 0;
}
/* :L4090 */
.product .ah-css-multi-item .modal-footer .btn.pull-left {
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
}
/* :L4095 */
.product .ah-css-multi-item .modal-footer .btn.pull-left:hover {
  background: var(--ah-mist);
}
/* :L4098 */
.product .ah-css-multi-item .modal-footer .btn-danger.pull-right {
  color: var(--ah-text-on-dark);
  background: var(--ah-error);
}
/* :L4102 */
.product .ah-css-multi-item .modal-footer .btn-danger.pull-right:hover {
  background: #a53226;
}
/* :L4105 */
.product .ah-css-multi-item .modal-backdrop.in {
  background: var(--ah-navy);
  opacity: 0.55;
}
/* Add / Bulk-upload footer — Add is this component's own primary action
   (solid Navy, not Gold — Gold stays this page's single reserved CTA);
   Bulk upload is the alternate path to the same result (Navy outline). */

/* :L4113 */
.product .ah-css-multi-item .instanda-multi-item-add.btn.btn-default {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  margin: var(--ah-space-4) var(--ah-space-2) 0 0;
  cursor: pointer;
}
/* :L4128 */
.product .ah-css-multi-item .instanda-multi-item-add.btn.btn-default:hover {
  background: var(--ah-navy-deep);
}
/* :L4131 */
.product .ah-css-multi-item .instanda-multi-item-add.btn.btn-default:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* :L4135 */
.product .ah-css-multi-item .instanda-multi-item-upload-add.btn.btn-default {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  margin: var(--ah-space-4) 0 0;
  cursor: pointer;
}
/* :L4148 */
.product .ah-css-multi-item .instanda-multi-item-upload-add.btn.btn-default:hover {
  background: var(--ah-mist);
}
/* Bulk-upload dialog — revealed under the footer buttons once "Bulk
   upload multi-item" is clicked. Native file controls (button/label/file
   input) are kept rather than replaced with custom graphics — only
   recoloured, same restraint as this build's other native-control
   exceptions (date input, checkbox accent-color). */

/* :L4157 */
.product .ah-css-multi-item [id^="multi-item-upload-dialog-"] {
  margin-top: var(--ah-space-4);
  padding-top: var(--ah-space-4);
  border-top: 1px solid rgba(27, 44, 107, 0.12);
}
/* :L4162 */
.product .ah-css-multi-item [id^="multi-item-upload-dialog-"] > label.control-label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  margin: 0 0 var(--ah-space-3);
}
/* "Choose file" — tertiary Navy outline, matching .btn-default elsewhere. */

/* :L4172 */
.product .ah-css-multi-item [id^="multi-item-upload-file-button-"] {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-primary);
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
/* :L4183 */
.product .ah-css-multi-item [id^="multi-item-upload-file-button-"]:hover {
  background: var(--ah-mist);
}
/* Chosen-filename text next to "Choose file" */

/* :L4188 */
.product .ah-css-multi-item [id^="multi-item-upload-file-label-"] {
  display: inline-block;
  margin-left: var(--ah-space-3);
  font-family: var(--ah-font);
  font-size: 13px;
  color: var(--ah-color-muted);
}
/* "Upload" — solid Navy, the dialog's constructive action. */

/* :L4197 */
.product .ah-css-multi-item [id^="upload-multi-item-upload-file-"] {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background: var(--ah-color-primary);
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  margin-left: var(--ah-space-2);
  cursor: pointer;
}
/* :L4209 */
.product .ah-css-multi-item [id^="upload-multi-item-upload-file-"]:hover {
  background: var(--ah-navy-deep);
}
/* Inline validation message under the file controls — same plain-error-
   text treatment used throughout this file, no coloured pill background. */

/* :L4215 */
.product .ah-css-multi-item [id^="multi-item-upload-dialog-"] .label.label-danger {
  display: block;
  margin-top: var(--ah-space-2);
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
/* Download links (example/latest template, validated file) — Navy bold
   underline text links, matching the confirmation-page link treatment
   (§25) rather than a button, since these are secondary reference
   downloads, not the dialog's primary action. */

/* :L4231 */
.product .ah-css-multi-item [id^="download-multi-item-"] {
  display: block;
  margin-top: var(--ah-space-3);
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  text-decoration: underline;
}
/* Upload progress — native <progress> kept, recoloured via accent-color
   the same way this build's native checkbox is (general-container.css
   §12); Cancel as a plain inline error-red text action. */

/* :L4244 */
.product .ah-css-multi-item [id^="upload-progress-container-"] {
  margin-top: var(--ah-space-3);
}
/* :L4247 */
.product .ah-css-multi-item [id^="upload-progress-container-"] progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-bottom: var(--ah-space-2);
  accent-color: var(--ah-color-primary);
}
/* :L4254 */
.product .ah-css-multi-item [id^="cancel-upload-"] {
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
/* :L4265 */
.product .ah-css-multi-item [id^="uploadProgressStatus"] {
  margin-top: var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: 13px;
  color: var(--ah-color-muted);
}
/* Upload result banners (validation failure/info/success) — Bootstrap's
   own alert classes remapped to this build's palette rather than
   Bootstrap's default red/yellow/green: error red for danger, Teal for
   both warning and success since every use of these two here is an
   informational/confirmation note, not an urgent warning — Gold stays
   reserved as this page's single CTA accent, not a status colour. */

/* :L4278 */
.product .ah-css-multi-item .info-box.alert {
  margin-top: var(--ah-space-3);
  padding: var(--ah-space-3);
  border-radius: 8px;
  font-family: var(--ah-font);
  font-size: 13px;
  font-weight: var(--ah-fw-bold);
  line-height: 1.5;
}
/* :L4287 */
.product .ah-css-multi-item .info-box.alert-danger {
  color: var(--ah-error);
  background: rgba(192, 57, 43, 0.08);
}
/* :L4291 */
.product .ah-css-multi-item .info-box.alert-warning,
.product .ah-css-multi-item .info-box.alert-success {
  color: var(--ah-color-accent);
  background: rgba(13, 124, 143, 0.08);
}
/* :L4296 */
.product .ah-css-multi-item .info-box.alert ul {
  margin: var(--ah-space-2) 0 0;
  padding-left: var(--ah-space-4);
}
@media (max-width: 700px) {
  /* :L4302 */
  .product .ah-css-multi-item {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   28 · Reassign agent (Agent group / Agent name) — no entry point,
        hooked via :has() on .instanda-question-input-reassign-agent
   -------------------------------------------------------------------------
   Unlike every .ah-css-* section above, this question has no assignable
   custom CSS class field (same situation as §25) — the only distinctive
   hook Instanda emits is .instanda-question-input-reassign-agent, and it
   sits on the two field wrappers, not the card. .instanda-question-item.
   form-group.container is otherwise a generic Instanda wrapper reused
   throughout the platform, so :has() reaches from that descendant hook
   back up to the specific card, and the > .instanda-well parent (unique
   to this question's markup, unlike the plain .questionList wrapper the
   vehicle/address/name questions sit in) narrows it further. The nested
   .container.instanda-question-item.form-group body carries the same
   three classes as the card itself but is never a direct child of
   .instanda-well, so this selector can't accidentally double-match it.
   Card body (Mist Deep), plain bold Navy title — not the full-bleed Navy
   banner §17/§25 give their .instanda-questionHeader.container h3 — this
   is a single grouped question, styled like §12-15's cards instead.
   "(Optional)" can't be isolated from the rest of the h3's text without a
   wrapping markup element (the guide's "*"-bolding limitation applies
   here too), so the whole title shares one weight/colour.
   Agent group is a twitter-typeahead/Bloodhound widget, not Instanda's
   Data8 address lookup — unlike Data8, its visible text box (tt-hint +
   tt-input, both carrying .twitter-typeahead-agent-group.form-control) is
   brought in line with this build's other inputs (height/border/radius/
   focus glow), matching Agent name's select. Only the suggestion dropdown
   (.tt-menu) is left with its own native look, since restyling a
   third-party JS-rendered popup list is a different scope of change to
   the plain box every other input already gets branded the same way.
   ========================================================================= */

/* :L4337 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) {
  background: var(--ah-surface-card-alt);
  border-radius: var(--ah-radius-card);
  box-shadow: var(--ah-shadow-card);
  padding: var(--ah-space-4);
}
/* Bootstrap's .container carries fixed max-widths/padding at each
   breakpoint — reset so the header block and the field body (both also
   carry .container) size to the card's own content width instead. */

/* :L4347 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* .instanda-container-fluid (the header's own wrapper, distinct from the
   .container reset above) ships an Instanda background that would
   otherwise sit as a stray fill behind the title — same override as
   general-container.css's base rule for this class and §27's instance of
   the same issue, needed again here since this is a separate stacking
   context under .product. */

/* :L4360 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-container-fluid {
  background-color: transparent !important;
}
/* Question title — "Assign quote to a broker (Optional)" */

/* :L4365 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-questionHeader h3 {
  margin: 0 0 var(--ah-space-3);
  font-family: var(--ah-font);
  font-size: var(--ah-fs-section);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
}
/* Agent group / Agent name rows, stacked with even rhythm */

/* :L4374 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) > .questionItem.form-group > .form-group {
  margin-bottom: var(--ah-space-3);
}
/* :L4377 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) > .questionItem.form-group > .form-group:last-child {
  margin-bottom: 0;
}
/* Field labels — "Agent group" / "Agent name" */

/* :L4382 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-label label {
  display: block;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-heading);
  margin: 0 0 var(--ah-space-2);
}
/* Agent group — the twitter-typeahead widget's visible text box, brought
   in line with every other input's chrome (height/border/radius/focus
   glow) per instruction, while the suggestion dropdown (.tt-menu) stays
   untouched. tt-hint and tt-input share the .twitter-typeahead-agent-
   group.form-control class and sit exactly overlaid (tt-hint absolutely
   positioned behind, tt-input relatively on top with a transparent
   background so the hint text shows through) — both need this box model
   applied so the ghost hint text stays aligned with what's typed, but
   tt-hint's own inline style (border-color: transparent; background:
   ...#fff) is more specific than this class rule for those exact
   sub-properties, so it stays invisible underneath regardless. */

/* :L4404 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent .twitter-typeahead-agent-group.form-control {
  height: 50px;
  box-sizing: border-box;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background: var(--ah-surface-card);
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L4417 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent .twitter-typeahead-agent-group.form-control::placeholder {
  color: var(--ah-color-muted);
}
/* :L4420 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent .twitter-typeahead-agent-group.form-control:hover {
  border-color: var(--ah-color-primary);
}
/* :L4423 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent .twitter-typeahead-agent-group.form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
}
/* Agent name — plain <select>, styled the same as this build's other
   selects (§14 Title). CSS-drawn caret, Slate at rest, Navy on
   hover/focus. Instanda's own ID-based width rule for its JS plugins
   (here #AssignedSalesPersonId) always beats a class selector regardless
   of stylesheet order, so width is forced to stop it shrinking to native
   content width and throwing off the caret position. */

/* :L4434 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent select.form-control {
  width: 100% !important;
  height: 50px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  color: var(--ah-color-primary);
  background-color: var(--ah-surface-card);
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-heading) 50%), linear-gradient(135deg, var(--ah-color-heading) 50%, transparent 50%);
  /* right/center keyword syntax, not calc() — see the §14 gotcha note on
     this build's CSS pipeline flattening calc() into a raw percentage. */
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1.5px solid var(--ah-color-heading);
  border-radius: 8px;
  padding: 0 44px 0 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* :L4460 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent select.form-control:hover,
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .instanda-question-input-reassign-agent select.form-control:focus {
  border-color: var(--ah-color-primary);
  box-shadow: 0 0 0 3px rgba(27, 44, 107, 0.15);
  background-image: linear-gradient(45deg, transparent 50%, var(--ah-color-primary) 50%), linear-gradient(135deg, var(--ah-color-primary) 50%, transparent 50%);
}
/* Inline field validation message (Bootstrap .label.label-danger pill,
   restyled to plain error text — no coloured pill background) */

/* :L4471 */
.product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) .label.label-danger {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--ah-font);
  font-size: 12px;
  font-weight: var(--ah-fw-bold);
  color: var(--ah-error);
}
@media (max-width: 700px) {
  /* :L4484 */
  .product .instanda-well > .instanda-question-item.form-group.container:has(.instanda-question-input-reassign-agent) {
    padding: var(--ah-space-3);
  }
}
/* =========================================================================
   Coplus site — content stylesheet
   Brand: AncillaryHUB visual system (Navy / Gold / Teal / Slate), Arial only.
   Namespaced entirely under .site — never bare :root — so
   nothing here can leak into or collide with the host Instanda page.
   ========================================================================= */

/* :L4493 */
.site {
  /* ---- literal palette ---- */
  --ah-navy: #1b2c6b;
  --ah-navy-deep: #12224f;
  --ah-gold: #f4a820;
  --ah-teal: #0d7c8f;
  --ah-slate: #3c476b;
  --ah-slate-light: #5c688c;
  --ah-white: white;
  --ah-mist: #edf0f6;
  --ah-mist-deep: #e4e8f1;
  --ah-ink-grey: #44546a;
  --ah-error: #c0392b;
  /* ---- semantic aliases — components below reference these, not hex ---- */
  --ah-color-primary: var(--ah-navy);
  --ah-color-signal: var(--ah-gold);
  --ah-color-accent: var(--ah-teal);
  --ah-color-heading: var(--ah-slate);
  --ah-color-muted: var(--ah-slate-light);
  --ah-surface-page: var(--ah-mist);
  --ah-surface-card: var(--ah-white);
  --ah-surface-card-alt: var(--ah-mist-deep);
  --ah-text-body: var(--ah-ink-grey);
  --ah-text-on-dark: var(--ah-white);
  --ah-text-on-dark-muted: var(--ah-slate-light);
  /* ---- spacing / radius / elevation ---- */
  --ah-space-1: 4px;
  --ah-space-2: 8px;
  --ah-space-3: 16px;
  --ah-space-4: 24px;
  --ah-space-5: 32px;
  --ah-space-6: 48px;
  --ah-space-7: 64px;
  --ah-radius-card: 12px;
  --ah-radius-pill: 999px;
  --ah-shadow-card: 0 2px 8px rgba(27, 44, 107, 0.08);
  --ah-content-max: 1080px;
  /* ---- type ---- */
  --ah-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ah-fs-stat: 44px;
  --ah-fs-title: 30px;
  --ah-fs-section: 17px;
  --ah-fs-body: 14px;
  --ah-fs-caption: 11px;
  --ah-track-caption: 0.1em;
  --ah-fw-bold: 700;
  font-family: var(--ah-font);
  color: var(--ah-text-body);
  background: var(--ah-surface-page);
}
/* :L4543 */
.site * {
  box-sizing: border-box;
}
/* :L4544 */
.site img {
  max-width: none;
}
/* :L4546 */
.site a {
  color: inherit;
}
/* =========================================================================
   1 · Primary navigation — entry point .navbar-static-top
   -------------------------------------------------------------------------
   Instanda-generated header/nav markup — the Bootstrap 3 navbar structure
   and classes (container, navbar-header, navbar-toggle, navbar-collapse,
   navbar-nav, navbar-right) are fixed and left alone; only colour, type
   and spacing are layered on top, per the guide's "don't fight host CSS"
   rule. Styled after the guide's HEADER pattern: flat Navy fill, white
   content, no border. The current nav item (li.active /
   li.instanda-active-nav-item) is marked with a Gold underline — the one
   Gold accent in the bar, matching the guide's "Gold = the one thing to
   notice" rule. Everything else stays white-on-Navy so that accent reads
   clearly. On mobile the collapsed panel drops to Navy Deep so it reads
   as a distinct layer under the bar, and the underline becomes a left
   border since items stack vertically there.
   ========================================================================= */

/* :L4565 */
.site .navbar-static-top,
.site .navbar-default {
  background: var(--ah-color-primary);
  border-color: var(--ah-color-primary);
}
/* :L4571 */
.site .navbar-static-top {
  border: none;
  box-shadow: var(--ah-shadow-card);
}
/* :L4576 */
.site .navbar-default .navbar-brand img {
  display: block;
  transition: opacity .15s ease;
}
/* height: inherit rather than on the shared "img" rule above, since
   .hidden-xs/.visible-xs are generic Bootstrap responsive-utility
   classes reused elsewhere on the page — scoping to navbar-brand keeps
   this from touching unrelated elements that also carry those classes. */

/* :L4585 */
.site .navbar-default .navbar-brand img.hidden-xs,
.site .navbar-default .navbar-brand img.visible-xs {
  height: inherit;
}
/* :L4590 */
.site .navbar-default .navbar-brand:hover img,
.site .navbar-default .navbar-brand:focus img {
  opacity: .85;
}
/* ---- toggle button (mobile) ---- */

/* :L4596 */
.site .navbar-default .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}
/* :L4601 */
.site .navbar-default .navbar-toggle .icon-bar {
  background-color: var(--ah-text-on-dark);
}
/* :L4605 */
.site .navbar-default .navbar-toggle:hover,
.site .navbar-default .navbar-toggle:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--ah-color-signal);
}
/* ---- nav links ---- */

/* :L4612 */
.site .navbar-default .navbar-nav > li > a.instanda-nav-item-link {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  padding: 10px 18px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* :L4622 */
.site .navbar-default .navbar-nav > li > a.instanda-nav-item-link:hover,
.site .navbar-default .navbar-nav > li > a.instanda-nav-item-link:focus {
  color: var(--ah-color-signal);
  background: transparent;
}
/* Current section — the one Gold accent in the bar */

/* :L4629 */
.site .navbar-default .navbar-nav > li.active > a.instanda-nav-item-link,
.site .navbar-default .navbar-nav > li.instanda-active-nav-item > a.instanda-nav-item-link {
  color: var(--ah-color-signal);
  border-bottom-color: var(--ah-color-signal);
  background: transparent;
}
/* ---- mobile collapse panel ---- */

@media (max-width: 767px) {
  /* :L4638 */
  .site .navbar-default .navbar-collapse {
    background: var(--ah-navy-deep);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }
  /* :L4644 */
  .site .navbar-default .navbar-nav > li > a.instanda-nav-item-link {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid transparent;
    padding: 14px 18px;
  }
  /* :L4651 */
  .site .navbar-default .navbar-nav > li:first-child > a.instanda-nav-item-link {
    border-top: none;
  }
  /* :L4655 */
  .site .navbar-default .navbar-nav > li.active > a.instanda-nav-item-link,
  .site .navbar-default .navbar-nav > li.instanda-active-nav-item > a.instanda-nav-item-link {
    border-left-color: var(--ah-color-signal);
    border-bottom-color: transparent;
    background: rgba(255, 255, 255, 0.05);
  }
}
/* =========================================================================
   2 · Bootstrap .btn-primary — guide's Secondary treatment
   -------------------------------------------------------------------------
   Per the guide's "one Gold button per view" rule, Gold is reserved for a
   single hand-picked primary CTA per page (styled separately, case by
   case) — not for every generic Bootstrap .btn-primary, which can appear
   several times on one view. So this maps Bootstrap's primary button to
   the guide's Secondary treatment instead: flat Navy fill, white text,
   no border/shadow. Hover/focus darken one step (#142253), active darkens
   a second step (#0f1a40), matching the Navy-button pattern already used
   elsewhere in this build (see product.css's instanda-button.btn.btn-primary).
   Disabled drops to a quiet Mist/Slate-light combination so it reads as
   inert without introducing a new colour.
   ========================================================================= */

/* :L4678 */
.site .btn-primary {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-text-on-dark);
  background-color: var(--ah-color-primary);
  border-color: var(--ah-color-primary);
  box-shadow: none;
  text-shadow: none;
  padding: 13px 24px;
  border-radius: 8px;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* :L4693 */
.site .btn-primary:hover,
.site .btn-primary:focus,
.site .btn-primary.focus {
  color: var(--ah-text-on-dark);
  background-color: #142253;
  border-color: #142253;
}
/* :L4701 */
.site .btn-primary:active,
.site .btn-primary.active,
.open > .site .dropdown-toggle.btn-primary {
  color: var(--ah-text-on-dark);
  background-color: #0f1a40;
  border-color: #0f1a40;
  box-shadow: none;
}
/* :L4710 */
.site .btn-primary:active:hover,
.site .btn-primary:active:focus,
.site .btn-primary.active:hover,
.site .btn-primary.active:focus,
.open > .site .dropdown-toggle.btn-primary:hover,
.open > .site .dropdown-toggle.btn-primary:focus {
  color: var(--ah-text-on-dark);
  background-color: #0f1a40;
  border-color: #0f1a40;
}
/* :L4721 */
.site .btn-primary.disabled,
.site .btn-primary[disabled],
fieldset[disabled] .site .btn-primary,
.site .btn-primary.disabled:hover,
.site .btn-primary[disabled]:hover,
fieldset[disabled] .site .btn-primary:hover,
.site .btn-primary.disabled:focus,
.site .btn-primary[disabled]:focus,
fieldset[disabled] .site .btn-primary:focus {
  color: var(--ah-color-muted);
  background-color: var(--ah-surface-page);
  border-color: var(--ah-surface-page);
  box-shadow: none;
  cursor: not-allowed;
}
/* =========================================================================
   3 · Bootstrap .btn-default — guide's Tertiary treatment
   -------------------------------------------------------------------------
   Quiet Navy outline: transparent fill, Navy text, 1.5px Navy border,
   slightly tighter vertical padding (11.5px) than the filled buttons so
   the border doesn't push the overall height up. Matches the tertiary
   pattern already used for the "Cancel" action in product.css's
   .ah-css-address (transparent fill + rgba(27,44,107,0.06) hover tint).
   Disabled fades to Slate-light on a transparent field so it reads as
   inert without borrowing the Mist surface used for filled disabled
   buttons (no fill here to swap out).
   ========================================================================= */

/* :L4750 */
.site .btn-default {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background-color: transparent;
  border: 1.5px solid var(--ah-color-primary);
  box-shadow: none;
  text-shadow: none;
  padding: 11.5px 24px;
  border-radius: 8px;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* :L4765 */
.site .btn-default:hover,
.site .btn-default:focus,
.site .btn-default.focus {
  color: var(--ah-color-primary);
  background-color: rgba(27, 44, 107, 0.06);
  border-color: var(--ah-color-primary);
}
/* :L4773 */
.site .btn-default:active,
.site .btn-default.active,
.open > .site .dropdown-toggle.btn-default {
  color: var(--ah-color-primary);
  background-color: rgba(27, 44, 107, 0.12);
  border-color: var(--ah-color-primary);
  box-shadow: none;
}
/* :L4782 */
.site .btn-default:active:hover,
.site .btn-default:active:focus,
.site .btn-default.active:hover,
.site .btn-default.active:focus,
.open > .site .dropdown-toggle.btn-default:hover,
.open > .site .dropdown-toggle.btn-default:focus {
  color: var(--ah-color-primary);
  background-color: rgba(27, 44, 107, 0.12);
  border-color: var(--ah-color-primary);
}
/* :L4793 */
.site .btn-default.disabled,
.site .btn-default[disabled],
fieldset[disabled] .site .btn-default,
.site .btn-default.disabled:hover,
.site .btn-default[disabled]:hover,
fieldset[disabled] .site .btn-default:hover,
.site .btn-default.disabled:focus,
.site .btn-default[disabled]:focus,
fieldset[disabled] .site .btn-default:focus {
  color: var(--ah-color-muted);
  background-color: transparent;
  border-color: var(--ah-mist-deep);
  box-shadow: none;
  cursor: not-allowed;
}
/* =========================================================================
   4 · Footer modals (privacy policy / cookie policy / terms)
   -------------------------------------------------------------------------
   Fixed Instanda markup — no .modal-dialog wrapper exists here, so dialog
   sizing/centring that would normally live on .modal-dialog is applied to
   .footer-modal (which plays double duty as the dialog AND the content
   box). Matches the Navy-header / white-body / 75vh-scrollable treatment
   general-container.css's .hp-modal uses on the homepage, reusing the same
   token set so both feel like one product.
   ========================================================================= */

/* :L4819 */
.site .modal .footer-modal.modal-content {
  width: calc(68%);
  max-width: 560px;
  margin: 40px auto;
  border-radius: var(--ah-radius-card);
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 50px rgba(27, 44, 107, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}
/* :L4832 */
.site .modal .footer-modal .modal-header {
  background: var(--ah-color-primary);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: none;
  border-radius: 0;
}
/* Bootstrap 3's own clearfix pseudo-elements on .modal-header/.modal-footer
   (::before/::after { display:table; content:" "; }) become stray flex
   items once we turn these into flex containers — same fix as the
   homepage's .hp-modal. Kill the generated content so only the real
   children remain in the flex row. */

/* :L4848 */
.site .modal .footer-modal .modal-header::before,
.site .modal .footer-modal .modal-header::after,
.site .modal .footer-modal .footer-modal-close::before,
.site .modal .footer-modal .footer-modal-close::after {
  content: none;
  display: none;
}
/* No dedicated icon asset for this component — hide the raw "info" label
   rather than show unstyled text, so the header reads title-only, same as
   the homepage modal. */

/* :L4859 */
.site .modal .footer-modal .modal-header .icon.info {
  display: none;
}
/* :L4863 */
.site .modal .footer-modal .modal-header .text {
  color: var(--ah-text-on-dark);
  font-family: var(--ah-font);
  font-size: 17px;
  font-weight: var(--ah-fw-bold);
}
/* :L4870 */
.site .modal .footer-modal .modal-header .close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0;
  line-height: 0;
  opacity: 1;
  cursor: pointer;
}
/* :L4885 */
.site .modal .footer-modal .modal-header .close:hover,
.site .modal .footer-modal .modal-header .close:focus {
  background: rgba(255, 255, 255, 0.12);
}
/* Close glyph drawn with a Unicode character via ::before rather than a
   raster asset — there's no dedicated close icon for this component, and
   a single "×" doesn't warrant a new image just for this button. */

/* :L4893 */
.site .modal .footer-modal .modal-header .close .close-icon::before {
  content: "\00D7";
  display: block;
  color: var(--ah-text-on-dark);
  font-size: 20px;
  font-weight: var(--ah-fw-bold);
}
/* :L4901 */
.site .modal .footer-modal .modal-body {
  background: var(--ah-surface-card);
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
/* :L4908 */
.site .modal .footer-modal .footer-modal-body {
  padding: 24px 22px;
  font-family: var(--ah-font);
  color: var(--ah-text-body);
  font-size: var(--ah-fs-body);
  line-height: 1.6;
}
/* :L4916 */
.site .modal .footer-modal .footer-modal-body p {
  margin: 0 0 14px;
}
/* :L4920 */
.site .modal .footer-modal .footer-modal-body p:last-child {
  margin-bottom: 0;
}
/* :L4924 */
.site .modal .footer-modal .footer-modal-body h1,
.site .modal .footer-modal .footer-modal-body h2,
.site .modal .footer-modal .footer-modal-body h3 {
  color: var(--ah-color-primary);
  font-weight: var(--ah-fw-bold);
}
/* :L4931 */
.site .modal .footer-modal .footer-modal-close {
  padding: 16px 22px 22px;
  display: flex;
  justify-content: flex-end;
  border: none;
}
/* :L4938 */
.site .modal .footer-modal .footer-modal-close .close {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  font-weight: var(--ah-fw-bold);
  color: var(--ah-color-primary);
  background-color: transparent;
  border: 1.5px solid var(--ah-color-primary);
  padding: 11.5px 24px;
  border-radius: 8px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
}
/* :L4953 */
.site .modal .footer-modal .footer-modal-close .close:hover,
.site .modal .footer-modal .footer-modal-close .close:focus {
  background-color: rgba(27, 44, 107, 0.06);
}
/* =========================================================================
   5 · Site footer — entry point .footer-area
   -------------------------------------------------------------------------
   Fixed regulatory disclaimer + policy-link row beneath the main content.
   Sits on the Mist Deep surface tier (vs. the page's plain Mist background)
   so the band reads as a distinct zone with no extra border needed — same
   two-tier surface pattern the rest of the system uses. Disclaimer copy is
   deliberately quiet: muted colour, smaller than body size, since it's
   boilerplate the visitor is rarely reading closely (same treatment as
   product.css's mandatory-fields notice). The link row is instead treated
   as caption-tier content per the guide's own definition of --ah-fs-caption
   ("eyebrow labels, status tags, footnotes") — bold, tracked, uppercase,
   Navy — since that's exactly what these links are.
   ========================================================================= */

/* :L4972 */
.site .footer-area {
  background: var(--ah-surface-card-alt);
  padding: var(--ah-space-5) var(--ah-space-4);
}
/* :L4977 */
.site .footer-area .disclaimer {
  max-width: var(--ah-content-max);
  margin: 0 auto;
}
/* :L4982 */
.site .footer-area .disclaimer p {
  margin: 0 0 var(--ah-space-2);
  font-family: var(--ah-font);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ah-color-muted);
}
/* :L4990 */
.site .footer-area .disclaimer p:last-of-type {
  margin-bottom: 0;
}
/* :L4994 */
.site .footer-area .disclaimer a {
  color: var(--ah-color-accent);
  text-decoration: none;
}
/* :L4999 */
.site .footer-area .disclaimer a:hover,
.site .footer-area .disclaimer a:focus {
  color: var(--ah-color-primary);
  text-decoration: underline;
}
/* :L5005 */
.site .footer-area .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ah-space-3);
  margin-top: var(--ah-space-3);
}
/* :L5012 */
.site .footer-area .links a {
  font-family: var(--ah-font);
  font-size: var(--ah-fs-caption);
  font-weight: var(--ah-fw-bold);
  letter-spacing: var(--ah-track-caption);
  text-transform: uppercase;
  color: var(--ah-color-primary);
  text-decoration: none;
}
/* :L5022 */
.site .footer-area .links a:hover,
.site .footer-area .links a:focus {
  color: var(--ah-color-accent);
  text-decoration: underline;
}
@media (max-width: 700px) {
  /* :L5029 */
  .site .footer-area {
    padding: var(--ah-space-4) var(--ah-space-3);
  }
}
/* :L5034 */
body {
  background: #edf0f6;
  margin-bottom: 0px;
}
/* :L5038 */
body #WaitingOpaqueBox {
  background: #e4e8f1;
}
/* :L5042 */
body .footer {
  height: unset;
}
/* :L5045 */
body .footer .instanda-built-by-footer {
  display: none;
}
/*-----LOADING ANIMATION*/

/* :L5052 */
#WaitingAnimationGraphic .spinner {
  display: none;
}
/* :L5058 */
.custom-loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 99999999;
  display: block;
  width: 100vw;
  height: 100vh;
}
/* :L5078 */
.animation {
  position: absolute;
  left: calc(50% - 1.5em);
  top: calc(50% - 1.5em);
  border: 3px solid #f4a820;
  border-top-color: #1b2c6b;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* :L5109 */
html {
  --ah-mist-deep: #e4e8f1;
  --ah-surface-card-alt: var(--ah-mist-deep);
  background: var(--ah-surface-card-alt);
}