/* ============================================================
   Legacy Modernization — page-specific styles
   Extends creator_extend_template.css: section padding comes from
   .zwc-section-wrap, headings from .zwc-head, font sizes from the
   template's .pagewrapper tokens (--h2-font-1 / --t20 / --body / --sm).
   ============================================================ */

:root {
  --zwc-grey-50: #f5f5f5;
  --zwc-ink-2: #0f0f0f;
  --zwc-blue-border: #d9e5fb;
  --zwc-red-400: #ff3938;
  --zwc-navy-800: #001349;
  --zwc-navy-line: #1f305b;
  --zwc-navy-line-2: #152f68;
  --zwc-blue-200: #9ab6ff;
  --zwc-blue-300: #6691ff;
  --zwc-card-shadow: 0 7px 17px -4px rgba(0, 0, 0, 0.12);
}

/* Shared base */

/* Page sprite (legacy-moderization-sprite.svg, 949x64). Scoped to these
   sections so the template's own --sprite keeps serving its sections. */
.zwc-legacy,
.zwc-slowdown,
.zwc-rewrite {
  --sprite: url("/sites/zweb/images/creator/extend-template/legacy-moderization-sprite.svg");
}

.zwc-legacy li::before,
.zwc-slowdown .zwc-scard::before,
.zwc-timeline .zwc-tcard::before, 
.zwc-timeline li::before {
  content: "";
  background: var(--sprite) no-repeat;
}

.zwc-legacy ul,
.zwc-slowdown ul,
.zwc-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Left-aligned variant of the template's .zwc-head */
.zwc-legacy .zwc-intro,
.zwc-rewrite .zwc-intro {
  align-items: flex-start;
  width: 45%;
  margin: 0;
  text-align: left;
}

/* Legacy Apps */
.zwc-legacy {
  background-color: #fff;
}

.zwc-legacy .content-wrap {
  justify-content: space-between;
  align-items: flex-start;
}

.zwc-legacy .zwc-head p {
  color: var(--zwc-ink-2);
}

.zwc-legacy .zwc-list {
  width: 51.5%;
}

.zwc-legacy ul {
  gap: 24px 4%;
}

.zwc-legacy li {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 48%;
  min-height: 86px;
  padding: 20px 33px;
  border: 1px solid var(--zwc-blue-border);
  border-radius: 16px;
}

.zwc-legacy li::before {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.zwc-legacy .zwc-icon-1::before {
  background-position: 0 0;
}

.zwc-legacy .zwc-icon-2::before {
  background-position: -47px 0;
}

.zwc-legacy .zwc-icon-3::before {
  background-position: -94px 0;
}

.zwc-legacy .zwc-icon-4::before {
  background-position: -141px 0;
}

.zwc-legacy .zwc-icon-5::before {
  background-position: -188px 0;
}

.zwc-legacy .zwc-icon-6::before {
  background-position: -235px 0;
}

.zwc-legacy li h3 {
  font-size: var(--body);
  font-family: var(--primaryfont-semibold);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--ink);
}

.zwc-legacy .zwc-list p {
  margin-top: 24px;
  font-size: var(--t20);
  font-family: var(--primaryfont-regular);
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--zwc-ink-2);
}

/* End Legacy Apps */

/* Legacy Challenges */
.zwc-challenges {
  background-color: var(--zwc-grey-50);
}

/* End Legacy Challenges */

/* Slowdown */
.zwc-slowdown {
  padding-bottom: 0;
}

.zwc-slowdown .zwc-head {
  max-width: 600px;
}

.zwc-slowdown ul {
  position: relative;
  gap: 5%;
  max-width: 994px;
  margin: 0 auto;
}

.zwc-slowdown ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: var(--g200);
}

.zwc-slowdown li {
  position: relative;
  width: 16%;
  padding-top: 36px;
}

.zwc-slowdown li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 36px;
  margin-left: -1px;
  background-color: var(--g200);
}

.zwc-slowdown .zwc-scard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-height: 180px;
  padding: 28px 11px 22px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: var(--zwc-card-shadow);
}

.zwc-slowdown .zwc-scard::before {
  width: 45.2px;
  height: 45.2px;
  flex-shrink: 0;
}

.zwc-slowdown .zwc-icon-1 .zwc-scard::before {
  background-position: -282px 0;
}

.zwc-slowdown .zwc-icon-2 .zwc-scard::before {
  background-position: -330.2px 0;
}

.zwc-slowdown .zwc-icon-3 .zwc-scard::before {
  background-position: -378.4px 0;
}

