/* Complete experience design experiment */
body[data-included-version="2"] .included {
  position: relative;
  width: 100%;
  padding-right: max(4vw, calc((100vw - 1480px) / 2));
  padding-left: max(4vw, calc((100vw - 1480px) / 2));
  background:
    radial-gradient(circle at 90% 12%,rgba(243,161,169,.13),transparent 25%),
    #f3eadf;
  overflow: hidden;
}
body[data-included-version="2"] .included::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(30deg,rgba(247,178,181,.04) 12%,transparent 12.5%,transparent 87%,rgba(247,178,181,.04) 87.5%),
    linear-gradient(150deg,rgba(243,161,169,.035) 12%,transparent 12.5%,transparent 87%,rgba(243,161,169,.035) 87.5%);
  background-size: 72px 126px;
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 78%,transparent);
  mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 78%,transparent);
  pointer-events: none;
}
body[data-included-version="2"] .included > * { position: relative; z-index: 1; }
body[data-included-version="2"] .included .section-heading {
  margin-bottom: clamp(65px,8vw,110px);
  grid-template-columns: minmax(0,1.55fr) minmax(260px,.45fr);
  gap: clamp(32px,5vw,80px);
}
body[data-included-version="2"] .included .section-heading > div { max-width: 1020px; }
body[data-included-version="2"] .included .section-heading h2 {
  font-size: clamp(52px,6.2vw,90px);
}
body[data-included-version="2"] .included .section-heading h2 em { color: var(--accent-text); }
body[data-included-version="2"] .included .section-heading > p {
  max-width: 500px;
  font-size: 18px;
  line-height: 1.65;
}
body[data-included-version="2"] .included-grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 18px;
  border: 0;
}
body[data-included-version="2"] .included-grid article {
  position: relative;
  min-height: 420px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #181716;
  transition: transform .4s var(--ease),box-shadow .4s ease;
}
body[data-included-version="2"] .included-grid article:nth-child(1) {
  grid-column: span 7;
  background: #fcf9f4;
  box-shadow: 10px 10px 0 var(--accent-button);
}
body[data-included-version="2"] .included-grid article:nth-child(2) {
  grid-column: span 5;
  color: #fff;
  background: var(--accent-button);
  border-color: var(--accent-button);
}
body[data-included-version="2"] .included-grid article:nth-child(3) {
  grid-column: span 5;
  background: var(--accent-text);
  border-color: var(--accent-button);
}
body[data-included-version="2"] .included-grid article:nth-child(4) {
  grid-column: span 7;
  color: #fff;
  background: #181716;
}
body[data-included-version="2"] .included-grid article::before {
  position: absolute;
  right: -8px;
  top: -22px;
  color: transparent;
  font-family: var(--impact);
  font-size: clamp(120px,13vw,200px);
  letter-spacing: -.1em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(247,178,181,.14);
  pointer-events: none;
}
body[data-included-version="2"] .included-grid article:nth-child(1)::before { content: "01"; }
body[data-included-version="2"] .included-grid article:nth-child(2)::before { content: "02"; -webkit-text-stroke-color: rgba(255,255,255,.15); }
body[data-included-version="2"] .included-grid article:nth-child(3)::before { content: "03"; }
body[data-included-version="2"] .included-grid article:nth-child(4)::before { content: "04"; -webkit-text-stroke-color: rgba(255,255,255,.12); }
body[data-included-version="2"] .included-grid > article > span {
  position: relative;
  z-index: 1;
  color: var(--accent-button);
  font-weight: 700;
}
body[data-included-version="2"] .included-grid article:nth-child(2) > span,
body[data-included-version="2"] .included-grid article:nth-child(4) > span { color: var(--accent-text); }
body[data-included-version="2"] .included-grid h3 {
  position: relative;
  z-index: 1;
  max-width: 500px;
  min-height: 0;
  margin: auto 0 36px;
  font-family: var(--impact);
  font-size: clamp(32px,3.3vw,50px);
  letter-spacing: -.06em;
  line-height: .95;
  text-transform: uppercase;
}
body[data-included-version="2"] .included-grid ul {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
body[data-included-version="2"] .included-grid li {
  position: relative;
  padding: 10px 0 10px 17px;
  color: #5e534d;
  border-color: rgba(24,23,22,.22);
  font-size: 12px;
}
body[data-included-version="2"] .included-grid li::before {
  position: absolute;
  left: 0;
  content: "+";
  color: var(--accent-text);
  font-weight: 700;
}
body[data-included-version="2"] .included-grid article:nth-child(2) li,
body[data-included-version="2"] .included-grid article:nth-child(4) li {
  color: #e5dcd7;
  border-color: rgba(255,255,255,.22);
}
body[data-included-version="2"] .included-grid article:hover {
  z-index: 2;
  transform: translateY(-8px);
  box-shadow: 0 24px 55px rgba(49,31,35,.2);
}

/* Compact included-section switcher */
.included-lab[open] {
  position: fixed; z-index: 900; inset: auto 20px 20px auto; width: auto;
  margin: 0; padding: 6px; display: flex; align-items: center; gap: 5px;
  color: #fff; background: #181716; border: 1px solid #4a4643;
  border-radius: 10px; box-shadow: 0 12px 35px rgba(0,0,0,.24);
}
.included-lab > span {
  padding: 0 7px; color: #dba3b2; font-family: var(--mono);
  font-size: 7px; letter-spacing: .12em; text-transform: uppercase;
}
.included-options { display: flex; gap: 4px; }
.included-options button {
  min-height: 34px; padding: 0 11px; color: #d8d2cd; background: transparent;
  border: 1px solid #4a4643; border-radius: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.included-options button:hover { color: #fff; border-color: #8a817b; }
.included-options button.is-selected { color: #181716; background: var(--accent-button); border-color: var(--accent-button); }

@media (max-width: 800px) {
  body[data-included-version="2"] .included { padding-right: 16px; padding-left: 16px; }
  body[data-included-version="2"] .included .section-heading { grid-template-columns: 1fr; gap: 28px; }
  body[data-included-version="2"] .included .section-heading h2 { font-size: 52px; }
  body[data-included-version="2"] .included .section-heading > p { font-size: 16px; }
  body[data-included-version="2"] .included-grid { grid-template-columns: 1fr; gap: 14px; }
  body[data-included-version="2"] .included-grid article:nth-child(n) {
    grid-column: 1;
    min-height: 390px;
    padding: 28px 24px;
  }
  body[data-included-version="2"] .included-grid h3 { font-size: 39px; }
  body[data-included-version="2"] .included-grid ul { grid-template-columns: 1fr; }
  .included-lab[open] { inset: auto 8px 78px auto; padding: 5px; }
  .included-lab > span { display: none; }
  .included-options button { min-height: 32px; padding: 0 10px; font-size: 7px; }
}
