.qsl,
.qsl-home-bridge {
  --qsl-blue: var(--brand__color--secondary, #0d4396);
  --qsl-dark: var(--brand__color--secondary-alt, #0b3069);
  --qsl-pink: var(--brand__color--primary, #e5007d);
  --qsl-pink-hover: var(--brand__color--primary-alt, #b90665);
  --qsl-mist: var(--brand__color--lighter-gray, #f7f7f7);
  --qsl-line: var(--brand__color--gray, #dfe2dc);
  --qsl-text: var(--brand__color--text, #575756);
}

.qsl {
  --qsl-gutter: clamp(1.1rem, 4vw, 4.25rem);
  --qsl-width: 82rem;
  background: #fff;
  color: var(--qsl-text);
}

.qsl [hidden] { display: none; }
.qsl :focus-visible,
.qsl-home-bridge :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.qsl h1, .qsl h2, .qsl h3 { color: var(--qsl-dark); text-wrap: balance; }
.qsl h1 { font-size: clamp(2.15rem, 4.45vw, 4.5rem); letter-spacing: -.035em; line-height: 1.08; }
.qsl h2 { max-width: 25ch; font-size: clamp(1.75rem, 3.2vw, 3.05rem); letter-spacing: -.025em; line-height: 1.18; margin: 0 0 .85rem; }
.qsl h3 { font-size: clamp(1.1rem, 1.65vw, 1.38rem); line-height: 1.35; margin: 0 0 .45rem; }
.qsl p { margin: 0 0 .8rem; }
.qsl figure { margin: 0; }
.qsl img { width: 100%; height: 100%; display: block; object-fit: cover; }
.qsl figcaption { font-size: .82rem; margin-top: .55rem; }
.qsl-wrap { width: min(100% - 2 * var(--qsl-gutter), var(--qsl-width)); margin-inline: auto; }

.qsl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 3rem;
  padding: .65rem 1.25rem;
  border: 0;
  border-radius: 2rem;
  background: var(--qsl-pink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.qsl-button:hover, .qsl-button:active { background: var(--qsl-pink-hover); color: #fff; text-decoration: none; }
.qsl-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--qsl-blue); font-weight: 700; text-underline-offset: .23em; }
.qsl-link:hover { color: var(--qsl-pink-hover); }
.qsl-arrow { flex: none; font-size: 1.12em; line-height: 1; }
.qsl-actions { display: flex; gap: .75rem 1.3rem; flex-wrap: wrap; align-items: center; }
.qsl .qsl-label { color: var(--qsl-blue); font-size: .8rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; margin-bottom: .75rem; }
.qsl .qsl-lead { max-width: 59ch; margin-bottom: 1.3rem; }

.qsl-header { background: var(--qsl-blue); color: #fff; border-bottom: 1px solid #ffffff30; }
.qsl-header-inner { display: flex; align-items: center; gap: clamp(1.4rem, 3.4vw, 3.5rem); min-height: 5.2rem; }
.qsl-logo { flex: none; display: inline-flex; align-items: center; }
.qsl-logo svg { width: 8.2rem; height: auto; }
.qsl-nav { display: flex; align-items: center; gap: clamp(1.15rem, 2.7vw, 2.6rem); flex: 1; }
.qsl-nav a { color: #fff; font-weight: 500; text-decoration: none; padding: .55rem 0; border-bottom: 2px solid transparent; }
.qsl-nav a:hover, .qsl-nav a[aria-current="page"] { border-bottom-color: #fff; }
.qsl-header .qsl-button { white-space: nowrap; }

.qsl-hero { position: relative; isolation: isolate; background: var(--qsl-blue); color: #fff; overflow: hidden; }
.qsl-hero-inner { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: clamp(32rem, 43vw, 43rem); align-items: stretch; }
.qsl-hero-copy { align-self: center; position: relative; z-index: 1; padding-block: 3.3rem 3.8rem; padding-right: 1.25rem; }
.qsl .qsl-hero h1 { color: #fff; margin: 0 0 1.15rem; }
.qsl .qsl-hero .qsl-label { color: #fff; margin-bottom: 1.1rem; }
.qsl .qsl-hero-lead { max-width: 48ch; color: #eef4ff; font-size: clamp(1rem, 1.4vw, 1.17rem); margin-bottom: 1.6rem; }
.qsl-hero a.qsl-link, .qsl-hero a.qsl-back { color: #fff; }
.qsl .qsl-back { display: inline-block; text-underline-offset: .2em; font-size: .84rem; margin-bottom: 1.35rem; }
.qsl .qsl-hero-photo { position: relative; min-width: 0; margin-right: calc(-1 * max(var(--qsl-gutter), (100vw - var(--qsl-width)) / 2)); }
.qsl-hero-photo img { position: absolute; inset: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); object-position: center 62%; }
.qsl-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--qsl-blue);
  clip-path: polygon(100% 15%, 70% 37%, 100% 18%);
}
.qsl-hero-photo figcaption { position: absolute; right: clamp(1rem, 3vw, 3rem); bottom: 1.1rem; z-index: 1; }
.qsl-hero-photo figcaption a { display: inline-flex; align-items: center; gap: .55rem; background: var(--qsl-dark); color: #fff; padding: .5rem .85rem; text-decoration: none; }
.qsl-hero-photo figcaption a:hover { text-decoration: underline; }

.qsl-section { padding-block: clamp(3.1rem, 7vw, 6.5rem); }
.qsl-soft { background: var(--qsl-mist); }
.qsl-split { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); align-items: start; gap: clamp(2rem, 7vw, 7.3rem); }
.qsl-rows { border-top: 1px solid var(--qsl-line); }
.qsl-rows article { padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--qsl-line); }
.qsl-rows p:last-child { margin-bottom: 0; }
.qsl-rows article > .qsl-link { font-size: .9rem; }
.qsl .qsl-problem { font-weight: 700; color: var(--qsl-dark); margin-bottom: .18rem; }
.qsl .qsl-goal { font-size: .92rem; margin-bottom: .9rem; }
.qsl .qsl-goal + h3 { display: inline-block; border-left: 3px solid var(--qsl-pink); padding-left: .7rem; }
.qsl .qsl-detail-photo { margin-top: 1.4rem; }
.qsl-detail-photo img { aspect-ratio: 1.6; }

.qsl-choices { display: grid; grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.65rem; }
.qsl-choice { display: block; min-width: 0; background: #fff; color: var(--qsl-dark); text-decoration: none; }
.qsl-choice:hover { color: var(--qsl-dark); text-decoration: none; }
.qsl-choice:hover .qsl-link { text-decoration: underline; }
.qsl-choice img { height: clamp(13rem, 23vw, 20.5rem); object-position: center 67%; }
.qsl-choice > div { padding: 1.2rem; }
.qsl-choice h3 { margin: .45rem 0 .85rem; }
.qsl-choice .qsl-link { text-decoration: none; }

.qsl-story { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: clamp(1.7rem, 6vw, 6rem); align-items: center; }
.qsl-story img { aspect-ratio: 1.27; }
.qsl-steps { margin: 1.2rem 0 .9rem; padding-left: 1.4rem; }
.qsl-steps li { padding-left: .35rem; }
.qsl-steps li::marker { color: var(--qsl-blue); font-weight: 700; }
.qsl-steps strong { color: var(--qsl-dark); }

.qsl-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.65rem 2.35rem; }
.qsl-sample { display: grid; grid-template-columns: minmax(5rem, .45fr) minmax(0, 1fr); background: #fff; }
.qsl-swatch { display: block; min-height: 10.5rem; }
.qsl-sample > div { padding: 1.1rem; }
.qsl-sample .qsl-link { font-size: .88rem; margin: .25rem 1rem .25rem 0; }
.qsl-sample p { margin-bottom: .65rem; }

.qsl-table { border-collapse: collapse; width: 100%; background: #fff; text-align: left; line-height: 1.5; table-layout: fixed; }
.qsl-table caption { text-align: left; color: var(--qsl-dark); font-weight: 700; font-size: 1.2rem; padding-bottom: .7rem; }
.qsl-table :is(td, th) { padding: .8rem 1rem; border-bottom: 1px solid var(--qsl-line); overflow-wrap: anywhere; }
.qsl-table thead { background: var(--qsl-blue); color: #fff; }
.qsl-table thead th:first-child { width: 39%; }
.qsl-table thead small { display: block; font-weight: 400; color: #e9f1ff; }
.qsl-table tbody th { font-weight: 600; color: var(--qsl-dark); }
.qsl .qsl-note { font-size: .88rem; margin-top: 1rem; max-width: 92ch; }

.qsl-questions { border-top: 1px solid var(--qsl-line); }
.qsl-questions details { border-bottom: 1px solid var(--qsl-line); }
.qsl-questions summary { padding: 1rem 2rem 1rem 0; cursor: pointer; font-weight: 700; color: var(--qsl-dark); position: relative; list-style: none; }
.qsl-questions summary::-webkit-details-marker { display: none; }
.qsl-questions summary::after { content: "+"; position: absolute; right: .25rem; top: .68rem; font-size: 1.35rem; }
.qsl-questions details[open] summary::after { content: "−"; }
.qsl-questions details p { padding-right: 1rem; padding-bottom: .5rem; }

.qsl-brief { background: var(--qsl-blue); color: #fff; }
.qsl .qsl-brief .qsl-label, .qsl .qsl-brief h2, .qsl-brief .qsl-link, .qsl-contact a { color: #fff; }
.qsl-contact a { overflow-wrap: anywhere; }
.qsl-brief-panel { background: #fff; color: var(--qsl-text); padding: clamp(1.1rem, 3vw, 2.1rem); }
.qsl-brief-panel a.qsl-link { color: var(--qsl-blue); }
.qsl-brief-panel .qsl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .9rem; margin: 1rem 0 .7rem; }
.qsl-brief-panel label { display: grid; gap: .26rem; font-weight: 700; color: var(--qsl-dark); font-size: .9rem; }
.qsl-brief-panel :is(input, select, textarea) { font: inherit; font-size: 1.0625rem; font-weight: 400; color: var(--qsl-dark); background: #fff; border: 1px solid #8b929c; border-radius: 0; width: 100%; min-height: 2.8rem; padding: .46rem .58rem; }
.qsl-brief-panel textarea { resize: vertical; }
.qsl-brief-panel form > button { margin-top: 1rem; }
.qsl #qsl-draft { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--qsl-line); }
.qsl #qsl-draft .qsl-actions { margin-top: .8rem; }
.qsl-copy { border: 0; padding: .55rem 0; background: transparent; font: inherit; font-weight: 700; color: var(--qsl-blue); text-decoration: underline; cursor: pointer; }
.qsl .qsl-status { font-size: .88rem; margin: .75rem 0 0; }
.qsl-end-actions { align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.2rem; }

.qsl-footer { background: var(--qsl-dark); color: #fff; padding-block: 1.5rem; }
.qsl-footer .qsl-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .65rem 1.25rem; }
.qsl-footer nav { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; }
.qsl-footer a { color: #fff; text-underline-offset: .24em; }

.qsl-home-bridge { padding-block: 1.3rem; background: var(--qsl-mist); border-bottom: 1px solid var(--qsl-line); }
.qsl-home-bridge > div { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; }
.qsl-home-bridge p { margin: 0 0 .22rem; color: var(--qsl-blue); font-size: .86rem; font-weight: 700; }
.qsl-home-bridge h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.85rem); color: var(--qsl-dark); }

@media (max-width: 900px) {
  .qsl-header-inner { gap: 1.2rem; }
  .qsl-header .qsl-button { padding-inline: .9rem; }
  .qsl-split { gap: 2rem; }
  .qsl-sample > div { padding: .85rem; }
}

@media (max-width: 720px) {
  .qsl-header-inner { display: grid; grid-template-columns: 1fr auto; padding-top: .7rem; gap: .35rem .7rem; }
  .qsl-logo svg { width: 6.65rem; }
  .qsl-header .qsl-button { grid-column: 2; grid-row: 1; font-size: .82rem; min-height: 2.55rem; }
  .qsl-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .35rem .6rem; font-size: clamp(.77rem, 2.7vw, .94rem); }
  .qsl-nav a { padding-block: .62rem; white-space: nowrap; }
  .qsl-hero-inner, .qsl-split, .qsl-story { grid-template-columns: minmax(0, 1fr); }
  .qsl-hero-copy { padding: 1.8rem 0 1.45rem; }
  .qsl .qsl-hero .qsl-label { margin-bottom: .6rem; }
  .qsl .qsl-back { margin-bottom: .85rem; }
  .qsl .qsl-hero h1 { margin-bottom: .85rem; }
  .qsl .qsl-hero-lead { margin-bottom: 1.15rem; }
  .qsl .qsl-hero-photo { min-height: clamp(14.2rem, 67vw, 23rem); margin-inline: calc(-1 * var(--qsl-gutter)); }
  .qsl-hero-photo img { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
  .qsl-choices { grid-template-columns: 1fr; gap: .85rem; }
  .qsl-choice { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .qsl-choice img { height: 100%; min-height: 9rem; }
  .qsl-choice > div { padding: .85rem; }
  .qsl-choice h3 { font-size: 1.05rem; }
  .qsl-samples { grid-template-columns: minmax(0, 1fr); }
  .qsl-table { font-size: .82rem; }
  .qsl-table :is(td, th) { padding: .55rem .4rem; }
  .qsl-story > div { grid-row: 1; }
}

@media (max-width: 420px) {
  .qsl-brief-panel .qsl-fields { grid-template-columns: minmax(0, 1fr); }
  .qsl-hero-copy .qsl-actions { align-items: flex-start; flex-direction: column; }
}