#quote #quote-form .amount-field,
#quote #quote-form .quantity-field {
  min-height: 108px !important;
  padding-bottom: 10px !important;
}

#quote #quote-form .quick-fill {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

#quote #quote-form .quick-fill button {
  position: static !important;
  grid-column: auto !important;
  justify-self: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 37px !important;
  height: 23px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #edf4ef !important;
  color: #5e7669 !important;
  font: 800 10px Manrope, sans-serif !important;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease) !important;
}

#quote #quote-form .quick-fill button:hover {
  background: #dceee3 !important;
  color: #1d5b3d !important;
  transform: translateY(-1px);
}

#quote #quote-form .quick-fill button.is-active {
  background: #d5f2df !important;
  color: #087744 !important;
  transform: translateY(-1px);
}

#quote #quote-form .quick-fill button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  #quote #quote-form .amount-field,
  #quote #quote-form .quantity-field { min-height: 106px !important; }

  #quote #quote-form .quick-fill button { flex: 1 1 0 !important; }
}

/* A transformed invalid label creates its own stacking context, which can place an
   open custom menu underneath the rows that follow it. Keep the red state on the
   field, and animate only its visible control instead. */
#quote .quote-lab .quote-form label.is-invalid { animation: none !important; }

#quote .quote-lab .quote-form label.is-invalid .custom-select-trigger,
#quote .quote-lab .quote-form label.is-invalid .number-input {
  animation: quote-field-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}

#quote .quote-lab .custom-select-root.open { z-index: 60; }

/* Quote workspace scale: the card has room for clearer, easier-to-scan controls. */
#quote .quote-lab .workspace-header {
  min-height: 72px !important;
  padding: 0 28px !important;
  font-size: 13px !important;
}

#quote .quote-lab .workspace-step {
  padding: 8px 12px !important;
  font-size: 11px !important;
}

#quote .quote-lab .quote-form {
  gap: 18px !important;
  padding: 26px 22px 24px !important;
}

#quote .quote-lab .quote-form label {
  min-height: 96px !important;
  padding: 14px 16px 0 !important;
}

#quote .quote-lab .quote-form label span,
#quote .quote-lab .quote-form label > span:first-child {
  margin-bottom: 6px !important;
  font-size: 12px !important;
}

#quote .quote-lab .custom-select-trigger,
#quote .quote-lab .quote-form input,
#quote .quote-lab .number-input {
  height: 50px !important;
}

#quote .quote-lab .custom-select-value,
#quote .quote-lab .custom-select-value b,
#quote .quote-lab .quote-form input {
  font-size: 17px !important;
}

#quote .quote-lab .custom-select-value i,
#quote .quote-lab .custom-select-option i {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
}

#quote .quote-lab .custom-select-value i img,
#quote .quote-lab .custom-select-option i img {
  width: 22px !important;
  height: 22px !important;
}

#quote #quote-form .amount-field,
#quote #quote-form .quantity-field {
  min-height: 124px !important;
}

#quote #quote-form .quick-fill {
  gap: 8px;
  margin-top: 6px;
}

#quote #quote-form .quick-fill button {
  min-width: 44px !important;
  height: 27px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}

#quote .quote-lab .number-input b {
  min-width: 34px !important;
  height: 24px !important;
  font-size: 10px !important;
}

#quote #quote-form .type-field {
  min-height: 100px !important;
}

#quote #quote-form .type-toggle {
  height: 54px !important;
  padding: 4px !important;
}

#quote .quote-lab .quote-form .type-option {
  font-size: 15px !important;
}

#quote .custom-select-menu {
  max-height: 500px !important;
  gap: 5px;
  padding: 9px;
}

#quote .custom-select-option {
  min-height: 52px !important;
  padding: 10px !important;
  font-size: 14px !important;
}

#quote .quote-lab .quote-form > button {
  height: 58px !important;
  margin-top: 6px !important;
  font-size: 15px !important;
}