.zwc-slowdown .zwc-icon-4 .zwc-scard::before {
  background-position: -426.6px 0;
}

.zwc-slowdown .zwc-icon-5 .zwc-scard::before {
  background-position: -474.8px 0;
}

.zwc-slowdown .zwc-scard h3 {
  font-size: var(--body);
  font-family: var(--primaryfont-semibold);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--ink);
}

/* End Slowdown */

/* Rewrite */
.zwc-rewrite .content-wrap {
  justify-content: space-between;
  align-items: flex-start;
}

.zwc-rewrite .zwc-intro h2 {
  max-width: 472px;
}

.zwc-rewrite .zwc-intro p {
  max-width: 450px;
}

.zwc-rewrite .zwc-intro img {
  display: block;
  width: 70%;
  height: auto;
  margin-top: 16px;
}

.zwc-timeline {
  width: 53.8%;
  border-left: 2px solid var(--g200);
}

.zwc-timeline li {
  position: relative;
  padding-left: 34px;
}

.zwc-timeline li+li {
  margin-top: 24px;
}

.zwc-timeline li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-position: -952px 0;
}

.zwc-timeline .zwc-tcard {
  position: relative;
  padding: 16px 12px 16px 102px;
  background-color: #fff;
  border-left: 2px solid var(--zwc-red-400);
  border-radius: 12px;
}

.zwc-timeline .zwc-tcard::before {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 64px;
  height: 64px;
  margin-top: -32px;
}

.zwc-timeline .zwc-icon-1 .zwc-tcard::before {
  background-position: -523px 0;
}

.zwc-timeline .zwc-icon-2 .zwc-tcard::before {
  background-position: -590px 0;
}

.zwc-timeline .zwc-icon-3 .zwc-tcard::before {
  background-position: -657px 0;
}

.zwc-timeline .zwc-icon-4 .zwc-tcard::before {
  background-position: -724px 0;
}

.zwc-timeline .zwc-icon-5 .zwc-tcard::before {
  background-position: -791px 0;
}

.zwc-timeline .zwc-tcard h3 {
  font-size: var(--t20);
  font-family: var(--primaryfont-semibold);
  line-height: 1.4;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.zwc-timeline .zwc-tcard p {
  padding-top: 4px;
  font-size: var(--body);
  font-family: var(--primaryfont-regular);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--muted);
}

/* End Rewrite */

/* Stacks */
.zwc-stacks {
  background-color: var(--blue-950);
}

.zwc-stacks .zwc-head h2 {
  color: #fff;
}

.zwc-stacks .zwc-head p {
  color: var(--on-dark);
}

.zwc-stacks .zwc-table {
  border: 1px solid var(--zwc-navy-line);
  border-radius: 24px;
  overflow: hidden;
}

.zwc-stacks table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.zwc-stacks thead {
  background-color: var(--zwc-navy-800);
}

.zwc-stacks thead th {
  padding: 24px;
  font-family: var(--primaryfont-semibold);
  font-size: var(--sm);
  line-height: 1.7;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--zwc-blue-200);
}

.zwc-stacks thead th:first-child {
  width: 25.7%;
}

.zwc-stacks thead th:nth-child(2) {
  width: 34.3%;
}

.zwc-stacks thead th:last-child {
  width: 40%;
}

.zwc-stacks tbody tr+tr th,
.zwc-stacks tbody tr+tr td {
  border-top: 1px solid var(--zwc-navy-line);
}

.zwc-stacks tbody th {
  position: relative;
  padding: 24px 24px 24px 44px;
  font-family: var(--primaryfont-semibold);
  font-size: var(--t20);
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: #fff;
  vertical-align: top;
}

.zwc-stacks tbody th::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--zwc-blue-300);
}

.zwc-stacks tbody td {
  padding: 24px;
  border-left: 1px solid var(--zwc-navy-line-2);
  font-family: var(--primaryfont-regular);
  font-size: var(--body);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--on-dark);
  vertical-align: top;
}

.zwc-stacks tbody td strong {
  font-family: var(--primaryfont-semibold);
  color: #fff;
}

/* End Stacks */


.zwc-col {
  width: calc((100% - 270px) / 2);
}

