/* ==========================================================================
   Shared spacing
   ========================================================================== */
.zwc-secpad {
  padding: 120px 0 70px;
}

.zwc-secmar {
  margin: 90px 0;
}

* {
  text-wrap-style: pretty;
}

/* ==========================================================================
   Buttons — primary uses the global .act-btn.cta-btn (revealed by framework);
   secondary (.cta-sec-btn) is defined locally per the product convention.
   ========================================================================== */
.act-btn {
  padding: 16px 32px;
}

.cta-sec-btn {
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  color: #000;
  border: 2px solid #000;
  border-radius: 4px;
  font-family: var(--zf-primary-semibold), sans-serif;
  font-size: 15px;
  text-transform: uppercase;
}

/* ==========================================================================
   Typography — serif for display type; regular is inherited from customcss.
   Sizes are set only for desktop (>=1200px) further below.
   ========================================================================== */
.zwc-wrapper h1,
.zwc-wrapper h2,
.zwc-feature h3,
.zwc-faq__q,
.zwc-platform__problem p,
.zwc-platform__solution p {
  font-family: var(--zf-primary-regularserif);
  line-height: 1.14;
}

.umain .zwc-banner-signup {
  display: none;
}

.umain .zwc-banner__head {
  margin: 0 auto;
  text-align: center;
  max-width: 820px;
}

.zwc-banner h1 {
  letter-spacing: -2.16px;
  line-height: 1.11;
  font-size: 42px;
}

.zwc-banner__head p {
  margin: 20px 0 0;
}

.zwc-wrapper p {
  font-size: 18px;
}

/* Capped against the viewport so "CommunitySpaces" — the longest unbreakable word
   in these headings — still fits the content box on the narrowest phones. */
.zwc-wrapper h2 {
  font-size: min(38px, 11vw);
}

.zwc-advantage h3 {
  font-family: var(--primaryfont-semibold);
  line-height: 1.3;
}

/* ==========================================================================
   Hero banner
   ========================================================================== */
.zwc-banner {
  padding: 80px 0;
  position: relative;


  &::before {
    content: '';
    background: url(/sites/zweb/images/communityspaces/home/hero-bg.png) no-repeat bottom center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    left: 50%;
    bottom: 24%;
    transform: translateX(-50%);
    position: absolute;
    z-index: -1;
  }
}

.umain .zwc-banner__head p {
  max-width: 720px;
  margin: 20px auto 0;
}

.umain .zwc-banner__btns {
  justify-content: center;
}

.zwc-banner__btns {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.zwc-banner__media {
  margin: 70px 0 0 0;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: 1.2px solid #DADDE8;
    background: linear-gradient(153deg, rgba(132, 200, 255, 0.13) 0%, rgba(254, 210, 254, 0.25) 100%);
    backdrop-filter: blur(5px);
    z-index: -1;
  }
}

.zwc-banner__media img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 24px 48px rgba(10, 13, 18, 0.18));
  border-radius: 12px;
}

.zws-signup-box :is(.sgfrm, .wrap-elm) input:focus,
.zws-signup-box .za-otp-container input:focus {
  outline: 1.5px solid var(--sp-fc-color);
}

/* ==========================================================================
   Platform / tab section
   ========================================================================== */
.zwc-platform {
  margin: 50px 0 130px;
}

.zwc-platform h2 {
  margin-bottom: 56px;
  text-align: center;
}

.zwc-platform__tabs {
  position: relative;
  display: flex;
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: 60px;
  margin-inline: auto;
  max-width: 1100px;
}

.zwc-platform__tab {
  flex: 1;
  padding: 16px 24px;
  color: #1a1a1a;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--primaryfont-regular);
  transition: color 0.3s ease;
  font-size: 20px;
}

.zwc-platform__tab--active {
  font-family: var(--primaryfont-semibold);
}

/* Underline that floats to the active tab — width/position set in JS */
.zwc-platform__indicator {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00D9FF -10.15%, #425DC7 21%, #5B2DB1 40.73%, #3945BA 72.17%, #016CCA 109.7%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.zwc-platform__panels {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.zwc-platform__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  grid-row-start: 1;
  grid-column-start: 1;
  opacity: 0;
}

.zwc-platform__panel--active {
  opacity: 1;
}

.zwc-platform__problem,
.zwc-platform__solution {
  flex-basis: 30%;
}

.zwc-platform__problem {
  align-self: flex-start;
  padding-top: 10px;

  p {
    margin-bottom: 0;
  }
}