#quote .quote-lab .quote-lab-footer {
  min-height: 58px !important;
  padding: 0 28px !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  #quote .quote-lab .workspace-header { min-height: 62px !important; padding: 0 18px !important; }
  #quote .quote-lab .quote-form { gap: 14px !important; padding: 19px 17px 20px !important; }
  #quote .quote-lab .quote-form label { min-height: 90px !important; padding: 13px 14px 0 !important; }
  #quote #quote-form .amount-field,
  #quote #quote-form .quantity-field { min-height: 116px !important; }
  #quote .quote-lab .quote-lab-footer { min-height: 52px !important; padding: 0 18px !important; }
}

/* Use the available room for the information itself, not empty vertical gutters. */
#quote .quote-lab .workspace-header {
  min-height: 64px !important;
}

#quote .quote-lab .quote-form {
  gap: 12px !important;
  padding: 20px 22px 18px !important;
}

#quote .quote-lab .quote-form label {
  min-height: 88px !important;
  padding: 12px 16px 0 !important;
}

#quote .quote-lab .quote-form label span,
#quote .quote-lab .quote-form label > span:first-child {
  font-size: 13px !important;
}

#quote .quote-lab .custom-select-trigger,
#quote .quote-lab .quote-form input,
#quote .quote-lab .number-input {
  height: 48px !important;
}

#quote .quote-lab .custom-select-value,
#quote .quote-lab .custom-select-value b {
  font-size: 19px !important;
}

#quote .quote-lab .quote-form input {
  font-size: 20px !important;
}

#quote .quote-lab .custom-select-value i,
#quote .quote-lab .custom-select-option i {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border-radius: 8px !important;
}

#quote .quote-lab .custom-select-value i img,
#quote .quote-lab .custom-select-option i img {
  width: 26px !important;
  height: 26px !important;
}

#quote #quote-form .type-field {
  min-height: 80px !important;
}

#quote #quote-form .type-toggle {
  height: 48px !important;
}

#quote #quote-form .amount-field,
#quote #quote-form .quantity-field {
  min-height: 108px !important;
}

#quote #quote-form .quick-fill button {
  min-width: 48px !important;
  height: 30px !important;
  font-size: 12px !important;
}

#quote .quote-lab .number-input b {
  min-width: 38px !important;
  height: 26px !important;
  font-size: 11px !important;
}

#quote .custom-select-option {
  min-height: 58px !important;
  padding: 11px 12px !important;
  font-size: 16px !important;
}

#quote .quote-lab .quote-lab-footer {
  min-height: 52px !important;
  font-size: 13px !important;
}

#quote .quote-lab .quote-lab-footer b {
  width: 10px !important;
  height: 10px !important;
}

@media (max-width: 760px) {
  #quote .quote-lab .quote-form { gap: 11px !important; padding: 17px !important; }
  #quote .quote-lab .quote-form label { min-height: 84px !important; padding: 11px 14px 0 !important; }
  #quote .quote-lab .custom-select-value,
  #quote .quote-lab .custom-select-value b { font-size: 17px !important; }
  #quote .quote-lab .quote-form input { font-size: 18px !important; }
  #quote #quote-form .amount-field,
  #quote #quote-form .quantity-field { min-height: 104px !important; }
}

/* The menu itself has generous room, so make each live brand/country option
   legible at a glance rather than leaving most of the row visually empty. */
#quote .quote-lab .custom-select-option {
  min-height: 68px !important;
  gap: 13px !important;
  padding: 12px 14px !important;
  font-size: 18px !important;
}

#quote .quote-lab .custom-select-option i {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  border-radius: 10px !important;
}

#quote .quote-lab .custom-select-option i img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 7px !important;
}

#quote .quote-lab .custom-select-option em {
  font-size: 18px !important;
}

@media (max-width: 760px) {
  #quote .quote-lab .custom-select-option { min-height: 62px !important; font-size: 16px !important; }
  #quote .quote-lab .custom-select-option i { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  #quote .quote-lab .custom-select-option i img { width: 30px !important; height: 30px !important; }
}

