/* ==========================================================================
   3) OFFER SELECTOR — /offer/
   ========================================================================== */

.offer-root--selector{
  width:min(100%, var(--offer-maxw));
  min-height:calc(100dvh - var(--top-safe-h, 150px) - 24px);
  margin:0 auto;
  padding:20px 18px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;
  position:relative;
  isolation:isolate;
}

.offer-root--selector::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:#000;
}

.offer-root--selector::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.10;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.11) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 1px, transparent 1px 22px);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 74%, transparent);
}

.offer-selector-hero{
  width:min(100%, var(--offer-narrow));
  margin:0 auto;
  padding:22px 0 18px;
  background:transparent;
  border:0;
  box-shadow:none;
  position:relative;
  z-index:5;
}

.offer-selector-hero::after,
.offer-detail-hero::after,
.offer1-band::after,
.offer1-sample-head::after,
.offer2-hero::after,
.offer2-offer-shell::after,
.offer2-demo-shell::after,
.offer3-band::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
}

.offer-selector-kicker,
.offer-detail-kicker{
  margin:0 0 10px;
  font-size:12px;
  line-height:1;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}

.offer-selector-title{
  margin:0;
  max-width:900px;
  font-size:clamp(28px, 5vw, 62px);
  line-height:.96;
  font-weight:400;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:rgba(246,246,246,.92);
}

.offer-selector-lead{
  margin:14px 0 0;
  max-width:880px;
  font-size:14px;
  line-height:1.58;
  color:rgba(220,220,220,.68);
}

.offer-choice-grid{
  width:min(100%, var(--offer-maxw));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  position:relative;
  z-index:5;
}


/* ==========================================================================
   4) OFFER SELECTOR CARDS
   ========================================================================== */

.offer-choice-card{
  position:relative !important;
  isolation:isolate !important;
  contain:paint !important;
  overflow:hidden !important;
  min-height:330px;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start;
  gap:12px;
  padding:20px 18px 18px;
  background:#000 !important;
  color:rgba(255,255,255,.88);
  box-shadow:none;
  text-decoration:none;
  transform:translateZ(0);
  transition:
    background-color .14s ease,
    transform .12s ease,
    opacity .14s ease;
}

.offer-choice-card::before{
  content:none !important;
}

.offer-choice-card > .offer-choice-bg-media{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  flex:none !important;
  order:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

.offer-choice-card > .offer-choice-bg-media,
.offer-choice-card > .offer-choice-bg-media *{
  pointer-events:none !important;
}

.offer-choice-card > .offer-choice-bg-media > .offer-choice-bg-img{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:.56 !important;
  visibility:visible !important;
  pointer-events:none !important;
  filter:grayscale(.42) contrast(1.08) brightness(.92) !important;
  transform:scale(1.01) translateZ(0) !important;
  transition:
    opacity .18s ease,
    transform .20s ease,
    filter .18s ease;
}

.offer-choice-card > .aa-ascii-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
}

.offer-choice-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.68)),
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 44%, rgba(0,0,0,.28)) !important;
}

.offer-choice-card > :not(.offer-choice-bg-media):not(.aa-ascii-layer),
.offer-choice-kicker,
.offer-choice-title,
.offer-choice-subtitle,
.offer-choice-desc,
.offer-choice-cta{
  position:relative !important;
  z-index:30 !important;
  transform:translateZ(0);
}

.offer-choice-card:hover{
  transform:translateY(-1px) translateZ(0);
  background:#000 !important;
}

.offer-choice-card:hover .offer-choice-bg-img,
.offer-choice-card.is-aa-ascii-hot .offer-choice-bg-img{
  opacity:.72 !important;
  filter:grayscale(.22) contrast(1.12) brightness(1.02) !important;
  transform:scale(1.03) translateZ(0) !important;
}

.offer-choice-card:focus-visible{
  outline:1px solid rgba(255,255,255,.42);
  outline-offset:2px;
}

.offer-choice-kicker{
  display:block;
  width:max-content;
  max-width:100%;
  padding:5px 7px;
  background:rgba(0,0,0,.62);
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.offer-choice-title{
  display:block;
  margin-top:18px;
  font-size:24px;
  line-height:1.08;
  font-weight:400;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 2px rgba(0,0,0,.92);
}

.offer-choice-subtitle{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:rgba(236,236,236,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.88);
}

.offer-choice-desc{
  display:block;
  font-size:13px;
  line-height:1.58;
  color:rgba(220,220,220,.66);
  text-shadow:0 1px 2px rgba(0,0,0,.88);
}

.offer-choice-cta{
  margin-top:auto;
}





/* ============================================================================
   13) OFFER ECOSYSTEM — IMAGE PRODUCT CARDS
   ========================================================================== */

.offer-root--selector.offer-root--ecosystem{
  width:min(100%, var(--offer-maxw-wide, 1240px)) !important;
  min-height:calc(100dvh - var(--top-safe-h, 150px) - 24px) !important;
  margin:0 auto !important;
  padding:clamp(20px, 3vw, 38px) 18px 58px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:clamp(28px, 3.8vw, 46px) !important;
  position:relative !important;
  isolation:isolate !important;
  color:var(--offer-text, rgba(230,230,230,.86)) !important;
  font-family:var(--offer-ui-font, var(--ui-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)) !important;
}

.offer-root--selector.offer-root--ecosystem::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-3 !important;
  pointer-events:none !important;
  background:#000 !important;
}

.offer-root--selector.offer-root--ecosystem::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  opacity:.065 !important;
  background-image:radial-gradient(circle, rgba(255,255,255,.40) 0 1px, transparent 1.3px) !important;
  background-size:18px 18px !important;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%) !important;
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%) !important;
}