.zwc-platform__solution {
  align-self: flex-end;

}

.zwc-platform__solution p {
  margin-bottom: 0;
}

.zwc-platform__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--primaryfont-semibold);
  text-transform: uppercase;
}

.zwc-platform__label--problem {
  color: #e42527;
}

.zwc-platform__label--solution {
  color: #24a426;
}

.zwc-platform__media {
  flex-basis: 40%;
  border-radius: 24px;
  overflow: hidden;
}

.zwc-platform__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Feature: sticky intro + scroll-synced cards
   ========================================================================== */
/* The reef is anchored to the viewport rather than the page: with a fixed
   attachment the background's positioning area is the viewport, so `center bottom`
   means the bottom of the screen and the artwork never moves as the section
   scrolls — the section's own edges reveal and then wipe it.
   z-index:0 keeps the stacking context so the cards' glow still paints over it.
   The band's height is capped against the viewport height: it would otherwise
   scale with viewport *width* only (the artwork is 1208x428) and swallow the
   column on short screens. The top quarter of the artwork is a white fade, which
   is what the heading and paragraph sit on.
   The veil is a white layer over the band, raised by JS while the section is
   still sliding in (see --veiled below). Its alpha is animatable because the
   property is registered, and it is a background layer rather than an element so
   it can never spill past the section. */
@property --zwc-reef-veil {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.zwc-feature {
  --zwc-reef-h: min(35.43vw, 52vh);
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--zwc-reef-veil)), rgba(255, 255, 255, var(--zwc-reef-veil))),
    url(/sites/zweb/images/communityspaces/home/fearuresec-bg.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center bottom;
  background-size: 100% var(--zwc-reef-h), 100% var(--zwc-reef-h);
  background-attachment: fixed, fixed;
  transition: --zwc-reef-veil 0.45s ease;
}

/* Hides the reef until the column reaches its pin line, so the heading and
   paragraph never cross the artwork on their way up. */
.zwc-feature--veiled {
  --zwc-reef-veil: 1;
}

.zwc-feature__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 58px;
  padding-bottom: 80px;
}

/* Left column: pinned while the cards stack, at the same offset as the cards. JS
   matches its box height to the pinned card's, so centring here lines the heading
   up with the middle of the card rather than its top edge. */
.zwc-feature__intro {
  position: sticky;
  top: 140px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zwc-feature__head {
  max-width: 564px;
}

.zwc-feature__head p {
  margin-top: 16px;
}

.zwc-feature h2 {
  letter-spacing: -1.68px;
}

/* Tag indicators */
.zwc-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 536px;
  margin-top: 48px;
}

.zwc-feature__tag {
  position: relative;
  z-index: 0;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #d5dbff;
  border-radius: 25px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
  font-size: 18px;
}

/* Gradient fill lives on a pseudo and fades in on activation: a background-image
   swap cannot animate, and a transparent border over the gradient renders a dark
   fringe on the rounded caps — so the fill covers the whole border box instead. */
.zwc-feature__tag::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #00d9ff 0%, #425dc7 50%, #5b2db1 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.zwc-feature__tag--active {
  font-family: var(--primaryfont-semibold);
  color: #ffffff;
  border-color: transparent;
}

.zwc-feature__tag--active::before {
  opacity: 1;
}

/* Right column: cards stack on top of each other as you scroll — each pins,
   the next slides over it, and the covered ones shrink/recede (transforms in JS). */
.zwc-feature__card {
  position: sticky;
  top: 140px;
  transform-origin: center top;
  will-change: transform;
}

/* Inter-card spacing (uniform pacing) and the matched card heights that release the
   deck in one piece are set in JS; this is only a no-JS fallback gap. */
.zwc-feature__card+.zwc-feature__card {
  margin-top: 10vh;
}

/* Trailing scroll room (added by JS) that keeps the last card pinned before the
   whole deck releases — also the empty run of reef below the stack. */
.zwc-feature__spacer {
  height: 35vh;
}

/* The padding is held in custom properties so a bleeding media block can cancel
   exactly as much as the current breakpoint applies. */
.zwc-feature__card-inner {
  --zwc-card-pad-y: 56px;
  --zwc-card-pad-x: 60px;
  background: #ffffff;
  border: 1px solid #b0d4e3;
  border-radius: 20px;
  padding: var(--zwc-card-pad-y) var(--zwc-card-pad-x);
  box-shadow: 0 24px 60px -28px rgba(66, 93, 199, 0.3);
  position: relative;
}

