/* Scoped component only. Do not replace the website stylesheet. */
.dsc-promo {
  container: dsc-promo / inline-size;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block: 0 1.75rem;
}
.dsc-promo__link {
  display: block;
  box-sizing: border-box;
  color: #fffaf0;
  background: #003632;
  border: 1px solid #a17f35;
  border-radius: 10px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: rgba(255, 189, 83, .2);
}
.dsc-promo__link *, .dsc-promo__link *::before, .dsc-promo__link *::after {
  box-sizing: border-box;
}
.dsc-promo__link:visited { color: #fffaf0; }
.dsc-promo__link:hover { border-color: #ffbf59; }
.dsc-promo__link:focus-visible {
  outline: 3px solid #ffbf59;
  outline-offset: 4px;
}
.dsc-promo__wide { display: none; }
.dsc-promo__wide img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.dsc-promo__compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title title"
    "promise promise"
    "body preview"
    "art preview"
    "cta cta";
  gap: 10px 14px;
  padding: 16px;
}
.dsc-promo__eyebrow {
  grid-area: eyebrow;
  display: block;
  color: #ffc163;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-block-end: 0;
}
.dsc-promo__title {
  grid-area: title;
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}
.dsc-promo__promise {
  grid-area: promise;
  display: block;
  color: #ffc163;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-block-start: 0;
  text-wrap: balance;
}
.dsc-promo__middle { display: contents; }
.dsc-promo__body {
  grid-area: body;
  align-self: end;
  display: block;
  font-size: 14px;
  line-height: 1.45;
}
.dsc-promo__body span { display: block; }
.dsc-promo__art { grid-area: art; align-self: start; display: block; min-inline-size: 0; }
.dsc-promo__art picture { display: block; }
.dsc-promo__art img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.dsc-promo__payment {
  display: block;
  color: #ffc163;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  margin-block-start: 5px;
}
.dsc-promo__cta {
  grid-area: cta;
  margin-block-start: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 10px 8px;
  border-radius: 7px;
  background: #ffbf59;
  color: #002d29;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 3px 0 #a87729;
}
/* A visual preview only: the entire banner remains one ordinary link. */
.dsc-promo__preview {
  grid-area: preview;
  display: block;
  align-self: center;
  min-inline-size: 0;
  padding: 11px;
  border: 2px solid #ffbf59;
  border-radius: 12px;
  background: #fffdfa;
  color: #002d29;
  line-height: 1.2;
  text-align: start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
.dsc-promo__preview-brand {
  display: block;
  color: #ad6510;
  font-size: 11px;
  font-weight: 700;
  margin-block-end: 3px;
}
.dsc-promo__preview-title {
  display: block;
  font-size: clamp(12px, 4cqi, 24px);
  overflow-wrap: normal;
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: 9px;
}
.dsc-promo__preview-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
}
.dsc-promo__preview-field {
  display: block;
  padding: 5px;
  border: 1px solid #c8c8c5;
  border-radius: 4px;
  margin-block: 3px 7px;
}
.dsc-promo__preview-field:last-child { margin-block-end: 0; }
.dsc-promo__preview-field::after {
  content: "";
  display: block;
  inline-size: 65%;
  block-size: 6px;
  border-radius: 2px;
  background: #d8d7d3;
}
/* Reflow the content while preserving the white preview at narrow widths. */
@container dsc-promo (min-width: 28rem) {
  .dsc-promo__compact {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "eyebrow preview"
      "title preview"
      "promise preview"
      "body art"
      "cta cta";
    gap: 10px 22px;
  }
  .dsc-promo__body { align-self: center; }
  .dsc-promo__art { align-self: center; }
  .dsc-promo__preview { padding: 14px; }
}
/* The original SCRS_304 artwork is used when its full width is readable. */
@container dsc-promo (min-width: 34rem) {
  .dsc-promo__compact { padding: 24px; }
  .dsc-promo__eyebrow { font-size: 13px; }
  .dsc-promo__title { font-size: 32px; }
  .dsc-promo__promise { font-size: 18px; }
  .dsc-promo__body { font-size: 16px; }
  .dsc-promo__payment { font-size: 12px; }
}
@container dsc-promo (min-width: 50rem) {
  .dsc-promo__compact { display: none; }
  .dsc-promo__wide { display: block; }
}
@media (forced-colors: active) {
  .dsc-promo__link { border: 2px solid LinkText; }
  .dsc-promo__wide { display: none; }
  .dsc-promo__compact { display: grid; }
  .dsc-promo__cta { border: 1px solid ButtonText; }
}

/* The banner spans the same full content width as the header. */
.dsc-promo-hero { padding-top: 42px; }
.dsc-promo-hero .hero-grid { align-items: start; }
.dsc-promo-hero .mobile-portrait-card { margin-top: 0; }
/* Existing type and mobile layout stay scoped to this hero. */
.dsc-promo__compact { overflow-wrap:anywhere; }
.dsc-promo__link:hover { color:#fffaf0; }
.hero .hero-content-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight:500;
  color:var(--ivory);
  font-size:clamp(1.218rem,1.856vw,1.4848rem);
  line-height:1.22;
  letter-spacing:normal;
  text-transform:none;
  margin:0 0 8px;
}
.dsc-promo + .mobile-portrait-card { margin-top:0; }
.language-entry { max-width:720px;margin:0 auto;padding:48px 22px; }
.language-entry .brand { margin-bottom:32px; }
.language-entry h1 { font-size:clamp(1.75rem,5vw,2.6rem);line-height:1.2; }
.language-entry .actions { margin-top:28px; }
@media(max-width:640px){
  .dsc-promo-hero{padding-top:32px;}
  .dsc-promo-hero .kicker{display:none;}
  .hero .hero-content-heading {
    font-size:clamp(1.58rem,7.35vw,2.2rem);line-height:1.15;margin-bottom:16px;
  }
}
@media(max-width:374px){.hero .hero-content-heading{font-size:1.48rem;}}

/* Extra breathing room only once the desktop content reaches its full width. */
@media (min-width: 1180px) {
  .dsc-promo-hero .dsc-promo { margin-block-end: 3rem; }
}