/* ==========================================================================
   "With every order you receive" — Quality page summary.

   Sits between the page intro and the jump navigation, answering the first
   question a buyer has before they commit to reading the page.

   Deliberately NOT a green callout. The site already stacks tinted callout
   panels on the sample page, and another one here would read as the third
   variation of the same device rather than as information. This is a plain
   ruled strip: a micro label, then three rows divided by hairlines — the
   same treatment the documentation tables use, so it reads as data.
   ========================================================================== */

.qdeliver-band{padding-block:0}
.sec--flush{padding-block:0}

.qdeliver{
  margin-block:var(--s-2) var(--s-7);
  padding:var(--s-5) var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}

.qdeliver-label{
  margin:0 0 var(--s-4);
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);line-height:var(--lh-micro);text-transform:uppercase;
  color:var(--sage);
}

/* Three across on desktop, divided by hairlines rather than boxed; one column
   below 720px, where three columns would leave each name wrapping twice. */
.qdeliver-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
}
.qdeliver-item{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-1) var(--s-5);
  border-left:1px solid var(--line-2);
  min-width:0;
}
.qdeliver-item:first-child{padding-left:0;border-left:0}

/* Shape carries the distinction (check vs clock); tone reinforces it. --sage
   is the brand green, so the request rows step back to --sage-2 rather than
   matching the row that is a commitment. */
.qdeliver-icon{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--sage-2)}
.qdeliver-item[data-state="included"] .qdeliver-icon{color:var(--sage)}

.qdeliver-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.qdeliver-name{
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-heading,600);
  color:var(--ink);overflow-wrap:anywhere;
}
.qdeliver-note{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  line-height:var(--lh-micro);text-transform:uppercase;color:var(--muted);
}

@media (max-width:860px){
  .qdeliver-list{grid-template-columns:1fr}
  .qdeliver-item{
    padding:var(--s-3) 0;border-left:0;border-top:1px solid var(--line-2);
  }
  .qdeliver-item:first-child{padding-top:0;border-top:0}
}

@media (max-width:560px){
  .qdeliver{padding:var(--s-4) var(--s-4);margin-block:0 var(--s-6)}
}

/* ==========================================================================
   Quality page closing block.

   Replaces the shared dark CTA band on this page. One action and one address,
   set as a quiet ruled footer rather than a second full-width band — the page
   already ends on the regulatory route, and a dark panel after it restated an
   offer the reader met on the way in.
   ========================================================================== */

.qclose-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--s-4) var(--s-6);
  padding-top:var(--s-5);border-top:1px solid var(--line);
}

/* Inline rather than inline-flex on purpose. As a flex container the label
   becomes a full-width flex item as soon as it wraps, and the arrow is left
   stranded against the right edge on a narrow screen. Inline keeps the arrow
   attached to the last word, wrapping with it. */
.qclose-cta{
  display:inline;
  font-size:var(--fs-lede,18px);line-height:1.35;font-weight:var(--fw-heading,600);
  color:var(--sage);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.qclose-cta .en-icon{
  width:18px;height:18px;display:inline-block;vertical-align:-3px;
  margin-left:var(--s-2);transition:transform .18s ease;
}
.qclose-cta:hover,.qclose-cta:focus-visible{color:var(--deep);border-bottom-color:var(--sage)}
.qclose-cta:hover .en-icon,.qclose-cta:focus-visible .en-icon{transform:translateX(3px)}

.qclose-ask{
  margin:0;max-width:46ch;
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted);
}
.qclose-mail{display:inline-block;color:var(--sage);text-decoration:none;border-bottom:1px solid var(--line);}
.qclose-mail:hover,.qclose-mail:focus-visible{color:var(--deep);border-bottom-color:var(--sage)}

@media (max-width:760px){
  .qclose-inner{flex-direction:column;gap:var(--s-4)}
  .qclose-cta{font-size:var(--fs-body,16px)}
}

@media (prefers-reduced-motion:reduce){
  .qclose-cta,.qclose-cta .en-icon{transition:none}
}