@media (max-width: 1199px) {

  /* Legacy Apps */
  .zwc-legacy li {
    padding: 20px 24px;
  }

  /* End Legacy Apps */

  /* Slowdown */
  .zwc-slowdown .zwc-scard {
    padding: 22px 10px 18px;
  }

  /* End Slowdown */

  /* Stacks */
  .zwc-stacks tbody th {
    padding: 20px 16px 20px 36px;
  }

  .zwc-stacks tbody th::before {
    top: 27px;
    left: 16px;
  }

  .zwc-stacks thead th,
  .zwc-stacks tbody td {
    padding: 20px 16px;
  }

  /* End Stacks */

  .zwc-col {
    width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 991px) {

  /* Legacy Apps */
  .zwc-legacy .zwc-intro,
  .zwc-legacy .zwc-list {
    width: 100%;
  }

  .zwc-legacy .zwc-list {
    margin-top: 40px;
  }

  /* End Legacy Apps */

  /* Slowdown */
  .zwc-slowdown ul {
    gap: 24px 3.5%;
    max-width: none;
    justify-content: center;
  }

  .zwc-slowdown ul::before {
    content: none;
  }

  .zwc-slowdown li {
    width: 31%;
    padding-top: 0;
  }

  .zwc-slowdown li::before {
    content: none;
  }

  .zwc-slowdown .zwc-scard {
    min-height: 0;
  }

  /* End Slowdown */

  /* Rewrite */
  .zwc-rewrite .zwc-intro,
  .zwc-timeline {
    width: 100%;
  }

  .zwc-rewrite .zwc-intro h2,
  .zwc-rewrite .zwc-intro p {
    max-width: none;
  }

  .zwc-rewrite .zwc-intro img {
    width: 55%;
    margin: 12px auto 0;
  }

  .zwc-timeline {
    margin-top: 40px;
    border: none;
  }

  .zwc-timeline li::before{
    display: none;
  }

  .zwc-timeline li{
    padding-left: 0;
  }

  /* End Rewrite */
}

@media (max-width: 767px) {

  .zwc-legacy li h3,
  .zwc-legacy .zwc-list p,
  .zwc-slowdown .zwc-scard h3,
  .zwc-timeline .zwc-tcard h3,
  .zwc-timeline .zwc-tcard p,
  .zwc-stacks tbody th,
  .zwc-stacks tbody td {
    letter-spacing: normal;
    line-height: normal;
  }

  /* Legacy Apps */
  .zwc-legacy ul {
    gap: 16px;
  }

  .zwc-legacy li {
    width: 100%;
    min-height: 74px;
    padding: 14px 20px;
  }

  /* End Legacy Apps */

  /* Slowdown */
  .zwc-slowdown ul {
    gap: 16px 4%;
  }

  .zwc-slowdown li {
    width: 48%;
  }

  /* End Slowdown */

  /* Rewrite */
  .zwc-rewrite .zwc-intro img {
    width: 78%;
  }

  .zwc-timeline .zwc-tcard {
    padding: 14px 12px 14px 86px;
  }

  .zwc-timeline .zwc-tcard::before {
    top: 14px;
    left: 10px;
    margin-top: 0;
  }

  .zwc-timeline li::before {
    top: 46px;
  }

  /* End Rewrite */

  /* Stacks */
  .zwc-stacks .zwc-table {
    border: 0;
    border-radius: 0;
  }

  .zwc-stacks thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .zwc-stacks tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--zwc-navy-line);
    border-radius: 16px;
    overflow: hidden;
  }

  .zwc-stacks tbody tr:last-child {
    margin-bottom: 0;
  }

  .zwc-stacks tbody th,
  .zwc-stacks tbody td {
    display: block;
    border-left: 0;
  }

  .zwc-stacks tbody th {
    padding: 16px 16px 16px 36px;
    background-color: var(--zwc-navy-800);
  }

  .zwc-stacks tbody th::before {
    top: 24px;
  }

  .zwc-stacks tbody tr+tr th {
    border-top: 0;
  }

  .zwc-stacks tbody tr td {
    padding: 16px;
    border-top: 1px solid var(--zwc-navy-line);
  }

  .zwc-stacks tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-family: var(--primaryfont-semibold);
    font-size: var(--sm);
    text-transform: uppercase;
    color: var(--zwc-blue-200);
  }

  /* End Stacks */

  .zwc-col {
    width: 100%;
  }
}

@media (max-width: 480px) {

  /* Slowdown */
  .zwc-slowdown li {
    width: 100%;
  }

  .zwc-slowdown .zwc-scard {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px;
    text-align: left;
  }

  /* End Slowdown */

  /* Rewrite */
  .zwc-rewrite .zwc-intro img {
    width: 100%;
  }

  /* End Rewrite */
}