.zwc-feature__card-inner::before {
  content: '';
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1.2px solid #dadde8;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(132, 200, 255, 0.25) 0%, rgba(254, 210, 254, 0.50) 100%);
  backdrop-filter: blur(5px);
  z-index: -1;
}

.zwc-feature h3 {
  letter-spacing: -0.64px;
}

.zwc-feature__card-inner p {
  max-width: 460px;
  margin-top: 20px;
}

.zwc-feature__media {
  margin-top: 20px;
}

.zwc-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ==========================================================================
   CommunitySpaces advantage
   ========================================================================== */
.zwc-advantage {
  background: #ebf9ff;
}

.zwc-advantage__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 120px;
}

.zwc-advantage__intro {
  flex: 0 0 515px;
}

.zwc-advantage h2 {
  letter-spacing: -1.68px;
  margin-bottom: 20px;
}

.zwc-advantage__list {
  flex: 1;
}

.zwc-advantage__item+.zwc-advantage__item {
  margin-top: 56px;
}

.zwc-advantage__item {
  display: flex;
  gap: 20px;
  max-width: 510px;
}

.zwc-advantage__icon {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
}

.zwc-advantage__text h3 {
  margin-bottom: 16px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.zwc-faq {
  background: linear-gradient(180deg, #ebf9ff 30%, #ffffff 70%);
}

section.zwc-faq.zwc-secpad {
  padding: 60px 0 50px;
}

.zwc-faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.zwc-faq h2 {
  flex: 0 0 290px;
  letter-spacing: -1.68px;
}

.zwc-faq__list {
  flex: 1;
}

.zwc-faq__item+.zwc-faq__item {
  margin-top: 16px;
}

.zwc-faq__item {
  background: #ffffff;
  border: 1px solid #bbdcea;
  border-radius: 8px;
  padding: 20px 50px 20px 20px;
}

.zwc-faq__q {
  position: relative;
  width: 100%;
  padding: 0 44px 0 0;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000000;
  letter-spacing: -0.44px;
  font-size: 20px;
}

/* +/- toggle icon */
.zwc-faq__q::before,
.zwc-faq__q::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  width: 24px;
  height: 24px;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  box-sizing: border-box;
}

.zwc-faq__q::after {
  border: none;
  background:
    linear-gradient(#1a1a1a, #1a1a1a) center / 12px 1.5px no-repeat,
    linear-gradient(#1a1a1a, #1a1a1a) center / 1.5px 12px no-repeat;
  transition: transform 0.35s ease, opacity 0.2s ease;
}

.zwc-faq__item--active .zwc-faq__q::after {
  /* collapse the vertical bar so a minus remains */
  background:
    linear-gradient(#1a1a1a, #1a1a1a) center / 12px 1.5px no-repeat,
    linear-gradient(#1a1a1a, #1a1a1a) center / 1.5px 0 no-repeat;
}

.zwc-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.zwc-faq__a p {
  max-width: 690px;
  padding-top: 12px;
  margin-bottom: 0;
}

/* ==========================================================================
   Bottom CTA
   ========================================================================== */
.zwc-cta {
  text-align: center;
  background: #ffffff url(/sites/zweb/images/communityspaces/home/ctasec-bg.png) no-repeat center bottom / 100% auto;
  padding: 90px 0 110px;
}

.zwc-cta h2 {
  margin: 0 auto;
  letter-spacing: -1.68px;
  font-size: 32px;
}

.zwc-cta__inner p {
  max-width: 560px;
  margin: 20px auto 0;
}

.zwc-cta__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 40px 0 60px;
}

/* ==========================================================================
   Image reveals — framework adds .middle-animated to .content-wrap at the
   viewport middle. Only images animate; text stays static.
   ========================================================================== */
.zwc-banner__media img,
.zwc-advantage__icon {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.middle-animated .zwc-banner__media img,
.middle-animated .zwc-advantage__icon {
  opacity: 1;
  transform: none;
}

/* Platform panel: content glides in on scroll-in and on every tab switch,
   lightly staggered problem -> media -> solution */
.zwc-platform__media {
  opacity: 0;
}

.middle-animated .zwc-platform__panel--active .zwc-platform__problem,
.middle-animated .zwc-platform__panel--active .zwc-platform__solution {
  animation: zwcFadeUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.middle-animated .zwc-platform__panel--active .zwc-platform__media {
  animation: zwcFadeIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.middle-animated .zwc-platform__panel--active .zwc-platform__solution {
  animation-delay: 0.16s;
}

.i18n-pt-br .zwc-banner__grpimg--1 {
  width: 17%;
}

.i18n-es-xl .zwc-banner__grpimg--1 {
  width: 15%;
  left: -5%;
  top: 23%;
}

.i18n-ar .lang-rtl .zwc-banner__grpimg--2 {
  left: -2%;
  right: unset;
}

@keyframes zwcFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes zwcFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (min-width: 1200px) {

  .zwc-secpad {
    padding: 120px 0 70px;
  }

  .zwc-cta {
    padding: 120px 0 120px;
  }

  .zwc-secmar {
    margin: 100px 0 220px;
  }

  .zwc-banner__head {
    max-width: 710px;
  }

  .zwc-banner h1 {
    font-size: 64px;
  }

  .zwc-wrapper h2 {
    font-size: 56px;
  }

  .zwc-banner {
    padding: 110px 0 90px;
  }

  .zwc-banner-signup h2 {
    font-size: 24px;
  }

  .zwc-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
  }

  .zwc-banner h1 {
    font-size: 64px;
  }

  .zwc-banner__btns .act-btn {
    display: none;
  }

  /* The head's 790px cap wins the row until ~1310px, which squeezed the form down
     to 290px at 1200px. Hold a usable width and let the head give way instead. */
  .zwc-banner-signup {
    margin-inline: unset;
  }

  .zwc-platform__label {
    font-size: 16px;
  }

  .zwc-platform__tab {
    font-size: 18px;
  }

  .zwc-platform__problem p {
    font-size: 28px;
  }

  .zwc-platform__solution p {
    font-size: 32px;
  }

  .zwc-feature h3 {
    font-size: 32px;
  }

  .zwc-advantage h3 {
    font-size: 24px;
  }

  .zwc-faq__q {
    font-size: 22px;
  }

  .zwc-faq__a p {
    font-size: 16px;
  }

  .zwc-feature__intro {
    width: 600px;
  }

  .zwc-feature__cards {
    width: 621px;
  }

  .zwc-faq h2 {
    flex: 0 0 380px;
  }

  .other-lang .zwc-linksec {
    padding-bottom: 50px;
  }

  .other-lang .zwc-secpad {
    padding: 100px 0;
  }
}

@media only screen and (min-width: 1200px) {

  .i18n-es-xl .zwc-advsec__head h2,
  .i18n-de .zwc-advsec__head h2,
  .i18n-fr .zwc-advsec__head h2 {
    font-size: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .other-lang .zwc-advsec__head.zwc-dflex h2 {
    font-size: 40px;
  }
}

@media only screen and (min-width: 1600px) {
  .zwc-cta {
    padding-top: 150px;
    padding-bottom: 150px;
  }
}

@media only screen and (min-width: 2560px) {
  .zwc-cta {
    padding-top: 210px;
    padding-bottom: 270px;
  }
}

/* Large desktop — the taller viewport stretched the vh-based dwell below the card
   deck into an empty run of reef, so tighten the feature section's tail. */
@media only screen and (min-width: 1440px) {
  .zwc-feature__inner {
    padding-bottom: 40px;
  }

  .zwc-feature__spacer {
    height: 20vh;
  }
}

@media only screen and (max-width: 1280px) {
  .zwc-banner__inner {
    gap: 60px;
  }

  .zwc-banner h1 {
    font-size: 45px;
  }

  .zwc-banner__head {
    max-width: 600px;
  }
}

/* Large tablet */
@media only screen and (max-width: 1199px) {
  .zwc-banner__head {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
  }

  .zwc-banner__btns {
    justify-content: center;
  }

  .zwc-banner__media {
    margin-inline: auto;
    max-width: 700px;
  }

  /* Single column below 1200px — the intro stops pinning and sits above a centred
     card stack, and the reef reverts to a normal scrolling section background (the
     shorthand resets the fixed attachment and the viewport-capped size). */
  .zwc-feature {
    background: #ffffff url(/sites/zweb/images/communityspaces/home/fearuresec-bg.png) no-repeat center bottom / 100% auto;
  }

  .zwc-feature__inner {
    flex-direction: column;
    gap: 40px;
  }

  .zwc-feature__intro {
    position: static;
    width: 100%;
  }

  .zwc-feature__head {
    margin-inline: auto;
    text-align: center;
  }

  /* The tags are a live indicator for the pinned deck; stacked, they would scroll
     away from the card they point at. */
  .zwc-feature__tags {
    display: none;
  }

  /* Centred card stack. The auto inline margins beat the row's align-items. */
  .zwc-feature__cards {
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
  }

  .zwc-feature__card+.zwc-feature__card {
    margin-top: 6vh;
  }

  .zwc-feature__card-inner {
    --zwc-card-pad-y: 40px;
    --zwc-card-pad-x: 40px;
  }

  .zwc-feature__card-inner p {
    margin-inline: auto;
  }

  .zwc-advantage__inner {
    gap: 60px;
  }

  .zwc-advantage__intro {
    flex-basis: 440px;
  }
}

/* Tablet */
@media only screen and (max-width: 991px) {
  .zwc-banner::before {
    background-size: cover;
  }

  .cta-sec-btn {
    background: #fff;
  }

  .zwc-platform__panel {
    max-width: 400px;
    margin-inline: auto;
    gap: 20px;
  }

  .zwc-platform {
    margin-bottom: 80px;
  }

  .zwc-platform__panel--active {
    flex-direction: column;
  }

  .zwc-platform__tabs {
    max-width: 700px;
    margin-bottom: 40px;
  }

  .zwc-platform__problem,
  .zwc-platform__solution {
    padding: 0;
    text-align: center;
    margin-inline: auto;
    flex-basis: unset;
  }

  .zwc-platform__media {
    flex-basis: unset;
  }

  /* The feature section's single-column treatment now starts at 1199px — see the
     max-width: 1199px block above. */

  .zwc-advantage__inner,
  .zwc-faq__inner {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  /* min-width:0 overrides a flex item's automatic minimum size — otherwise the
     heading's longest word sets the column's width and pushes it off the
     content-wrap's right edge (centring falls back to start alignment). */
  .zwc-advantage__intro {
    flex-basis: auto;
    text-align: center;
    max-width: 500px;
    min-width: 0;
    margin-inline: auto;
  }

  .zwc-advantage__item {
    margin-inline: auto;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .zwc-advantage__item+.zwc-advantage__item {
    margin-top: 30px;
  }

  .zwc-faq {
    padding-top: 0;
  }

  .zwc-faq h2 {
    flex-basis: 100%;
    text-align: center;
    margin-inline: auto;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .zwc-banner h1 {
    font-size: 38px;
    letter-spacing: -1.16px;
  }

  .zwc-banner {
    padding: 70px 0 140px;
  }

  .zwc-banner::before {
    bottom: 0;
  }

  .zwc-banner__media {
    display: none;
  }

  .zwc-banner__btns,
  .zwc-cta__btns {
    flex-direction: column;
    align-items: center;
    max-width: 330px;
    margin-inline: auto;
  }

  .act-btn,
  .cta-sec-btn {
    width: 100%;
  }

  /* Tabs as pills (matching the feature tags — no longer repetitive since the
     feature tags are hidden on mobile) */
  .zwc-platform__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    border-bottom: none;
    margin-bottom: 40px;
  }

  .zwc-platform__indicator {
    display: none;
  }

  .zwc-platform__tab {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #d5dbff;
    border-radius: 25px;
    transition: color 0.4s ease, border-color 0.4s ease;
    font-size: 17px;
  }

  .zwc-platform__tab::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #00D9FF -10.15%, #425DC7 21%, #5B2DB1 40.73%, #3945BA 72.17%, #016CCA 109.7%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .zwc-platform__tab--active {
    color: #ffffff;
    border-color: transparent;
  }

  .zwc-platform__tab--active::before {
    opacity: 1;
  }

  .zwc-platform__media {
    width: 100%;
  }

  .zwc-feature__card {
    top: 80px;
  }

  .zwc-feature__card-inner {
    --zwc-card-pad-y: 28px;
    --zwc-card-pad-x: 24px;
  }

  .zwc-cta h2 {
    max-width: 400px;
  }

  .zwc-cta {
    background-position-x: left;
    background-size: cover;
  }
}

/* ==========================================================================
   Feature section, desktop layout. The reef band is sized against the viewport,
   so the pin offset and the card scale with it too: that keeps the pinned card
   inside the fold and the centred heading on the white top of the artwork.
   Placed after the max-width blocks above so these ranges win.
   ========================================================================== */
@media only screen and (min-width: 1200px) {

  .zwc-feature__intro,
  .zwc-feature__card {
    top: clamp(80px, 13vh, 140px);
  }

  /* Safety valve for short viewports: shortens a tall card rather than letting it
     run past the fold. Sized so it only engages when it has to, and contain keeps
     the artwork undistorted when it does. */
  .zwc-feature__media img {
    max-height: 46vh;
    object-fit: contain;
  }

  /* The centred column grows downward from its middle, so this gap lifts the
     heading and paragraph clear of the water while the tags — which carry their
     own white pills — are free to sit on it. */
  .zwc-feature__tags {
    margin-top: 72px;
  }

  /* The ring artwork is drawn running off the corner, so its block cancels the
     card's padding on the right and bottom to sit flush with those edges. The
     corner is clipped to the card's inner radius (20px border-radius less the
     1px border) so nothing shows outside the card over the reef. */
  .zwc-feature__media--bleed {
    margin-right: calc(var(--zwc-card-pad-x) * -1);
    margin-bottom: calc(var(--zwc-card-pad-y) * -1);
    overflow: hidden;
    border-bottom-right-radius: 19px;
  }

  /* Keeps the artwork pinned to that corner even when the short-viewport height
     cap above letterboxes it — the slack then falls on the top and left. */
  .zwc-feature__media--bleed img {
    border-radius: 0;
    object-position: bottom right;
  }
}

/* Small desktop — 56px display type is too heavy for the white area above the
   reef, both when the viewport is narrow and when it is simply short. */
@media only screen and (min-width: 1200px) and (max-width: 1439px),
only screen and (min-width: 1200px) and (max-height: 880px) {
  .zwc-feature h2 {
    font-size: 44px;
    letter-spacing: -1.2px;
  }

  .zwc-feature h3 {
    font-size: 28px;
  }

  .zwc-feature__inner {
    gap: 48px;
  }

  .zwc-feature__card-inner {
    --zwc-card-pad-y: 40px;
    --zwc-card-pad-x: 44px;
  }

  /* Short viewports put the water higher, so the centred column needs a bigger
     gap here to keep the paragraph off it — 1200x720 was grazing the water line. */
  .zwc-feature__tags {
    margin-top: 104px;
  }
}

/* ==========================================================================
   Tablet and narrow desktop — stacked, but the intro pins as well as the deck so
   the heading stays with the cards instead of scrolling off and leaving the
   section mostly empty. The cards' pin line is the intro's own height (measured
   by JS into --zwc-intro-h) plus a 32px gap, so the deck stacks directly beneath
   the pinned text rather than over it. Below 768px there is no room for both, so
   only the cards pin there.
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  /* JS stretches this box down to where the pinned card's box ends and cancels the
     extra with a negative margin, so the intro and the deck are released by their
     containers on the same pixel and scroll away together. The content therefore
     has to sit at the top of that box, not centred in it. */
  .zwc-feature__intro {
    position: sticky;
    top: 80px;
    justify-content: flex-start;
  }

  /* A wider measure than the desktop column keeps the paragraph to four lines,
     which is what buys the deck its room. */
  .zwc-feature__head {
    max-width: 720px;
  }

  /* 80px pin + 60px gap. The gap has to clear the deck's recede offset — the cards
     behind the top one lift by 16px each, so up to 48px — or their edges cut into
     the paragraph's last line. */
  .zwc-feature__card {
    top: calc(140px + var(--zwc-intro-h, 240px));
  }

  /* Trimming only the vertical padding gives the artwork 24px back without
     narrowing the card. */
  .zwc-feature__card-inner {
    --zwc-card-pad-y: 28px;
  }

  /* Keeps the pinned card inside the fold beneath the pinned intro. The reserve is
     the 140px pin offset plus the tallest card's own text and padding (~211px here)
     plus a little clearance. Floored so the artwork can't collapse on very short
     viewports, and contained so it letterboxes rather than distorting when the cap
     bites. */
  .zwc-feature__media img {
    max-height: max(200px, calc(100vh - 365px - var(--zwc-intro-h, 240px)));
    object-fit: contain;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .zwc-banner__media img,
  .zwc-advantage__icon,
  .zwc-platform__media,
  .zwc-platform__problem,
  .zwc-platform__solution,
  .zwc-feature__card,
  .zwc-feature__card-inner,
  .zwc-feature__tag {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .middle-animated .zwc-platform__panel--active .zwc-platform__problem,
  .middle-animated .zwc-platform__panel--active .zwc-platform__media,
  .middle-animated .zwc-platform__panel--active .zwc-platform__solution {
    animation: none;
  }

  .zwc-platform__indicator,
  .zwc-faq__a {
    transition: none;
  }
}