.offer-root--ecosystem .offer-selector-hero{
  width:min(100%, 1040px) !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.offer-root--ecosystem .offer-selector-hero::after{
  content:none !important;
  display:none !important;
}

.offer-root--ecosystem .offer-selector-kicker{
  margin:0 0 10px !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.42) !important;
}

.offer-root--ecosystem .offer-selector-title{
  margin:0 !important;
  max-width:900px !important;
  font-size:clamp(34px, 4vw, 52px) !important;
  line-height:1 !important;
  font-weight:400 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  color:rgba(248,248,248,.95) !important;
  text-shadow:0 2px 16px rgba(0,0,0,.72) !important;
}

.offer-root--ecosystem .offer-selector-lead{
  margin:13px 0 0 !important;
  max-width:820px !important;
  font-size:13px !important;
  line-height:1.58 !important;
  color:rgba(222,222,222,.62) !important;
}

.offer-ecosystem-stack{
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:clamp(34px, 4vw, 52px) !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.offer-ecosystem-category{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.offer-ecosystem-category-head{
  width:100% !important;
  margin:0 !important;
  padding:0 0 14px !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
}

.offer-ecosystem-category-eyebrow{
  margin:0 0 6px !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.30) !important;
}

.offer-ecosystem-category-title{
  margin:0 !important;
  font-size:clamp(20px, 2.1vw, 28px) !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
  color:rgba(248,248,248,.90) !important;
}

.offer-product-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  width:100% !important;
  min-width:0 !important;
  margin:14px 0 0 !important;
  padding:0 !important;
}

.offer-product-box,
.offer-product-box:link,
.offer-product-box:visited{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:9px !important;
  min-width:0 !important;
  min-height:300px !important;
  aspect-ratio:1.12 / 1 !important;
  padding:16px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  contain:paint !important;
  background:#050505 !important;
  border:1px solid rgba(255,255,255,.075) !important;
  color:rgba(255,255,255,.90) !important;
  text-decoration:none !important;
  box-shadow:0 18px 34px rgba(0,0,0,.48) !important;
  transform:translateZ(0) !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.offer-product-box:hover,
.offer-product-box:focus-visible{
  transform:translateY(-2px) translateZ(0) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:0 24px 46px rgba(0,0,0,.60) !important;
  outline:0 !important;
}

.offer-product-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  pointer-events:none !important;
  overflow:hidden !important;
  background:#050505 !important;
}

.offer-product-bg-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  opacity:.56 !important;
  filter:grayscale(.28) contrast(1.08) brightness(.74) !important;
  transform:scale(1.015) !important;
  transition:opacity .22s ease, filter .22s ease, transform .28s ease !important;
}

.offer-product-box:hover .offer-product-bg-img,
.offer-product-box:focus-visible .offer-product-bg-img{
  opacity:.72 !important;
  filter:grayscale(.10) contrast(1.10) brightness(.86) !important;
  transform:scale(1.035) !important;
}

.offer-product-shade{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.15) 34%, rgba(0,0,0,.76) 72%, rgba(0,0,0,.95) 100%),
    linear-gradient(90deg, rgba(0,0,0,.38), transparent 54%, rgba(0,0,0,.18)) !important;
}

.offer-product-topline,
.offer-product-chips,
.offer-product-title,
.offer-product-text{
  position:relative !important;
  z-index:3 !important;
}

.offer-product-topline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  margin-bottom:auto !important;
}

.offer-product-tag,
.offer-product-open,
.offer-product-chip{
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  padding:4px 7px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.56) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  font-size:8.5px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
}

.offer-product-open{
  color:rgba(255,255,255,.42) !important;
  border-color:rgba(255,255,255,.07) !important;
}

.offer-product-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  margin:0 0 2px !important;
}

.offer-product-chip{
  min-height:18px !important;
  padding:4px 6px !important;
  font-size:8px !important;
  letter-spacing:.09em !important;
  color:rgba(255,255,255,.58) !important;
  background:rgba(0,0,0,.48) !important;
}

.offer-product-title{
  margin:0 !important;
  font-size:clamp(17px, 1.65vw, 22px) !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:.052em !important;
  text-transform:uppercase !important;
  color:rgba(250,250,250,.96) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.90) !important;
}

.offer-product-text{
  margin:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  font-size:11.5px !important;
  line-height:1.48 !important;
  color:rgba(226,226,226,.66) !important;
  text-shadow:0 1px 8px rgba(0,0,0,.94) !important;
}

.offer-product-box.is-coming-soon::after{
  content:"COMING SOON" !important;
  position:absolute !important;
  right:12px !important;
  bottom:12px !important;
  z-index:5 !important;
  padding:5px 7px !important;
  background:rgba(0,0,0,.66) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.50) !important;
  font-size:8px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}



/* Responsive rules for the ecosystem overview and shared offer chrome. */
@media (max-width:980px){
  .offer-root--selector{padding-left:12px;padding-right:12px;}
}
@media (max-width:900px){
  .offer-mobile-home{display:flex;}
}
@media (max-width:820px){
  .offer-root--selector{min-height:0;justify-content:flex-start;padding-top:14px;}
  .offer-selector-hero{padding-top:18px;padding-bottom:16px;}
}
@media (max-width:560px){
  .offer-selector-title{font-size:28px;line-height:1.02;}
  .offer-selector-lead{font-size:13px;line-height:1.55;}
}
@media (pointer:coarse), (max-width:900px), (prefers-reduced-motion:reduce){
  .aa-ascii-layer{display:none !important;}
  .aa-ascii-target.is-aa-ascii-hot .aa-ascii-layer{opacity:0 !important;animation:none !important;}
}