/* Keep the menu compact; increase the information scale, not the row spacing. */
#quote .quote-lab .quote-form .custom-select-option {
  min-height: 54px !important;
  height: 54px !important;
  padding: 6px 12px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#quote .quote-lab .quote-form .custom-select-option em {
  font-size: 20px !important;
}

@media (max-width: 760px) {
  #quote .quote-lab .quote-form .custom-select-option {
    min-height: 52px !important;
    height: 52px !important;
    font-size: 19px !important;
  }
}

/* Live mall catalogue: render the API's broader 20-item sample as a compact grid. */
.mall-catalog {
  min-height: 0 !important;
}

.mall-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 0 !important;
}

.mall-product-card,
.mall-product-1,
.mall-product-2,
.mall-product-3,
.mall-product-4 {
  display: flex !important;
  grid-row: auto !important;
  min-height: 184px !important;
  flex-direction: column !important;
}

.mall-product-1 { border-radius: 28px 12px 24px 14px !important; }
.mall-product-2 { border-radius: 12px 28px 14px 22px !important; }
.mall-product-3 { border-radius: 22px 12px 28px 14px !important; }
.mall-product-card:nth-child(4n) { border-radius: 14px 24px 12px 28px !important; }

.mall-product-card .mall-image-wrap,
.mall-product-1 .mall-image-wrap,
.mall-product-2 .mall-image-wrap,
.mall-product-3 .mall-image-wrap {
  width: 100% !important;
  min-width: 0 !important;
  height: 124px !important;
}

.mall-product-card .mall-product-info,
.mall-product-1 .mall-product-info {
  min-height: 60px !important;
  padding: 11px 12px !important;
}

@media (max-width: 980px) {
  .mall-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .mall-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mall-product-card,
  .mall-product-1,
  .mall-product-2,
  .mall-product-3,
  .mall-product-4 { min-height: 166px !important; }
  .mall-product-card .mall-image-wrap,
  .mall-product-1 .mall-image-wrap,
  .mall-product-2 .mall-image-wrap,
  .mall-product-3 .mall-image-wrap { height: 108px !important; }
}

/* Restore the curated one-large / two-small mall window; the controls cycle
   through the live API catalogue in groups instead of expanding the page. */
.mall-catalog { min-height: 498px !important; }
.mall-product-grid { grid-template-columns: 1.04fr .96fr !important; min-height: 387px !important; }
.mall-product-card { min-height: 174px !important; flex-direction: row !important; }
.mall-product-1 { grid-row: span 2 !important; flex-direction: column !important; }
.mall-product-2,
.mall-product-3 { grid-row: auto !important; flex-direction: row !important; }
.mall-product-4 { display: none !important; }
.mall-product-1 .mall-image-wrap { width: 100% !important; min-width: 0 !important; height: 248px !important; }
.mall-product-2 .mall-image-wrap,
.mall-product-3 .mall-image-wrap { width: 42% !important; min-width: 42% !important; height: 100% !important; }
.mall-product-1 .mall-product-info { min-height: 89px !important; }

.mall-carousel-controls { display: flex; gap: 5px; margin-left: auto; }
.mall-carousel-controls button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgba(197,243,107,.32); border-radius: 50%; background: transparent; color: var(--lime); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.mall-carousel-controls button:hover:not(:disabled) { background: var(--lime); color: var(--deep); }
.mall-carousel-controls button:disabled { opacity: .35; cursor: default; }
.mall-carousel-controls svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }

@media (max-width: 760px) {
  .mall-catalog { min-height: 0 !important; }
  .mall-product-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mall-product-card,
  .mall-product-1,
  .mall-product-2,
  .mall-product-3 { min-height: 152px !important; grid-row: auto !important; flex-direction: row !important; }
  .mall-product-card .mall-image-wrap,
  .mall-product-1 .mall-image-wrap,
  .mall-product-2 .mall-image-wrap,
  .mall-product-3 .mall-image-wrap { width: 42% !important; min-width: 42% !important; height: 100% !important; }
}

/* App WebViews commonly expose a tablet-like CSS width while leaving less usable
   space than a browser. Keep the quote journey self-contained before it reaches
   the desktop two-column breakpoint, without changing other site sections. */
@media (max-width: 900px) {
  #quote.quote-section {
    display: block !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
  }

  #quote .quote-heading {
    max-width: 620px;
    margin: 0 auto 30px;
  }

  #quote .quote-workspace.quote-lab,
  #quote .quote-result,
  #quote .quote-footnote {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
  }

  #quote .quote-lab .quote-form,
  #quote .quote-lab .custom-select-root,
  #quote .quote-lab .custom-select-trigger {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  #quote.quote-section {
    padding-top: 64px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  #quote .quote-lab .quote-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #quote .quote-lab .quote-form > label,
  #quote #quote-form .type-field,
  #quote #quote-form .target-country-field {
    grid-column: 1 / -1 !important;
  }

  #quote .custom-select-menu {
    max-height: min(62dvh, 480px) !important;
  }

  /* Keep both card types readable inside the narrow App WebView width. */
  #quote #quote-form .type-toggle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  #quote .quote-lab .quote-form .type-option {
    min-width: 0 !important;
    padding: 0 4px !important;
    gap: 5px !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    white-space: normal;
    overflow: visible;
    text-align: center;
  }

  #quote .quote-lab .quote-form .type-option::before {
    flex: 0 0 5px;
  }

  /* The decorative circle competes with the second label on narrow WebViews. */
  #quote #quote-form .type-toggle::before {
    display: none;
  }
}

@media (pointer: coarse) {
  #quote .quote-lab .quote-form .type-option {
    touch-action: manipulation;
    transition-duration: .12s !important;
  }
}

/* Support heading accent belongs between the label and headline, never across text. */
.help > div:first-child::after {
  top: 43px !important;
  width: 72px !important;
  height: 4px !important;
}

/* Official release channels, styled as an app download destination rather than a generic CTA. */
.download { align-items: center !important; }
.download-options { display: grid; justify-items: end; gap: 12px; }
.download-options > p { margin: 0; color: #547064; font-size: 11px; font-weight: 800; }
.store-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.store-link { display: inline-flex; min-width: 166px; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 10px; background: var(--deep); color: #fff; transition: background .2s var(--ease), transform .2s var(--ease); }
.store-link:hover { background: var(--green); transform: translateY(-2px); }
.store-link svg { width: 25px; height: 25px; flex: 0 0 25px; fill: currentColor; }
.store-mark { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; }
.store-mark svg { width: 100%; height: 100%; }
.apple-store .store-mark { padding: 5px; border-radius: 7px; background: #147ef5; color: #fff; }
.apple-store .store-mark svg { fill: currentColor; }
.google-play .store-mark { color: initial; }
.store-link span { display: grid; gap: 1px; }
.store-link small { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; line-height: 1; }
.store-link strong { font-size: 15px; line-height: 1.1; letter-spacing: -.02em; }
.download-register { color: #426052; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.download-register:hover { color: var(--green); }

/* Keep the store choice in the hero journey, where new visitors decide whether
   to install the app. It becomes an in-flow block before the phone mock-up can
   overlap it on tablet and mobile layouts. */
.hero-downloads {
  position: absolute;
  top: 74px;
  left: calc(100% - 24px);
  z-index: 3;
  display: grid;
  width: 196px;
  gap: 10px;
  padding: 14px;
  border-radius: 14px 8px 14px 8px;
  background: rgba(9, 48, 34, .76);
  box-shadow: 0 5px 8px rgba(0, 0, 0, .14);
  backdrop-filter: blur(8px);
}

.hero-downloads > p {
  margin: 0;
  color: #c8f67a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-store-links { display: grid; gap: 7px; }

.hero-store-link {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px 5px 8px 5px;
  background: #fff;
  color: var(--deep);
  font-size: 12px;
  font-weight: 800;
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.hero-store-link:hover { transform: translateX(3px); background: var(--lime); }
.hero-store-link svg { width: 21px; height: 21px; flex: 0 0 21px; }
.hero-app-store svg { padding: 4px; border-radius: 5px; background: #147ef5; fill: #fff; }
.hero-google-play svg { overflow: visible; }


@media (max-width: 760px) {
  .download-options { justify-items: start; margin-top: 28px; }
  .store-links { justify-content: flex-start; width: 100%; }
  .store-link { flex: 1 1 160px; }
}

@media (max-width: 1150px) {
  .hero-downloads {
    position: static;
    width: auto;
    max-width: 430px;
    margin-top: 24px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero-downloads > p { color: #c8f67a; }
  .hero-store-links { display: flex; flex-wrap: wrap; }
  .hero-store-link { min-width: 148px; }
}

@media (max-width: 560px) {
  .hero-store-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-store-link { min-width: 0; font-size: 11px; }
}

/* The first fold is the primary installation decision, so this is treated as a
   complete download destination rather than a small secondary utility. */
@media (min-width: 1260px) {
  /* Desktop: the hero has three deliberate zones, so the store area never
     competes with the headline or overlays the phone demonstration. */
  .hero {
    grid-template-columns: minmax(450px, 1.2fr) 312px minmax(280px, .75fr);
    gap: 44px;
  }

  .hero-copy {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: minmax(0, 1fr) 312px;
    column-gap: 44px;
    align-items: start;
  }

  .hero-copy > :not(.hero-downloads) { grid-column: 1; }
  .hero-copy > .eyebrow { grid-row: 1; }
  .hero-copy > h1 { grid-row: 2; max-width: 520px; font-size: clamp(58px, 5vw, 76px); }
  .hero-copy > .hero-lede { grid-row: 3; }
  .hero-copy > .hero-actions { grid-row: 4; }
  .hero-copy > .hero-note { grid-row: 5; }
  .hero-copy > .hero-route { grid-row: 6; }

  .hero-downloads {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1 / 7;
    align-self: center;
    width: 312px;
    gap: 11px;
    padding: 22px 22px 20px;
    border-radius: 0 16px 0 16px;
    background: #0b3b2b;
    box-shadow: 0 7px 8px rgba(0, 0, 0, .18);
    backdrop-filter: none;
  }

  .hero-art { grid-column: 3; }

  .hero-downloads::after {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 66px;
    height: 66px;
    border-radius: 0 16px 0 52px;
    background: var(--lime);
    content: "";
  }

  .hero-downloads > p {
    position: relative;
    z-index: 1;
    margin-right: 58px;
    color: var(--lime);
    font-size: 11px;
  }

  .hero-downloads > strong {
    position: relative;
    z-index: 1;
    color: #fff;
    font: 800 25px/1.02 Sora, Manrope, sans-serif;
    letter-spacing: -.035em;
  }

  .hero-download-copy {
    position: relative;
    z-index: 1;
    max-width: 244px;
    color: #b9d2c3;
    font-size: 12px;
    line-height: 1.45;
  }

  .hero-store-links { gap: 10px; margin-top: 5px; }

  .hero-store-link {
    min-height: 57px;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1.05;
  }

  .hero-store-link span { display: grid; gap: 2px; }
  .hero-store-link small { color: #567064; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
  .hero-store-link svg { width: 28px; height: 28px; flex-basis: 28px; }
  .hero-app-store svg { padding: 5px; }
}

@media (max-width: 1259px) {
  /* Below the three-column layout, download controls return to normal flow. */
  .hero-downloads {
    position: static;
    width: auto;
    max-width: 430px;
    margin-top: 24px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero-downloads > strong { color: #fff; font: 800 23px/1.1 Sora, Manrope, sans-serif; letter-spacing: -.03em; }
  .hero-download-copy { max-width: 410px; color: #b9d2c3; font-size: 13px; line-height: 1.5; }
  .hero-store-link { min-height: 52px; font-size: 14px; }
  .hero-store-link span { display: grid; gap: 1px; }
  .hero-store-link small { color: #567064; font-size: 8px; font-weight: 800; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-store-link { transition: none; }
}