@-webkit-keyframes swal2-show {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  45% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  80% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes swal2-show {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  45% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  80% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0; } }

@keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0; } }

@-webkit-keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0; }
  54% {
    top: 1.0625em;
    left: .125em;
    width: 0; }
  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em; }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em; }
  100% {
    top: 2.8125em;
    left: .875em;
    width: 1.5625em; } }

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0; }
  54% {
    top: 1.0625em;
    left: .125em;
    width: 0; }
  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em; }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em; }
  100% {
    top: 2.8125em;
    left: .875em;
    width: 1.5625em; } }

@-webkit-keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em; }
  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em; } }

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em; }
  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em; } }

@-webkit-keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  5% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  12% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg); }
  100% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg); } }

@keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  5% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  12% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg); }
  100% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg); } }

@-webkit-keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 0; }
  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 0; }
  80% {
    margin-top: -.375em;
    -webkit-transform: scale(1.15);
            transform: scale(1.15); }
  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 0; }
  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 0; }
  80% {
    margin-top: -.375em;
    -webkit-transform: scale(1.15);
            transform: scale(1.15); }
  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
            transform: rotateX(100deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    opacity: 1; } }

@keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
            transform: rotateX(100deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    opacity: 1; } }

body.swal2-toast-shown .swal2-container {
  position: fixed;
  background-color: transparent; }
  body.swal2-toast-shown .swal2-container.swal2-shown {
    background-color: transparent; }
  body.swal2-toast-shown .swal2-container.swal2-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto; }
  body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0; }
  body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0; }
  body.swal2-toast-shown .swal2-container.swal2-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto; }

body.swal2-toast-column .swal2-toast {
  flex-direction: column;
  align-items: stretch; }
  body.swal2-toast-column .swal2-toast .swal2-actions {
    flex: 1;
    align-self: stretch;
    height: 2.2em;
    margin-top: .3125em; }
  body.swal2-toast-column .swal2-toast .swal2-loading {
    justify-content: center; }
  body.swal2-toast-column .swal2-toast .swal2-input {
    height: 2em;
    margin: .3125em auto;
    font-size: 1em; }
  body.swal2-toast-column .swal2-toast .swal2-validation-message {
    font-size: 1em; }

.swal2-popup.swal2-toast {
  flex-direction: row;
  align-items: center;
  width: auto;
  padding: 0.625em;
  box-shadow: 0 0 0.625em #d9d9d9;
  overflow-y: hidden; }
  .swal2-popup.swal2-toast .swal2-header {
    flex-direction: row; }
  .swal2-popup.swal2-toast .swal2-title {
    flex-grow: 1;
    justify-content: flex-start;
    margin: 0 .6em;
    font-size: 1em; }
  .swal2-popup.swal2-toast .swal2-footer {
    margin: 0.5em 0 0;
    padding: 0.5em 0 0;
    font-size: 0.8em; }
  .swal2-popup.swal2-toast .swal2-close {
    position: initial;
    width: 0.8em;
    height: 0.8em;
    line-height: 0.8; }
  .swal2-popup.swal2-toast .swal2-content {
    justify-content: flex-start;
    font-size: 1em; }
  .swal2-popup.swal2-toast .swal2-icon {
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0; }
    .swal2-popup.swal2-toast .swal2-icon-text {
      font-size: 2em;
      font-weight: bold;
      line-height: 1em; }
    .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
      width: 2em;
      height: 2em; }
    .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
      top: .875em;
      width: 1.375em; }
      .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
        left: .3125em; }
      .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
        right: .3125em; }
  .swal2-popup.swal2-toast .swal2-actions {
    height: auto;
    margin: 0 .3125em; }
  .swal2-popup.swal2-toast .swal2-styled {
    margin: 0 .3125em;
    padding: .3125em .625em;
    font-size: 1em; }
    .swal2-popup.swal2-toast .swal2-styled:focus {
      box-shadow: 0 0 0 0.0625em #fff, 0 0 0 0.125em rgba(50, 100, 150, 0.4); }
  .swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86; }
    .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'] {
      position: absolute;
      width: 2em;
      height: 2.8125em;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      border-radius: 50%; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='left'] {
        top: -.25em;
        left: -.9375em;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 2em 2em;
                transform-origin: 2em 2em;
        border-radius: 4em 0 0 4em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='right'] {
        top: -.25em;
        left: .9375em;
        -webkit-transform-origin: 0 2em;
                transform-origin: 0 2em;
        border-radius: 0 4em 4em 0; }
    .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
      width: 2em;
      height: 2em; }
    .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
      top: 0;
      left: .4375em;
      width: .4375em;
      height: 2.6875em; }
    .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] {
      height: .3125em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='tip'] {
        top: 1.125em;
        left: .1875em;
        width: .75em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='long'] {
        top: .9375em;
        right: .1875em;
        width: 1.375em; }
  .swal2-popup.swal2-toast.swal2-show {
    -webkit-animation: showSweetToast .5s;
            animation: showSweetToast .5s; }
  .swal2-popup.swal2-toast.swal2-hide {
    -webkit-animation: hideSweetToast .2s forwards;
            animation: hideSweetToast .2s forwards; }
  .swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-tip {
    -webkit-animation: animate-toast-success-tip .75s;
            animation: animate-toast-success-tip .75s; }
  .swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-long {
    -webkit-animation: animate-toast-success-long .75s;
            animation: animate-toast-success-long .75s; }

@-webkit-keyframes showSweetToast {
  0% {
    -webkit-transform: translateY(-0.625em) rotateZ(2deg);
            transform: translateY(-0.625em) rotateZ(2deg);
    opacity: 0; }
  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
            transform: translateY(0) rotateZ(-2deg);
    opacity: .5; }
  66% {
    -webkit-transform: translateY(0.3125em) rotateZ(2deg);
            transform: translateY(0.3125em) rotateZ(2deg);
    opacity: .7; }
  100% {
    -webkit-transform: translateY(0) rotateZ(0);
            transform: translateY(0) rotateZ(0);
    opacity: 1; } }

@keyframes showSweetToast {
  0% {
    -webkit-transform: translateY(-0.625em) rotateZ(2deg);
            transform: translateY(-0.625em) rotateZ(2deg);
    opacity: 0; }
  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
            transform: translateY(0) rotateZ(-2deg);
    opacity: .5; }
  66% {
    -webkit-transform: translateY(0.3125em) rotateZ(2deg);
            transform: translateY(0.3125em) rotateZ(2deg);
    opacity: .7; }
  100% {
    -webkit-transform: translateY(0) rotateZ(0);
            transform: translateY(0) rotateZ(0);
    opacity: 1; } }

@-webkit-keyframes hideSweetToast {
  0% {
    opacity: 1; }
  33% {
    opacity: .5; }
  100% {
    -webkit-transform: rotateZ(1deg);
            transform: rotateZ(1deg);
    opacity: 0; } }

@keyframes hideSweetToast {
  0% {
    opacity: 1; }
  33% {
    opacity: .5; }
  100% {
    -webkit-transform: rotateZ(1deg);
            transform: rotateZ(1deg);
    opacity: 0; } }

@-webkit-keyframes animate-toast-success-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0; }
  54% {
    top: .125em;
    left: .125em;
    width: 0; }
  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em; }
  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em; }
  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em; } }

@keyframes animate-toast-success-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0; }
  54% {
    top: .125em;
    left: .125em;
    width: 0; }
  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em; }
  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em; }
  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em; } }

@-webkit-keyframes animate-toast-success-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0; }
  65% {
    top: 1.25em;
    right: .9375em;
    width: 0; }
  84% {
    top: .9375em;
    right: 0;
    width: 1.125em; }
  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em; } }

@keyframes animate-toast-success-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0; }
  65% {
    top: 1.25em;
    right: .9375em;
    width: 0; }
  84% {
    top: .9375em;
    right: 0;
    width: 1.125em; }
  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em; } }

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden; }

body.swal2-height-auto {
  height: auto !important; }

body.swal2-no-backdrop .swal2-shown {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  background-color: transparent; }
  body.swal2-no-backdrop .swal2-shown > .swal2-modal {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
  body.swal2-no-backdrop .swal2-shown.swal2-top {
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  body.swal2-no-backdrop .swal2-shown.swal2-top-start, body.swal2-no-backdrop .swal2-shown.swal2-top-left {
    top: 0;
    left: 0; }
  body.swal2-no-backdrop .swal2-shown.swal2-top-end, body.swal2-no-backdrop .swal2-shown.swal2-top-right {
    top: 0;
    right: 0; }
  body.swal2-no-backdrop .swal2-shown.swal2-center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  body.swal2-no-backdrop .swal2-shown.swal2-center-start, body.swal2-no-backdrop .swal2-shown.swal2-center-left {
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  body.swal2-no-backdrop .swal2-shown.swal2-center-end, body.swal2-no-backdrop .swal2-shown.swal2-center-right {
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  body.swal2-no-backdrop .swal2-shown.swal2-bottom {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  body.swal2-no-backdrop .swal2-shown.swal2-bottom-start, body.swal2-no-backdrop .swal2-shown.swal2-bottom-left {
    bottom: 0;
    left: 0; }
  body.swal2-no-backdrop .swal2-shown.swal2-bottom-end, body.swal2-no-backdrop .swal2-shown.swal2-bottom-right {
    right: 0;
    bottom: 0; }

.swal2-container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: transparent;
  z-index: 1060;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; }
  .swal2-container.swal2-top {
    align-items: flex-start; }
  .swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
    align-items: flex-start;
    justify-content: flex-start; }
  .swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
    align-items: flex-start;
    justify-content: flex-end; }
  .swal2-container.swal2-center {
    align-items: center; }
  .swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
    align-items: center;
    justify-content: flex-start; }
  .swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
    align-items: center;
    justify-content: flex-end; }
  .swal2-container.swal2-bottom {
    align-items: flex-end; }
  .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
    align-items: flex-end;
    justify-content: flex-start; }
  .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
    align-items: flex-end;
    justify-content: flex-end; }
  .swal2-container.swal2-grow-fullscreen > .swal2-modal {
    display: flex !important;
    flex: 1;
    align-self: stretch;
    justify-content: center; }
  .swal2-container.swal2-grow-row > .swal2-modal {
    display: flex !important;
    flex: 1;
    align-content: center;
    justify-content: center; }
  .swal2-container.swal2-grow-column {
    flex: 1;
    flex-direction: column; }
    .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
      align-items: center; }
    .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
      align-items: flex-start; }
    .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
      align-items: flex-end; }
    .swal2-container.swal2-grow-column > .swal2-modal {
      display: flex !important;
      flex: 1;
      align-content: center;
      justify-content: center; }
  .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
    margin: auto; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .swal2-container .swal2-modal {
      margin: 0 !important; } }
  .swal2-container.swal2-fade {
    transition: background-color .1s; }
  .swal2-container.swal2-shown {
    background-color: rgba(0, 0, 0, 0.4); }

.swal2-popup {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border-radius: 0.3125em;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box; }
  .swal2-popup:focus {
    outline: none; }
  .swal2-popup.swal2-loading {
    overflow-y: hidden; }
  .swal2-popup .swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .swal2-popup .swal2-title {
    display: block;
    position: relative;
    max-width: 100%;
    margin: 0 0 0.4em;
    padding: 0;
    color: #595959;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word; }
  .swal2-popup .swal2-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 1.25em auto 0;
    z-index: 1; }
    .swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
      opacity: .4; }
    .swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); }
    .swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:active {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); }
    .swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
      width: 2.5em;
      height: 2.5em;
      margin: .46875em;
      padding: 0;
      border: .25em solid transparent;
      border-radius: 100%;
      border-color: transparent;
      background-color: transparent !important;
      color: transparent;
      cursor: default;
      box-sizing: border-box;
      -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
              animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
    .swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
      margin-right: 30px;
      margin-left: 30px; }
    .swal2-popup .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-left: 5px;
      border: 3px solid #999999;
      border-radius: 50%;
      border-right-color: transparent;
      box-shadow: 1px 1px 1px #fff;
      content: '';
      -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
              animation: swal2-rotate-loading 1.5s linear 0s infinite normal; }
  .swal2-popup .swal2-styled {
    margin: .3125em;
    padding: .625em 2em;
    font-weight: 500;
    box-shadow: none; }
    .swal2-popup .swal2-styled:not([disabled]) {
      cursor: pointer; }
    .swal2-popup .swal2-styled.swal2-confirm {
      border: 0;
      border-radius: 0.25em;
      background: initial;
      background-color: #3085d6;
      color: #fff;
      font-size: 1.0625em; }
    .swal2-popup .swal2-styled.swal2-cancel {
      border: 0;
      border-radius: 0.25em;
      background: initial;
      background-color: #aaa;
      color: #fff;
      font-size: 1.0625em; }
    .swal2-popup .swal2-styled:focus {
      outline: none;
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50, 100, 150, 0.4); }
    .swal2-popup .swal2-styled::-moz-focus-inner {
      border: 0; }
  .swal2-popup .swal2-footer {
    justify-content: center;
    margin: 1.25em 0 0;
    padding: 1em 0 0;
    border-top: 1px solid #eee;
    color: #545454;
    font-size: 1em; }
  .swal2-popup .swal2-image {
    max-width: 100%;
    margin: 1.25em auto; }
  .swal2-popup .swal2-close {
    position: absolute;
    top: 0;
    right: 0;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    transition: color 0.1s ease-out;
    border: none;
    border-radius: 0;
    outline: initial;
    background: transparent;
    color: #cccccc;
    font-family: serif;
    font-size: 2.5em;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden; }
    .swal2-popup .swal2-close:hover {
      -webkit-transform: none;
              transform: none;
      color: #f27474; }
  .swal2-popup > .swal2-input,
  .swal2-popup > .swal2-file,
  .swal2-popup > .swal2-textarea,
  .swal2-popup > .swal2-select,
  .swal2-popup > .swal2-radio,
  .swal2-popup > .swal2-checkbox {
    display: none; }
  .swal2-popup .swal2-content {
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #545454;
    font-size: 1.125em;
    font-weight: 300;
    line-height: normal;
    z-index: 1;
    word-wrap: break-word; }
  .swal2-popup #swal2-content {
    text-align: center; }
  .swal2-popup .swal2-input,
  .swal2-popup .swal2-file,
  .swal2-popup .swal2-textarea,
  .swal2-popup .swal2-select,
  .swal2-popup .swal2-radio,
  .swal2-popup .swal2-checkbox {
    margin: 1em auto; }
  .swal2-popup .swal2-input,
  .swal2-popup .swal2-file,
  .swal2-popup .swal2-textarea {
    width: 100%;
    transition: border-color .3s, box-shadow .3s;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    font-size: 1.125em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
    box-sizing: border-box; }
    .swal2-popup .swal2-input.swal2-inputerror,
    .swal2-popup .swal2-file.swal2-inputerror,
    .swal2-popup .swal2-textarea.swal2-inputerror {
      border-color: #f27474 !important;
      box-shadow: 0 0 2px #f27474 !important; }
    .swal2-popup .swal2-input:focus,
    .swal2-popup .swal2-file:focus,
    .swal2-popup .swal2-textarea:focus {
      border: 1px solid #b4dbed;
      outline: none;
      box-shadow: 0 0 3px #c4e6f5; }
    .swal2-popup .swal2-input::-webkit-input-placeholder,
    .swal2-popup .swal2-file::-webkit-input-placeholder,
    .swal2-popup .swal2-textarea::-webkit-input-placeholder {
      color: #cccccc; }
    .swal2-popup .swal2-input:-ms-input-placeholder,
    .swal2-popup .swal2-file:-ms-input-placeholder,
    .swal2-popup .swal2-textarea:-ms-input-placeholder {
      color: #cccccc; }
    .swal2-popup .swal2-input::-ms-input-placeholder,
    .swal2-popup .swal2-file::-ms-input-placeholder,
    .swal2-popup .swal2-textarea::-ms-input-placeholder {
      color: #cccccc; }
    .swal2-popup .swal2-input::placeholder,
    .swal2-popup .swal2-file::placeholder,
    .swal2-popup .swal2-textarea::placeholder {
      color: #cccccc; }
  .swal2-popup .swal2-range input {
    width: 80%; }
  .swal2-popup .swal2-range output {
    width: 20%;
    font-weight: 600;
    text-align: center; }
  .swal2-popup .swal2-range input,
  .swal2-popup .swal2-range output {
    height: 2.625em;
    margin: 1em auto;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em; }
  .swal2-popup .swal2-input {
    height: 2.625em;
    padding: 0 0.75em; }
    .swal2-popup .swal2-input[type='number'] {
      max-width: 10em; }
  .swal2-popup .swal2-file {
    font-size: 1.125em; }
  .swal2-popup .swal2-textarea {
    height: 6.75em;
    padding: 0.75em; }
  .swal2-popup .swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    color: #545454;
    font-size: 1.125em; }
  .swal2-popup .swal2-radio,
  .swal2-popup .swal2-checkbox {
    align-items: center;
    justify-content: center; }
    .swal2-popup .swal2-radio label,
    .swal2-popup .swal2-checkbox label {
      margin: 0 .6em;
      font-size: 1.125em; }
    .swal2-popup .swal2-radio input,
    .swal2-popup .swal2-checkbox input {
      margin: 0 .4em; }
  .swal2-popup .swal2-validation-message {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.625em;
    background: #f0f0f0;
    color: #666666;
    font-size: 1em;
    font-weight: 300;
    overflow: hidden; }
    .swal2-popup .swal2-validation-message::before {
      display: inline-block;
      width: 1.5em;
      min-width: 1.5em;
      height: 1.5em;
      margin: 0 .625em;
      border-radius: 50%;
      background-color: #f27474;
      color: #fff;
      font-weight: 600;
      line-height: 1.5em;
      text-align: center;
      content: '!';
      zoom: normal; }

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@-moz-document url-prefix() {
  .swal2-close:focus {
    outline: 2px solid rgba(50, 100, 150, 0.4); } }

.swal2-icon {
  position: relative;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: .25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  box-sizing: content-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  zoom: normal; }
  .swal2-icon-text {
    font-size: 3.75em; }
  .swal2-icon.swal2-error {
    border-color: #f27474; }
    .swal2-icon.swal2-error .swal2-x-mark {
      position: relative;
      flex-grow: 1; }
    .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
      display: block;
      position: absolute;
      top: 2.3125em;
      width: 2.9375em;
      height: .3125em;
      border-radius: .125em;
      background-color: #f27474; }
      .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
        left: 1.0625em;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg); }
      .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
        right: 1em;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg); }
  .swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86; }
  .swal2-icon.swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee; }
  .swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd; }
  .swal2-icon.swal2-success {
    border-color: #a5dc86; }
    .swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
      position: absolute;
      width: 3.75em;
      height: 7.5em;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      border-radius: 50%; }
      .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='left'] {
        top: -.4375em;
        left: -2.0635em;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 3.75em 3.75em;
                transform-origin: 3.75em 3.75em;
        border-radius: 7.5em 0 0 7.5em; }
      .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='right'] {
        top: -.6875em;
        left: 1.875em;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 3.75em;
                transform-origin: 0 3.75em;
        border-radius: 0 7.5em 7.5em 0; }
    .swal2-icon.swal2-success .swal2-success-ring {
      position: absolute;
      top: -.25em;
      left: -.25em;
      width: 100%;
      height: 100%;
      border: 0.25em solid rgba(165, 220, 134, 0.3);
      border-radius: 50%;
      z-index: 2;
      box-sizing: content-box; }
    .swal2-icon.swal2-success .swal2-success-fix {
      position: absolute;
      top: .5em;
      left: 1.625em;
      width: .4375em;
      height: 5.625em;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      z-index: 1; }
    .swal2-icon.swal2-success [class^='swal2-success-line'] {
      display: block;
      position: absolute;
      height: .3125em;
      border-radius: .125em;
      background-color: #a5dc86;
      z-index: 2; }
      .swal2-icon.swal2-success [class^='swal2-success-line'][class$='tip'] {
        top: 2.875em;
        left: .875em;
        width: 1.5625em;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg); }
      .swal2-icon.swal2-success [class^='swal2-success-line'][class$='long'] {
        top: 2.375em;
        right: .5em;
        width: 2.9375em;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg); }

.swal2-progresssteps {
  align-items: center;
  margin: 0 0 1.25em;
  padding: 0;
  font-weight: 600; }
  .swal2-progresssteps li {
    display: inline-block;
    position: relative; }
  .swal2-progresssteps .swal2-progresscircle {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #3085d6;
    color: #fff;
    line-height: 2em;
    text-align: center;
    z-index: 20; }
    .swal2-progresssteps .swal2-progresscircle:first-child {
      margin-left: 0; }
    .swal2-progresssteps .swal2-progresscircle:last-child {
      margin-right: 0; }
    .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
      background: #3085d6; }
      .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progresscircle {
        background: #add8e6; }
      .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progressline {
        background: #add8e6; }
  .swal2-progresssteps .swal2-progressline {
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #3085d6;
    z-index: 10; }

[class^='swal2'] {
  -webkit-tap-highlight-color: transparent; }

.swal2-show {
  -webkit-animation: swal2-show 0.3s;
          animation: swal2-show 0.3s; }
  .swal2-show.swal2-noanimation {
    -webkit-animation: none;
            animation: none; }

.swal2-hide {
  -webkit-animation: swal2-hide 0.15s forwards;
          animation: swal2-hide 0.15s forwards; }
  .swal2-hide.swal2-noanimation {
    -webkit-animation: none;
            animation: none; }

.swal2-rtl .swal2-close {
  right: auto;
  left: 0; }

.swal2-animate-success-icon .swal2-success-line-tip {
  -webkit-animation: swal2-animate-success-line-tip 0.75s;
          animation: swal2-animate-success-line-tip 0.75s; }

.swal2-animate-success-icon .swal2-success-line-long {
  -webkit-animation: swal2-animate-success-line-long 0.75s;
          animation: swal2-animate-success-line-long 0.75s; }

.swal2-animate-success-icon .swal2-success-circular-line-right {
  -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
          animation: swal2-rotate-success-circular-line 4.25s ease-in; }

.swal2-animate-error-icon {
  -webkit-animation: swal2-animate-error-icon 0.5s;
          animation: swal2-animate-error-icon 0.5s; }
  .swal2-animate-error-icon .swal2-x-mark {
    -webkit-animation: swal2-animate-error-x-mark 0.5s;
            animation: swal2-animate-error-x-mark 0.5s; }

@-webkit-keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important; }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden='true'] {
      display: none; }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
      position: initial !important; } }
/*
 * Payper Marketing Stylesheet - pilot Phase 2 (Costa-aligned)
 * Direction: faithful port of payper.costa.co.il design grammar to
 * Payper's locked palette (deep blue replaces Costa purple, teal replaces lime).
 *


 */

/* ============================================================
   1. RESET (minimal)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Prevent rogue horizontal scroll at narrow widths from off-canvas cards,
   parallax transforms, and decorative absolutely-positioned glyphs.
   `overflow-x: clip` is preferred over `hidden` because it doesn't establish
   a scroll container (so `position: sticky` on the header keeps working). */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* Anchored deep-link targets: offset by sticky header so they don't sit under it. */
:target { scroll-margin-block-start: calc(var(--mk-header-h) + var(--mk-s-3)); }

/* ============================================================
   2. TOKENS - Costa palette mapped to Payper brand
   ============================================================ */

:root {
  /* Color system */
  --mk-c-ink:        #35404E;     /* primary body text */
  --mk-c-ink-soft:   #5A6878;
  --mk-c-mute:       #8A95A3;
  --mk-c-line:       #E8EBEF;
  --mk-c-bg:         #FFFFFF;     /* default white background */
  --mk-c-bg-alt:     #F5F7FA;
  --mk-c-bg-deep:    #074981;     /* Costa-purple equivalent - deep brand blue */
  --mk-c-bg-deep-2:  #053662;
  --mk-c-bg-dark:    #1A1F2A;     /* near-black for occasional dark sections */
  --mk-c-accent:     #00D4C8;     /* Costa-lime equivalent - Payper teal */
  --mk-c-accent-2:   #00A89E;
  --mk-c-accent-soft:#CFF7F4;     /* tint for backgrounds */
  --mk-c-on-deep:    #FFFFFF;     /* text on deep blocks */
  --mk-c-chart-up:   #1F8F5A;     /* income / positive */
  --mk-c-chart-down: #E26B3F;     /* expense / negative */

  /* Type - single sans family, Heebo (matches Costa's typographic restraint) */
  --mk-f-body: "Heebo", "Assistant", "Arial Hebrew", system-ui, sans-serif;

  /* Type scale */
  --mk-t-xs:    0.75rem;
  --mk-t-sm:    0.875rem;
  --mk-t-base:  1rem;
  --mk-t-lede:  1.125rem;
  --mk-t-h4:    1.375rem;
  --mk-t-h3:    1.875rem;
  --mk-t-h2:    2.5rem;
  --mk-t-h1:    4.25rem;
  --mk-t-display: 5.5rem;

  /* Spacing scale */
  --mk-s-1: 0.25rem;
  --mk-s-2: 0.5rem;
  --mk-s-3: 0.75rem;
  --mk-s-4: 1rem;
  --mk-s-5: 1.5rem;
  --mk-s-6: 2rem;
  --mk-s-7: 3rem;
  --mk-s-8: 4rem;
  --mk-s-9: 6rem;
  --mk-s-10: 8rem;

  /* Radii - Costa uses soft rounded corners on cards + pill buttons */
  --mk-r-none: 0;
  --mk-r-sm:   6px;
  --mk-r-md:   12px;
  --mk-r-lg:   24px;
  --mk-r-pill: 999px;

  /* Shadows - Costa cards have soft elevated shadows */
  --mk-sh-1: 0 2px 8px rgba(7, 73, 129, 0.08);
  --mk-sh-2: 0 12px 28px rgba(7, 73, 129, 0.12);
  --mk-sh-3: 0 28px 60px rgba(7, 73, 129, 0.20);

  /* Motion */
  --mk-ease:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --mk-dur-1: 160ms;
  --mk-dur-2: 280ms;
  --mk-dur-3: 480ms;

  /* Layout */
  --mk-max-w: 1240px;
  /* Gutter min trimmed to 0.875rem so 320px viewports still get ~290px of usable
     content area after subtracting 14px on each side (was 16px, leaving 288px
     which clipped 280px-min-width children inside nested padded cards). */
  --mk-gutter: clamp(0.875rem, 4vw, 2rem);
  --mk-header-h: 84px;
}

/* Tighten the header at very small viewports so the logo + hamburger never
   collide. Below 360px the default 84px header eats ~25% of viewport height
   and the gap between logo and toggle gets cramped. */
@media (max-width: 359.98px) {
  :root { --mk-header-h: 64px; }
}

/* ============================================================
   3. BASE
   ============================================================ */

body.mk-body {
  font-family: var(--mk-f-body);
  font-size: var(--mk-t-base);
  line-height: 1.6;
  color: var(--mk-c-ink);
  background: var(--mk-c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--mk-c-accent); color: var(--mk-c-bg-deep); }

a { color: var(--mk-c-bg-deep); transition: color var(--mk-dur-1) var(--mk-ease); }
a:hover { color: var(--mk-c-accent-2); }

:focus-visible {
  outline: 3px solid var(--mk-c-accent);
  outline-offset: 3px;
  border-radius: var(--mk-r-sm);
}
/* Stronger focus ring for buttons/links on the teal accent itself (otherwise
   teal-on-teal has too little contrast). Pairs with the default 3px teal ring
   with a deep-blue inset so the indicator reads on every background. */
.mk-btn--accent:focus-visible {
  outline-color: var(--mk-c-bg-deep);
  box-shadow: 0 0 0 3px var(--mk-c-accent);
}

.mk-skip-link {
  position: absolute; inset-inline-start: -9999px;
  background: var(--mk-c-bg-deep); color: var(--mk-c-on-deep);
  padding: var(--mk-s-3) var(--mk-s-4);
  z-index: 100;
  font-weight: 700;
  border-radius: var(--mk-r-sm);
  text-decoration: underline;
}
.mk-skip-link:focus,
.mk-skip-link:focus-visible { inset-inline-start: var(--mk-s-4); top: var(--mk-s-4); }

/* ============================================================
   4. TYPOGRAPHY PRIMITIVES - Heebo weights only
   ============================================================ */

.mk-display {
  font-family: var(--mk-f-body);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--mk-c-ink);
}
.mk-display--xl { font-size: clamp(2.75rem, 6.4vw, var(--mk-t-display)); }
.mk-display--lg { font-size: clamp(2.25rem, 5vw, var(--mk-t-h1));      }
.mk-display--md { font-size: clamp(1.875rem, 3.6vw, var(--mk-t-h2));   }
.mk-display--sm { font-size: clamp(1.5rem, 2.8vw, var(--mk-t-h3));     }

.mk-display em {
  font-style: normal;
  color: var(--mk-c-bg-deep);
  /* secondary line break - Costa renders the accent phrase on its own line */
  display: block;
}

.mk-eyebrow {
  font-family: var(--mk-f-body);
  font-size: var(--mk-t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mk-c-accent-2);
  display: inline-block;
  text-transform: none;
}
.mk-eyebrow--invert { color: var(--mk-c-accent); }
/* Eyebrow used as a centred standalone line rather than an inline tag.
   .mk-eyebrow is inline-block, so it needs display:block to centre. */
.mk-eyebrow--centered { display: block; text-align: center; margin-block-end: var(--mk-s-5); }

.mk-lede {
  font-size: var(--mk-t-lede);
  line-height: 1.6;
  color: var(--mk-c-ink-soft);
  font-weight: 400;
  max-width: 56ch;
}
/* Centres the 56ch measure inside a wider parent (e.g. .mk-narrow). */
.mk-lede--centered { margin-inline: auto; }

.mk-body { font-size: var(--mk-t-base); line-height: 1.7; color: var(--mk-c-ink); }
.mk-mute { color: var(--mk-c-mute); font-size: var(--mk-t-sm); }

.mk-mono { font-feature-settings: "tnum" 1; }      /* tabular numbers for figures */

.mk-stat {
  font-family: var(--mk-f-body);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ============================================================
   5. LAYOUT PRIMITIVES + DECORATIVE PLUS GLYPHS
   ============================================================ */

.mk-container { width: 100%; max-width: var(--mk-max-w); padding-inline: var(--mk-gutter); margin-inline: auto; }

/* Narrow reading column for centred section copy. Must stay after .mk-container:
   equal specificity, so later source order is what lets it narrow a container it is
   composed onto (class="mk-container mk-narrow"). */
.mk-narrow { max-width: 760px; margin-inline: auto; }
.mk-narrow--spaced { margin-block-end: var(--mk-s-6); }

/* Vertical rhythm: two adjacent sections stack their padding, so these values
   are per-edge — keep them modest or the seam between sections reads as dead
   space (8vw here meant ~205px of emptiness between two sections at 1280px). */
.mk-section { padding-block: clamp(var(--mk-s-6), 4.5vw, var(--mk-s-8)); position: relative; }
.mk-section--tight { padding-block: clamp(var(--mk-s-5), 4vw, var(--mk-s-7)); }
.mk-section--deep  { background: var(--mk-c-bg-deep); color: var(--mk-c-on-deep); position: relative; overflow: hidden; }
.mk-section--dark  { background: var(--mk-c-bg-dark); color: var(--mk-c-on-deep); }
.mk-section--alt   { background: var(--mk-c-bg-alt); }

/* Costa scatters subtle "+" glyphs across colored sections - replicate */
.mk-deco-plus {
  position: absolute;
  font-family: var(--mk-f-body);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  user-select: none;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
}
.mk-section .mk-deco-plus { color: rgba(7, 73, 129, 0.10); }
.mk-deco-plus--tl { top: 8%;  inset-inline-start: 6%; }
.mk-deco-plus--tr { top: 14%; inset-inline-end: 8%;   }
.mk-deco-plus--bl { bottom: 12%; inset-inline-start: 10%; }
.mk-deco-plus--br { bottom: 8%; inset-inline-end: 6%;  }
.mk-deco-plus--mid { top: 50%; inset-inline-end: 50%; }

/* Angular section wedge transitions - Costa's signature */
.mk-wedge { position: relative; }
.mk-wedge--down-deep::after {
  content: "";
  position: absolute;
  inset-inline: 0; bottom: -1px;
  height: clamp(60px, 8vw, 120px);
  background: var(--mk-c-bg-deep);
  clip-path: polygon(0 100%, 100% 30%, 100% 100%);
  z-index: 1;
}
.mk-wedge--up-white::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: -1px;
  height: clamp(60px, 8vw, 120px);
  background: var(--mk-c-bg);
  clip-path: polygon(0 0, 100% 0, 100% 70%);
  z-index: 1;
}
.mk-wedge--up-dark::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: -1px;
  height: clamp(60px, 8vw, 120px);
  background: var(--mk-c-bg-dark);
  clip-path: polygon(0 70%, 100% 0, 100% 70%);
  z-index: 1;
}

/* ============================================================
   6. HEADER - white sticky bar with prominent teal CTA pill
   ============================================================ */

.mk-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--mk-c-line);
}
.mk-header__inner {
  max-width: var(--mk-max-w); margin-inline: auto;
  padding-inline: var(--mk-gutter);
  height: var(--mk-header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mk-s-3);
}
@media (min-width: 981px) {
  .mk-header__inner { gap: var(--mk-s-5); }
}
.mk-header__logo-img { height: 28px; width: auto; display: block; }
@media (max-width: 720px) { .mk-header__logo-img { height: 24px; } }
.mk-footer__logo-img { height: 32px; width: auto; display: block; color: var(--mk-c-on-deep); }

.mk-header__logo {
  display: inline-flex; align-items: center; gap: var(--mk-s-3);
  color: var(--mk-c-bg-deep);
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: -0.025em;
}
.mk-header__logo:hover { color: var(--mk-c-bg-deep-2); }

.mk-header__toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; gap: 5px;
  align-items: center;
}
.mk-header__toggle span {
  display: block; width: 22px; height: 2px; background: var(--mk-c-bg-deep);
}

.mk-nav { display: flex; align-items: center; gap: var(--mk-s-7); }
.mk-nav__list { display: flex; align-items: center; gap: var(--mk-s-5); }
.mk-nav__link {
  font-size: var(--mk-t-base);
  font-weight: 500;
  color: var(--mk-c-ink);
  padding-block: var(--mk-s-2);
  transition: color var(--mk-dur-1) var(--mk-ease);
}
.mk-nav__link:hover { color: var(--mk-c-bg-deep); }
.mk-nav__cta { display: flex; align-items: center; gap: var(--mk-s-3); }

@media (max-width: 980px) {
  .mk-header__toggle { display: flex; }

  /* IMPORTANT: drop the header's backdrop-filter blur on mobile.
     `backdrop-filter` creates a *containing block* for fixed descendants —
     which means the drawer below (`position: fixed`) becomes positioned
     relative to .mk-header, NOT to the viewport. The visual symptom is
     that when the body scroll-lock kicks in and breaks the header's
     `position: sticky`, the header drifts off-screen and drags the
     drawer with it. With the blur removed, the drawer is true
     viewport-fixed and stays put no matter what scroll position the
     page was at when the user opened the menu. The header background
     gets bumped to a near-opaque white to compensate visually. */
  .mk-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }

  .mk-nav {
    /* Full-screen drawer: anchored under the header, scrollable when its content
       exceeds the available viewport height. max-height uses 100dvh so it works
       with iOS Safari's collapsing URL bar; 100vh is the fallback. */
    position: fixed;
    top: var(--mk-header-h);
    inset-inline: 0;
    max-height: calc(100vh - var(--mk-header-h));
    max-height: calc(100dvh - var(--mk-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* z-index above the header so the drawer always sits on top of any
       sibling content. Header itself is z-50 — drawer is z-60. */
    z-index: 60;
    background: var(--mk-c-bg);
    border-block-end: 1px solid var(--mk-c-line);
    box-shadow: var(--mk-sh-2);
    flex-direction: column;
    align-items: stretch;
    padding: var(--mk-s-5) var(--mk-gutter) calc(var(--mk-s-5) + env(safe-area-inset-bottom, 0px));
    gap: var(--mk-s-4);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: transform var(--mk-dur-2) var(--mk-ease), opacity var(--mk-dur-2) var(--mk-ease), visibility var(--mk-dur-2) var(--mk-ease);
  }
  .mk-nav--open { transform: translateY(0); opacity: 1; visibility: visible; }
  .mk-nav__list { flex-direction: column; align-items: stretch; gap: var(--mk-s-2); }
  .mk-nav__link {
    /* Comfortable mobile tap targets - the nav is the primary mobile control. */
    padding-block: var(--mk-s-3);
    border-block-end: 1px solid var(--mk-c-line);
    font-size: var(--mk-t-lede);
  }
  .mk-nav__list li:last-child .mk-nav__link { border-block-end: 0; }
  .mk-nav__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mk-s-3);
    margin-block-start: var(--mk-s-3);
  }
  .mk-nav__cta .mk-btn {
    width: 100%;
    padding-block: var(--mk-s-3);
    font-size: var(--mk-t-base);
  }
}

/* Body scroll-lock helper applied while the drawer is open.
   Uses the `position: fixed` + saved scrollY pattern (set by the JS in
   marketing.html.erb) — this is the only approach that reliably prevents
   touch scrolling on iOS Safari. The CSS just enforces the lock visuals;
   the JS handles the scrollY restore on close. */
body.mk-body--locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  /* `top` is set inline by the JS to `-${savedScrollY}px` so the visible
     content stays in the same place while the page can't be scrolled. */
}

/* ============================================================
   7. BUTTONS - Costa pill style, big and energetic
   ============================================================ */

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mk-s-2);
  padding: var(--mk-s-3) var(--mk-s-5);
  font-family: var(--mk-f-body);
  font-size: var(--mk-t-base);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--mk-r-pill);
  border: 2px solid transparent;
  transition: all var(--mk-dur-2) var(--mk-ease);
  cursor: pointer;
  white-space: nowrap;
}
.mk-btn--sm { padding: var(--mk-s-2) var(--mk-s-4); font-size: var(--mk-t-sm); }
.mk-btn--lg { padding: var(--mk-s-4) var(--mk-s-7); font-size: var(--mk-t-lede); font-weight: 700; }

.mk-btn--accent {                    /* primary - teal pill (Costa-lime equivalent) */
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  border-color: var(--mk-c-accent);
}
.mk-btn--accent:hover {
  background: var(--mk-c-accent-2);
  border-color: var(--mk-c-accent-2);
  color: var(--mk-c-bg);
  transform: translateY(-2px);
  box-shadow: var(--mk-sh-2);
}

.mk-btn--primary {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  border-color: var(--mk-c-bg-deep);
}
.mk-btn--primary:hover {
  background: var(--mk-c-bg-deep-2);
  border-color: var(--mk-c-bg-deep-2);
  transform: translateY(-2px);
  box-shadow: var(--mk-sh-2);
}

.mk-btn--ghost {
  background: transparent;
  color: var(--mk-c-bg-deep);
  border-color: transparent;
  font-weight: 500;
}
.mk-btn--ghost:hover { color: var(--mk-c-accent-2); }

.mk-btn .mk-btn__arrow { display: inline-flex; transition: transform var(--mk-dur-2) var(--mk-ease); }
.mk-btn:hover .mk-btn__arrow { transform: translateX(-4px); }   /* RTL */

/* ============================================================
   8. HERO - centered head + visual stage with photo + floating cards
   ============================================================ */

.mk-hero {
  position: relative;
  background: var(--mk-c-bg);
  padding-block-start: clamp(var(--mk-s-6), 4.5vw, var(--mk-s-7));
  /* Room for the profit card to hang below the stage. `overflow: hidden` below clips
     anything past this box, so this MUST stay >= the card's negative `bottom`
     (see .mk-data-card--profit) or the card gets sliced off. The wedge backdrop is
     still bottom:0 anchored, so it keeps meeting the next section regardless. */
  padding-block-end: 60px;
  overflow: hidden;
  text-align: center;
}
.mk-hero__head {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
  position: relative;
  z-index: 2;
}
.mk-hero__title {
  font-size: clamp(2.5rem, 6.4vw, var(--mk-t-display));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--mk-c-ink);
}
.mk-hero__title em {
  font-style: normal;
  color: var(--mk-c-bg-deep);
  display: block;
}
.mk-hero__subline {
  margin-block-start: var(--mk-s-5);
  margin-inline: auto;
  max-width: 60ch;
  font-size: clamp(var(--mk-t-base), 1.5vw, var(--mk-t-lede));
  color: var(--mk-c-ink-soft);
}
.mk-hero__ctas {
  margin-block-start: var(--mk-s-6);
  display: flex; gap: var(--mk-s-4); justify-content: center; flex-wrap: wrap;
}
/* On very narrow viewports the side-by-side buttons + arrow + Hebrew label
   exceed the available width and the second button drops awkwardly. Stack
   them so the primary CTA is full-width and clearly tappable. */
@media (max-width: 480px) {
  .mk-hero__ctas { gap: var(--mk-s-3); }
  .mk-hero__ctas .mk-btn {
    width: 100%;
    justify-content: center;
  }
}
.mk-hero__assurance {
  margin-block-start: var(--mk-s-4);
  font-size: var(--mk-t-sm);
  /* Was --mk-c-mute (#8A95A3) — borderline AA on white, fails badly when the
     deep-blue wedge starts close behind. Bumped to --mk-c-ink-soft (#5A6878)
     for clearly readable contrast in both contexts. */
  color: var(--mk-c-ink-soft);
  font-weight: 500;
}
/* On the full hero the assurance sits over the deep-blue wedge, whose top edge
   dips at the centre — the line straddles blue (sides) and white (centre), so no
   flat text colour stays legible across its width. Give it a solid pill so the
   contrast is constant regardless of the wedge boundary. Scoped to the wedge hero;
   the no-stage variant (solution pages) keeps the plain on-white text above. */
.mk-hero:not(.mk-hero--compact):not(.mk-hero--no-stage):not(.mk-hero--with-form) .mk-hero__assurance {
  display: inline-block;
  color: var(--mk-c-on-deep);
  background: var(--mk-c-bg-deep-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.5em 1.25em;
  border-radius: var(--mk-r-pill);
}

/* Stage: photography + 3 floating data cards laid out around it */
.mk-hero__stage {
  position: relative;
  max-width: var(--mk-max-w);
  margin: clamp(var(--mk-s-7), 6vw, var(--mk-s-9)) auto 0;
  padding-inline: var(--mk-gutter);
  min-height: clamp(420px, 50vw, 560px);
}
.mk-hero__photo {
  position: relative;
  width: clamp(280px, 32vw, 400px);
  aspect-ratio: 3/4;                    /* matches the source 342x456 portrait */
  margin-inline: auto;
  /* No background — the photo sits directly on the deep-blue wedge backdrop.
     The portraits are cutout silhouettes, so the wedge color shows around the figure. */
  overflow: visible;
}
/* Two stacked portraits, fade-rotated. M (top) animates; W (bottom) is the cross-fade target. */
.mk-hero__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* The portrait files have transparent backgrounds (cutout silhouettes). If both
   layers are at opacity 1, the lower one's silhouette bleeds through the upper
   one's transparent regions. So we animate BOTH layers with complementary phases
   — when one is at 1, the other is at 0. They cross-fade through ~0.5s of blend
   at each swap, then settle on a single visible portrait for ~3s before swapping. */
.mk-hero__photo-img--m {
  z-index: 2;                           /* above W; default opacity 1 (reduced-motion shows M) */
}
.mk-hero__photo-img--w {
  z-index: 1;
  opacity: 0;                           /* default hidden so reduced-motion shows M only */
}
@media (prefers-reduced-motion: no-preference) {
  .mk-hero__photo-img--m {
    animation: mk-hero-photo-fade-m 8s ease-in-out infinite;
  }
  .mk-hero__photo-img--w {
    animation: mk-hero-photo-fade-w 8s ease-in-out infinite;
  }
}
@keyframes mk-hero-photo-fade-m {
  0%, 40%   { opacity: 1; }    /* M visible, W hidden */
  50%, 90%  { opacity: 0; }    /* M hidden, W visible */
  100%      { opacity: 1; }    /* M fades back in for next cycle */
}
@keyframes mk-hero-photo-fade-w {
  0%, 40%   { opacity: 0; }    /* W hidden while M is up */
  50%, 90%  { opacity: 1; }    /* W up while M is down */
  100%      { opacity: 0; }    /* W fades out as M fades back in */
}

/* Floating UI mockup cards - Costa's iconic visual */
.mk-data-card {
  position: absolute;
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-sh-3);
  padding: var(--mk-s-5);
  width: clamp(220px, 23vw, 280px);
  z-index: 3;
}
.mk-data-card__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--mk-s-3); }
.mk-data-card__label { font-size: var(--mk-t-sm); color: var(--mk-c-mute); font-weight: 500; }
.mk-data-card__dot { width: 28px; height: 28px; border-radius: var(--mk-r-pill); display: inline-flex; align-items: center; justify-content: center; }
.mk-data-card__dot svg { width: 14px; height: 14px; color: var(--mk-c-bg); }
.mk-data-card__amount { font-size: clamp(1.875rem, 3vw, var(--mk-t-h2)); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--mk-c-ink); }
.mk-data-card__amount--invert { color: var(--mk-c-on-deep); }
.mk-data-card__sub { margin-block-start: var(--mk-s-2); font-size: var(--mk-t-sm); color: var(--mk-c-mute); }
.mk-data-card__chart { margin-block-start: var(--mk-s-3); height: 48px; width: 100%; }
.mk-data-card--exp    { inset-inline-end: 4%;   top: 6%;  } /* visually-left in RTL - matches Costa */
.mk-data-card--inc    { inset-inline-start: 4%; top: 22%; } /* visually-right in RTL - matches Costa */
.mk-data-card--profit {
  background: var(--mk-c-accent);
  inset-inline-start: 50%;
  /* Sits lower than the other cards, overhanging the stage floor so it reads as the
     result the equation lands on. Kept in px (not the old %, which scaled with the
     stage) and paired with .mk-hero's padding-block-end: that padding is what stops
     `overflow: hidden` from slicing the overhang off. Raise both together. */
  bottom: -56px;
  transform: translateX(50%);          /* RTL centering; parallax lives on the wrapper */
  width: clamp(180px, 20vw, 240px);    /* smaller — leaves room for the phone in the photo */
  padding: var(--mk-s-4);              /* tighter than default --mk-s-5 */
}
.mk-data-card--profit .mk-data-card__label { color: var(--mk-c-bg-deep); font-weight: 600; }
.mk-data-card--profit .mk-data-card__amount { color: var(--mk-c-bg-deep); }

/* Accent dots — colour by direction (was an inline style on the element). */
.mk-data-card__dot--down { background: var(--mk-c-chart-down); }
.mk-data-card__dot--up   { background: var(--mk-c-chart-up); }

/* Profit donut */
.mk-donut { position: relative; width: 56px; height: 56px; flex: none; }
/* Two classes deep on purpose: the value also carries .mk-ltr, which sets
   display:inline-block further down the file. A single-class selector loses to it
   and the figure drops to the top-left of the ring instead of centring. */
.mk-donut .mk-donut__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mk-c-bg-deep);
}
.mk-data-card__sub--on-accent { color: rgba(7, 73, 129, 0.72); }

/* ── Card constellation ────────────────────────────────────────────────────
   The four cards state one equation (הכנסות − הוצאות = יתרה) and are joined by a
   dashed connector. Intentionally static: no mouse parallax, because any drift makes
   the equation look like it is wobbling. Grouping them here also gives the connector
   script one coordinate space to measure every card against. */
.mk-hero__constellation {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;                /* decorative — never intercept clicks */
}
.mk-hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mk-hero__link {
  fill: none;
  stroke: var(--mk-c-accent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  opacity: 0;              /* revealed by .is-linked once the geometry is measured */
}
.mk-hero__op {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-bg);
  border: 1.5px solid var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--mk-sh-1);
  /* JS writes left/top; this centres the glyph on that point. */
  transform: translate(-50%, -50%);
  opacity: 0;              /* revealed by .is-linked once positioned */
}
/* Set by the measuring script once the geometry is known — avoids a flash of
   connectors and operator glyphs at their unpositioned defaults. */
.mk-hero__constellation.is-linked .mk-hero__link { opacity: 0.85; }
.mk-hero__constellation.is-linked .mk-hero__op { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mk-hero__constellation.is-linked .mk-hero__link {
    animation: mk-net-flow 9s linear infinite;   /* same dash drift as the modules network */
  }
}

/* VAT card — the quiet fourth card, lower-start (visually-left in RTL). Mirrors the
   real דוח מע"מ: output VAT minus input VAT equals the amount payable. */
.mk-data-card--vat {
  inset-inline-end: 7%;
  bottom: 8%;
  width: clamp(190px, 19vw, 230px);
  padding: var(--mk-s-4);
}
.mk-data-card__amount--deep { color: var(--mk-c-bg-deep); }
.mk-data-card__badge {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
}
.mk-vat-rows {
  margin-block-start: var(--mk-s-3);
  padding-block-start: var(--mk-s-2);
  border-block-start: 1px solid var(--mk-c-line);
}
.mk-vat-row {
  display: flex;
  justify-content: space-between;
  gap: var(--mk-s-2);
  font-size: var(--mk-t-sm);
  color: var(--mk-c-mute);
  line-height: 1.9;
}
.mk-vat-row span:last-child { color: var(--mk-c-ink); font-weight: 600; }

/* Hero compact variant: title + subtitle only, no CTAs, no stage. Used by module DETAIL. */
.mk-hero--compact {
  /* Stacks on top of the next section's padding — keep it below a full section's
     value (was 6vw ≈ 77px, i.e. more than a whole section, on ~45 pages). */
  padding-block-end: clamp(var(--mk-s-5), 3.5vw, var(--mk-s-7));
}
.mk-hero--compact .mk-hero__title { font-size: clamp(2.25rem, 5vw, var(--mk-t-h1)); }

/* Hero no-stage variant: keeps CTAs + assurance, suppresses the stage. */
.mk-hero--no-stage { padding-block-end: clamp(var(--mk-s-5), 3.5vw, var(--mk-s-7)); }

/* Hero with-form variant: replaces the visual stage with a form panel */
.mk-hero--with-form { padding-block-end: clamp(var(--mk-s-8), 7vw, var(--mk-s-10)); }
.mk-hero--with-form .mk-hero__stage {
  min-height: 0;
  margin-top: clamp(var(--mk-s-5), 4vw, var(--mk-s-6));
  display: grid; place-items: center;
}
.mk-hero--with-form .mk-hero__photo,
.mk-hero--with-form .mk-data-card { display: none; }
.mk-hero--with-form .mk-hero__form-slot {
  width: 100%; max-width: 640px;
}

/* MOBILE / TABLET HERO ──────────────────────────────────────────────────
   The 3 floating data cards (expense / income / profit) are decorative
   product previews — they tile around the portrait on desktop to convey
   "this is what the product looks like." On any viewport below 880px the
   cards reflow to 70-80% width, stacked vertically, which:
     • completely covers the portrait behind them
     • leaves no space to read the figures (cramped text + tiny charts)
     • clashes with the reCAPTCHA badge in the bottom-end corner
     • pushes the next section absurdly far down the page
   The right call is to drop the cards entirely below 880px and keep the
   portrait + deep-blue wedge as the visual anchor.

   IMPORTANT: `.mk-hero__backdrop` is a sibling of `.mk-hero__stage`
   inside `.mk-hero`, so its `top: X%` is a percentage of the WHOLE hero
   (head + stage). On mobile the head grows tall (stacked CTAs, longer
   subline) while the stage shrinks (no cards) — so a top-anchored
   percentage wedge bleeds up into the head and lands behind the
   assurance text, killing legibility.

   Fix: anchor the wedge to the BOTTOM with a fixed clamp() height that
   tracks viewport width. The wedge then always wraps just the photo
   region regardless of how tall the head grows. The clip-path is also
   simplified to a single centered peak top + bottom — the desktop's
   dual-peak M silhouette compresses into two cramped little triangles
   at narrow widths. */
@media (max-width: 879.98px) {
  .mk-hero__stage {
    min-height: 0;
    padding-block-end: var(--mk-s-7);
  }
  /* Hides the cards, the connector layer and the operator glyphs in one go. */
  .mk-hero__stage .mk-hero__constellation,
  .mk-hero__stage .mk-deco-plus { display: none; }
  .mk-hero__photo {
    width: clamp(220px, 50vw, 340px);
    margin-block-start: var(--mk-s-4);
  }
  .mk-hero__backdrop {
    /* Bottom-anchored, fixed height — wraps only the photo region.
       Height range: 320px (smallest phones) → 480px (tablet). */
    top: auto;
    bottom: 0;
    height: clamp(320px, 75vw, 480px);
    clip-path: polygon(
      0%   8%,
      50%  0%,
      100% 8%,
      100% 92%,
      50%  100%,
      0%   92%
    );
  }
}

/* ─── Wedge backdrop ───────────────────────────────────────────────
   Edge-to-edge angular shape that sits behind the photo + cards.
   Costa-style: dual peaks at top and bottom (4-vertex M shape on each edge).
   The clip-path defines the visible deep-blue region; whitespace shows where
   the polygon edges cut inward. Z-index 0 keeps it under everything else. */
.mk-hero__backdrop {
  position: absolute;
  top: 32%;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--mk-c-bg-deep);
  z-index: 0;
  overflow: hidden;
  clip-path: polygon(
    0%   12%,
    25%  0%,
    50%  14%,
    75%  0%,
    100% 12%,
    100% 88%,
    75%  100%,
    50%  86%,
    25%  100%,
    0%   88%
  );
}
.mk-hero__backdrop-plus {
  position: absolute;
  font-size: clamp(40px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.18);
  font-weight: 300;
  line-height: 1;
  user-select: none;
}
.mk-hero__backdrop-plus--1 { top: 14%; inset-inline-start: 8%; }
.mk-hero__backdrop-plus--2 { top: 22%; inset-inline-end: 14%; font-size: clamp(56px, 6vw, 88px); }
.mk-hero__backdrop-plus--3 { bottom: 28%; inset-inline-start: 18%; font-size: clamp(48px, 5.5vw, 80px); }
.mk-hero__backdrop-plus--4 { bottom: 14%; inset-inline-end: 8%; }

/* When the backdrop is rendered, the existing stage deco-plus glyphs sit on the
   deep-blue area — flip them to white so they read against the new backdrop. */
.mk-hero__stage .mk-deco-plus {
  color: rgba(255, 255, 255, 0.18);
  font-size: clamp(48px, 5vw, 80px);
}

/* On small viewports the backdrop becomes more compact (and the cards reflow). */
@media (max-width: 880px) {
  .mk-hero__backdrop { top: 38%; }
  .mk-hero__backdrop-plus { display: none; }
}

/* Hero airplanes — 4 mouse-reactive brand glyphs (homepage only, opt-in via with_airplane: true).
   Each plane has its own position, size, opacity, and movement profile (see _hero.html.erb data-* attrs).
   Top 2 (1, 2): nose visually-LEFT (Hebrew RTL flow). Bottom 2 (3, 4): nose visually-RIGHT.
   Visibility: hidden under 1024px and on coarse-pointer devices (touch).
   Reduced-motion: rendered static at default position (transform reset).                             */
.mk-hero__airplane {
  position: absolute;
  z-index: 1;
  height: auto;
  color: var(--mk-c-bg-deep);
  pointer-events: none;
  transform-origin: 50% 60%;
  will-change: transform;
  /* Parallax driven by JS-set CSS custom properties; defaults are identity. */
  transform: translate3d(var(--mk-px, 0), var(--mk-py, 0), 0) rotate(var(--mk-pr, 0deg));
}
/* #1 Lead — top visually-left (RTL inline-end), the most prominent of the 4 */
.mk-hero__airplane--1 {
  inset-inline-end: 6%;
  top: 8%;
  width: clamp(34px, 3.4vw, 48px);
  opacity: 0.78;
}
/* #2 Mirror — top visually-right (RTL inline-start), inverse parallax */
.mk-hero__airplane--2 {
  inset-inline-start: 6%;
  top: 12%;
  width: clamp(28px, 2.8vw, 40px);
  opacity: 0.62;
}
/* #3 Trailer — bottom visually-left, slow lerp (trails noticeably) */
.mk-hero__airplane--3 {
  inset-inline-end: 8%;
  bottom: 18%;
  width: clamp(24px, 2.4vw, 34px);
  opacity: 0.55;
}
/* #4 Tilter — bottom visually-right, mouse-Y rotation (snappier) */
.mk-hero__airplane--4 {
  inset-inline-start: 10%;
  bottom: 10%;
  width: clamp(20px, 2vw, 28px);
  opacity: 0.48;
}
@media (max-width: 1023.98px), (pointer: coarse) {
  .mk-hero__airplane { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-hero__airplane { transform: none !important; will-change: auto; }
}

/* ============================================================
   9. SECTION HEADER
   ============================================================ */

.mk-section-header { max-width: 760px; margin-block-end: var(--mk-s-6); margin-inline: auto; text-align: center; }
.mk-section-header--start { text-align: start; margin-inline: 0; }
.mk-section-header__title {
  margin-block-start: var(--mk-s-2);
  font-size: clamp(1.875rem, 3.6vw, var(--mk-t-h2));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mk-c-ink);
}
.mk-section--deep .mk-section-header__title { color: var(--mk-c-on-deep); }
.mk-section-header__subtitle {
  margin-block-start: var(--mk-s-3);
  font-size: var(--mk-t-lede);
  color: var(--mk-c-ink-soft);
  max-width: 60ch;
  margin-inline: auto;
}
.mk-section--deep .mk-section-header__subtitle { color: rgba(255,255,255,0.78); }

/* ============================================================
   10. FEATURE GRID
   ============================================================ */

.mk-feature-grid { display: grid; gap: var(--mk-s-5); }
.mk-feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .mk-feature-grid--3, .mk-feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mk-feature-grid--3, .mk-feature-grid--4 { grid-template-columns: 1fr; }
}

.mk-feature {
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-1);
  transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease);
}
.mk-feature:hover { transform: translateY(-3px); box-shadow: var(--mk-sh-2); }
.mk-section--deep .mk-feature { background: rgba(255,255,255,0.06); box-shadow: none; backdrop-filter: blur(4px); }
.mk-section--deep .mk-feature:hover { background: rgba(255,255,255,0.10); }

.mk-feature__icon {
  width: 52px; height: 52px;
  border-radius: var(--mk-r-md);
  background: var(--mk-c-accent-soft);
  color: var(--mk-c-bg-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-block-end: var(--mk-s-4);
}
.mk-feature__icon svg { width: 26px; height: 26px; }
.mk-section--deep .mk-feature__icon { background: var(--mk-c-accent); color: var(--mk-c-bg-deep); }

.mk-feature__title {
  font-size: var(--mk-t-h4);
  font-weight: 700;
  line-height: 1.25;
  margin-block-end: var(--mk-s-2);
  color: inherit;
}
.mk-feature__body { font-size: var(--mk-t-base); line-height: 1.6; color: var(--mk-c-ink-soft); }
.mk-section--deep .mk-feature__body { color: rgba(255,255,255,0.78); }

/* ============================================================
   11. CARD (solution / module)
   ============================================================ */

.mk-card {
  display: block;
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-1);
  position: relative;
  transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease);
  text-align: start;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--mk-sh-3); }

.mk-card__head {
  display: flex;
  align-items: center;
  gap: var(--mk-s-3);
  margin-block-end: var(--mk-s-3);
}
.mk-card__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--mk-r-md);
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.mk-card__icon svg { width: 24px; height: 24px; }
.mk-card__title {
  flex: 1;
  font-size: var(--mk-t-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mk-c-ink);
  margin: 0;
}
.mk-card__body { color: var(--mk-c-ink-soft); margin-block-end: var(--mk-s-5); }
.mk-card__cta {
  display: inline-flex; align-items: center; gap: var(--mk-s-2);
  font-size: var(--mk-t-sm);
  color: var(--mk-c-bg-deep);
  font-weight: 600;
}
.mk-card:hover .mk-card__cta { color: var(--mk-c-accent-2); }
.mk-card--coming { opacity: 0.6; }
.mk-card--coming .mk-card__icon { background: var(--mk-c-mute); }

/* ============================================================
   12. TESTIMONIAL - masonry-ish grid (matches Costa's "צומחים ביחד איתך")
   ============================================================ */

.mk-quote-grid {
  display: grid;
  gap: var(--mk-s-5);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .mk-quote-grid { grid-template-columns: 1fr; } }

.mk-quote {
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-1);
  display: grid;
  gap: var(--mk-s-4);
}
.mk-quote__attribution { display: flex; align-items: center; gap: var(--mk-s-3); }
.mk-quote__avatar {
  width: 40px; height: 40px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.mk-quote__name { font-weight: 700; color: var(--mk-c-ink); font-size: var(--mk-t-sm); }
.mk-quote__role { font-size: var(--mk-t-xs); color: var(--mk-c-mute); }
.mk-quote__text {
  font-size: var(--mk-t-base);
  line-height: 1.55;
  color: var(--mk-c-ink-soft);
}

/* ============================================================
   13. LOGO STRIP - circular carousel (infinite marquee)
   ============================================================ */

/* Legacy textual slots - kept for design_system preview only */
.mk-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--mk-s-5);
  align-items: center;
}
@media (max-width: 880px) { .mk-logos { grid-template-columns: repeat(3, 1fr); } }
.mk-logo-slot {
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--mk-c-mute);
  letter-spacing: -0.01em;
  opacity: 0.6;
  transition: opacity var(--mk-dur-2) var(--mk-ease), color var(--mk-dur-2) var(--mk-ease);
}
.mk-logo-slot:hover { opacity: 1; color: var(--mk-c-bg-deep); }

/* Logo carousel - infinite marquee, two-row pattern (carpro-style)
   Pattern: track contains 2 identical rows; each row uses gap + padding-inline
   (= half-gap) so the cross-row seam matches the inter-logo spacing exactly.
   Animation translates -50% = exactly one row width = perfectly seamless loop.

   Math: row width = N*logo_w + (N-1)*gap + 2*(gap/2) = N*(logo_w + gap)
         track = 2 * row width
         -50% shift = row width = lands second row's logo 1 where first row's was. */

.mk-logos-carousel {
  position: relative;
  padding-block: var(--mk-s-5);
}

.mk-logos-carousel__viewport {
  position: relative;
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.mk-logos-carousel__track {
  display: flex;
  inline-size: max-content;
  animation: mk-logo-scroll 90s linear infinite;
  will-change: transform;
}

.mk-logos-carousel__row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 64px;
  padding-inline: 32px;
  /* Vertical padding gives room for scaled logos to extend without
     being clipped by the viewport's overflow:hidden.
     Max scale 1.55 on 56px row = 86.8px visible -> need >=16px each side. */
  padding-block: 24px;
}

.mk-logos-carousel__logo {
  inline-size: 140px;
  block-size: 56px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  transition: transform var(--mk-dur-2) var(--mk-ease);
  --logo-scale: 1;
  transform: scale(var(--logo-scale));
}

.mk-logos-carousel__logo:hover {
  transform: scale(calc(var(--logo-scale) + 0.08));
}

/* Per-logo visual balancing.
   Box aspect = 2.5:1 (140w / 56h). object-fit:contain shrinks logos that
   don't match the box aspect — square crops render at 56x56 (40% of box
   width) and ultra-wide wordmarks render thin (height < 56). --logo-scale
   compensates so each logo reads at similar visual weight in the row.
   Native pixel aspects measured from each file. Tweak as new logos arrive. */

/* Square ~1:1 (16 logos) - render 56x56, biggest boost */
.mk-logos-carousel__logo[src*="chiquita_sport"]  { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="double_row"]      { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="eyal_klein"]      { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="kogan_2014"]      { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="makeover_23"]     { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="mor_velevona"]    { --logo-scale: 1.50; }
.mk-logos-carousel__logo[src*="myshop"]          { --logo-scale: 1.45; }
.mk-logos-carousel__logo[src*="payslip"]         { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="relief"]          { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="ziga"]            { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="artishok"]        { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="elysium"]         { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="niclas"]          { --logo-scale: 1.50; }
.mk-logos-carousel__logo[src*="peretz_toys"]     { --logo-scale: 1.50; }
.mk-logos-carousel__logo[src*="siyeret_egoz"]    { --logo-scale: 1.55; }
.mk-logos-carousel__logo[src*="studio_hazuti"]   { --logo-scale: 1.55; }

/* Slightly wide (~1.1-1.3:1) - moderate boost */
.mk-logos-carousel__logo[src*="zikit"]           { --logo-scale: 1.45; }
.mk-logos-carousel__logo[src*="double.png"]      { --logo-scale: 1.40; }
.mk-logos-carousel__logo[src*="nuvola"]          { --logo-scale: 1.40; }
.mk-logos-carousel__logo[src*="full_break"]      { --logo-scale: 1.35; }
.mk-logos-carousel__logo[src*="dorin_raeuben"]   { --logo-scale: 1.35; }

/* Medium-wide (~1.5-2:1) - small boost */
.mk-logos-carousel__logo[src*="theranostica"]    { --logo-scale: 1.20; }
.mk-logos-carousel__logo[src*="seokru"]          { --logo-scale: 1.15; }

/* Wide (~2.5-3:1) - close to box aspect, no boost */
.mk-logos-carousel__logo[src*="vsak_architects"] { --logo-scale: 1.05; }
.mk-logos-carousel__logo[src*="tip_top"]         { --logo-scale: 1.00; }

/* Ultra-wide (>3:1) - render thin (height shrinks below 56), boost to fill */
.mk-logos-carousel__logo[src*="nakhimov"]        { --logo-scale: 1.35; }
.mk-logos-carousel__logo[src*="pelecard"]        { --logo-scale: 1.40; }

.mk-logos-carousel:hover .mk-logos-carousel__track,
.mk-logos-carousel:focus-within .mk-logos-carousel__track {
  animation-play-state: paused;
}

@keyframes mk-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 900px) {
  .mk-logos-carousel__row { gap: 96px; padding-inline: 48px; padding-block: 32px; }
  .mk-logos-carousel__logo { inline-size: 180px; block-size: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-logos-carousel__viewport {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mk-logos-carousel__track { animation: none; transform: none; }
}

/* ============================================================
   14. PRICING - billing toggle + 4-tier grid + cards + FAQ + trust strip
   ============================================================ */

/* Billing toggle (monthly | annual with savings badge) */
.mk-billing-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--mk-s-6);
  background: var(--mk-c-bg-alt);
  border-radius: var(--mk-r-pill);
  padding: 4px;
  gap: 4px;
  /* Cap the rendered width so on narrow viewports it stays inside the gutter
     while letting flex-wrap stack the buttons if the badge exceeds the row. */
  max-width: 100%;
}
.mk-billing-toggle__btn {
  position: relative;
  /* min-height for touch targets (the inline pill design pulls top/bottom in
     from the standard 44px so we explicitly enforce it here). */
  min-height: 40px;
  padding: var(--mk-s-3) var(--mk-s-5);
  border-radius: var(--mk-r-pill);
  font-size: var(--mk-t-sm);
  font-weight: 600;
  color: var(--mk-c-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--mk-s-2);
  transition: background var(--mk-dur-2) var(--mk-ease), color var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease);
  cursor: pointer;
}
@media (max-width: 360px) {
  /* Tighter padding so the savings badge doesn't push the toggle past the
     viewport on the smallest phones. */
  .mk-billing-toggle__btn { padding: var(--mk-s-3) var(--mk-s-3); }
}
.mk-billing-toggle__btn:hover { color: var(--mk-c-ink); }
.mk-billing-toggle__btn.is-active {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  box-shadow: var(--mk-sh-2);
}
.mk-billing-toggle__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  white-space: nowrap;
}
.mk-billing-toggle__btn.is-active .mk-billing-toggle__badge {
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
}

/* Grid - 4 tiers */
.mk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mk-s-5);
  align-items: stretch;
}
.mk-pricing-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--mk-s-4); }
@media (max-width: 1100px) { .mk-pricing-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mk-pricing-grid, .mk-pricing-grid--4 { grid-template-columns: 1fr; } }

/* Show only the active billing-mode price block */
.mk-pricing-grid[data-billing="monthly"] [data-mk-price="annual"] { display: none; }
.mk-pricing-grid[data-billing="annual"] [data-mk-price="monthly"] { display: none; }

/* Card */
.mk-price-card {
  position: relative;
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3.5vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-1);
  text-align: start;
  display: flex;
  flex-direction: column;
}
.mk-price-card--featured {
  background: var(--mk-c-bg-deep);
  border-color: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  box-shadow: var(--mk-sh-3);
  transform: translateY(-8px);
  z-index: 1;
}
.mk-price-card--featured .mk-price-card__name,
.mk-price-card--featured .mk-price-card__tagline,
.mk-price-card--featured .mk-price-card__period,
.mk-price-card--featured .mk-price-card__billing-note,
.mk-price-card--featured .mk-price-card__vat { color: var(--mk-c-on-deep); }
.mk-price-card--featured .mk-price-card__feature::before { background: var(--mk-c-accent); }

.mk-price-card__badge {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: var(--mk-s-5);
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--mk-r-pill);
  letter-spacing: 0.02em;
}

.mk-price-card__name {
  font-size: var(--mk-t-sm);
  font-weight: 800;
  color: var(--mk-c-accent-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mk-price-card--featured .mk-price-card__name { color: var(--mk-c-accent); }
.mk-price-card__tagline {
  margin-block-start: var(--mk-s-2);
  font-size: var(--mk-t-sm);
  color: var(--mk-c-ink-soft);
  min-height: 2.5em;
}

.mk-price-card__pricing {
  margin-block: var(--mk-s-5) var(--mk-s-5);
  padding-block-end: var(--mk-s-5);
  border-block-end: 1px solid var(--mk-c-line);
}
.mk-price-card--featured .mk-price-card__pricing { border-block-end-color: rgba(255, 255, 255, 0.15); }

.mk-price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--mk-s-2);
}
.mk-price-card__amount {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}
.mk-price-card__period {
  font-size: var(--mk-t-sm);
  font-weight: 500;
  color: var(--mk-c-ink-soft);
}

.mk-price-card__billing-note {
  margin-block-start: var(--mk-s-2);
  font-size: 0.8125rem;
  color: var(--mk-c-mute);
}
.mk-price-card__vat {
  margin-block-start: var(--mk-s-1);
  font-size: 0.75rem;
  color: var(--mk-c-mute);
  font-weight: 500;
}

.mk-price-card__features {
  margin: 0 0 var(--mk-s-5);
  display: grid;
  gap: var(--mk-s-3);
  flex: 1;
}
.mk-price-card__feature {
  display: flex;
  gap: var(--mk-s-3);
  align-items: flex-start;
  font-size: var(--mk-t-sm);
  line-height: 1.4;
}
.mk-price-card__feature::before {
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-block-start: 1px;
  background: var(--mk-c-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23074981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}
.mk-price-card--featured .mk-price-card__feature::before {
  background-color: rgba(0, 212, 200, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300D4C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E");
}
.mk-price-card__feature--neg { color: var(--mk-c-mute); }
.mk-price-card__feature--neg::before {
  background-color: var(--mk-c-bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238A95A3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M6 18 18 6'/%3E%3C/svg%3E");
}
.mk-price-card--featured .mk-price-card__feature--neg { color: rgba(255, 255, 255, 0.5); }

/* Full-width button (used inside price cards) */
.mk-btn--full { width: 100%; justify-content: center; }
.mk-price-card--featured .mk-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--mk-c-on-deep);
}
.mk-price-card--featured .mk-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Custom tier callout (representatives / high-volume) */
.mk-custom-tier {
  background: var(--mk-c-bg);
  border: 2px dashed var(--mk-c-bg-deep);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-5), 4vw, var(--mk-s-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  flex-wrap: wrap;
}
/* min-width:0 + flex-basis prevents the copy block from forcing the wrap-flex
   container past the viewport at <320px while keeping the desktop wrap point. */
.mk-custom-tier__copy { flex: 1 1 280px; min-width: 0; }
.mk-custom-tier__title {
  margin-block-start: var(--mk-s-2);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--mk-c-ink);
  line-height: 1.2;
}
.mk-custom-tier__body {
  margin-block-start: var(--mk-s-3);
  color: var(--mk-c-ink-soft);
  line-height: 1.6;
}

/* Trust strip (3 trust signals) */
.mk-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mk-s-5);
  background: var(--mk-c-bg-alt);
  border-radius: var(--mk-r-md);
  padding: var(--mk-s-6);
}
@media (max-width: 760px) { .mk-trust-strip { grid-template-columns: 1fr; } }
.mk-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--mk-s-3);
}
.mk-trust-strip__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--mk-r-md);
  background: var(--mk-c-bg);
  color: var(--mk-c-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-trust-strip__icon svg { width: 22px; height: 22px; }
.mk-trust-strip__label { font-size: var(--mk-t-sm); font-weight: 600; color: var(--mk-c-ink); line-height: 1.4; }

/* ============================================================
   16b. TABS (terms/privacy/DPA, generic component)
   ============================================================ */

.mk-tabs {
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-sh-1);
  /* No `overflow: hidden` here. It made .mk-tabs the containing block for the
     sticky nav below, so `top: var(--mk-header-h)` offset the nav 84px down at
     all times — leaving dead space and overlapping the panel. The nav rounds
     its own top corners instead of relying on the parent to clip them. */
}
.mk-tabs__nav {
  display: flex;
  border-start-start-radius: var(--mk-r-md);
  border-start-end-radius: var(--mk-r-md);
  border-block-end: 1px solid var(--mk-c-line);
  background: var(--mk-c-bg-alt);
  /* Sticky offset accounts for the marketing header so the tabs stay visible
     when the user scrolls down a long policy document. */
  position: sticky;
  top: var(--mk-header-h);
  z-index: 5;
  /* Allow horizontal scroll only as a fallback if Hebrew tab labels still
     overflow at extreme narrow widths, but keep flex:1 default behavior. */
  overflow-x: auto;
  scrollbar-width: none;
}
.mk-tabs__nav::-webkit-scrollbar { display: none; }
.mk-tabs__btn {
  flex: 1 0 auto;
  min-height: 44px;
  padding: var(--mk-s-4) var(--mk-s-3);
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-ink-soft);
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--mk-dur-2) var(--mk-ease), background var(--mk-dur-2) var(--mk-ease), border-block-end-color var(--mk-dur-2) var(--mk-ease);
}
.mk-tabs__btn:focus-visible {
  outline-offset: -3px;
}
.mk-tabs__btn:hover { color: var(--mk-c-ink); background: rgba(7, 73, 129, 0.04); }
.mk-tabs__btn.is-active {
  color: var(--mk-c-bg-deep);
  background: var(--mk-c-bg);
  border-block-end-color: var(--mk-c-accent);
}
.mk-tabs__panel { padding: var(--mk-s-7) var(--mk-s-7); }
.mk-tabs__panel:not(.is-active) { display: none; }
/* When mk-article-prose lives inside a tab panel, drop its card chrome + narrow column;
   the surrounding tabs card already provides those, and legal docs read better wider. */
.mk-tabs__panel.mk-article-prose {
  max-width: none;
  margin-inline: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 720px) {
  .mk-tabs__btn { font-size: 0.8125rem; padding: var(--mk-s-3) var(--mk-s-2); }
  .mk-tabs__panel { padding: var(--mk-s-5); }
}

/* mk-table - used inside mk-article-prose for DPA appendix */
.mk-article-prose .mk-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--mk-s-5);
  font-size: var(--mk-t-sm);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-sm);
  overflow: hidden;
}
.mk-article-prose .mk-table thead {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
}
.mk-article-prose .mk-table th {
  padding: var(--mk-s-3) var(--mk-s-4);
  font-weight: 800;
  text-align: start;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
}
.mk-article-prose .mk-table td {
  padding: var(--mk-s-4);
  border-block-start: 1px solid var(--mk-c-line);
  vertical-align: top;
}
.mk-article-prose .mk-table tr:nth-child(even) td { background: var(--mk-c-bg-alt); }
.mk-article-prose .mk-table td:first-child {
  font-weight: 700;
  color: var(--mk-c-ink);
  border-inline-start: 3px solid var(--mk-c-accent);
}
.mk-article-prose .mk-table ul {
  padding: 0;
  margin: 0;
  list-style: disc;
  padding-inline-start: var(--mk-s-5);
}

/* ============================================================
   17. ARTICLES (המוסף) - category nav + grid + cards + prose
   ============================================================ */

/* Category filter pills */
.mk-articles-nav {
  display: flex;
  gap: var(--mk-s-3);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--mk-s-4);
}
.mk-articles-nav__link {
  padding: var(--mk-s-3) var(--mk-s-5);
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-ink);
  transition: all var(--mk-dur-2) var(--mk-ease);
}
.mk-articles-nav__link:hover {
  border-color: var(--mk-c-bg-deep);
  color: var(--mk-c-bg-deep);
  transform: translateY(-2px);
}
.mk-articles-nav__link.is-active {
  background: var(--mk-c-bg-deep);
  border-color: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
}

/* Article grid (3-col desktop, 2-col tablet, 1-col mobile) */
.mk-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mk-s-5);
}
@media (max-width: 1024px) { .mk-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mk-articles-grid { grid-template-columns: 1fr; } }

/* Article card */
.mk-article-card {
  display: block;
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-1);
  text-align: start;
  transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease), border-color var(--mk-dur-2) var(--mk-ease);
  display: flex;
  flex-direction: column;
}
.mk-article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mk-sh-3);
  border-color: var(--mk-c-bg-deep);
}
.mk-article-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-accent-soft);
  color: var(--mk-c-bg-deep);
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.mk-article-card__title {
  margin-block-start: var(--mk-s-4);
  font-size: var(--mk-t-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--mk-c-ink);
}
.mk-article-card__excerpt {
  margin-block-start: var(--mk-s-3);
  color: var(--mk-c-ink-soft);
  line-height: 1.6;
  flex: 1;
}
.mk-article-card__cta {
  margin-block-start: var(--mk-s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--mk-s-2);
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-bg-deep);
}
.mk-article-card:hover .mk-article-card__cta { color: var(--mk-c-accent-2); }

/* Article body prose (renders user-authored HTML cleanly) */
.mk-article-prose {
  max-width: 760px;
  margin-inline: auto;
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  /* Tighter padding on small screens so the inner column doesn't shrink to
     a sliver after the parent container's gutter is already applied. */
  padding: clamp(var(--mk-s-5), 4vw, var(--mk-s-7));
  box-shadow: var(--mk-sh-1);
  color: var(--mk-c-ink);
  line-height: 1.8;
  font-size: 1.0625rem;
}
/* Wide variant for legal/reference docs (terms, accessibility) where dense content
   benefits from a wider column than article-body readability would. */
.mk-article-prose--wide { max-width: 1040px; }
.mk-article-prose > * + * { margin-block-start: var(--mk-s-5); }
.mk-article-prose h1, .mk-article-prose h2, .mk-article-prose h3, .mk-article-prose h4 {
  font-weight: 800;
  line-height: 1.3;
  color: var(--mk-c-ink);
  margin-block: var(--mk-s-6) var(--mk-s-4);
}
/* A leading heading would otherwise stack its top margin on the card's padding
   (48 + 48 = 96px of empty space before the first line on the legal pages). */
.mk-article-prose > :first-child { margin-block-start: 0; }
.mk-article-prose h1 { font-size: var(--mk-t-h2); }
.mk-article-prose h2 { font-size: var(--mk-t-h3); }
.mk-article-prose h3 { font-size: var(--mk-t-h4); }
.mk-article-prose h4 { font-size: 1.125rem; }
.mk-article-prose p { margin: 0; }
.mk-article-prose a { color: var(--mk-c-bg-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.mk-article-prose a:hover { color: var(--mk-c-accent-2); }
.mk-article-prose ul, .mk-article-prose ol { padding-inline-start: var(--mk-s-6); display: grid; gap: var(--mk-s-2); }
.mk-article-prose ul { list-style: disc; }
.mk-article-prose ol { list-style: decimal; }
.mk-article-prose li::marker { color: var(--mk-c-accent-2); }
.mk-article-prose blockquote {
  margin: 0;
  padding: var(--mk-s-5) var(--mk-s-6);
  border-inline-start: 4px solid var(--mk-c-accent);
  background: var(--mk-c-bg-alt);
  border-radius: var(--mk-r-sm);
  font-size: 1.125rem;
  font-weight: 500;
}
.mk-article-prose img { border-radius: var(--mk-r-sm); display: block; max-width: 100%; height: auto; }
.mk-article-prose strong { font-weight: 800; color: var(--mk-c-ink); }
.mk-article-prose hr { border: 0; border-block-start: 1px solid var(--mk-c-line); margin-block: var(--mk-s-7); }

/* Share row */
.mk-article-share {
  max-width: 760px;
  margin: var(--mk-s-6) auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mk-s-3);
  padding: clamp(var(--mk-s-4), 3vw, var(--mk-s-5));
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
}
.mk-article-share__label { font-weight: 700; color: var(--mk-c-ink); margin-inline-end: auto; }
.mk-article-share__btn {
  /* Bumped from 40x40 to 44x44 to meet WCAG 2.5.5 touch-target minimum.
     Icon stays visually 18px so the button just gains a wider hit area. */
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mk-c-bg-alt);
  color: var(--mk-c-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mk-dur-2) var(--mk-ease), color var(--mk-dur-2) var(--mk-ease), transform var(--mk-dur-2) var(--mk-ease);
}
.mk-article-share__btn:hover,
.mk-article-share__btn:focus-visible {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  transform: translateY(-2px);
}

/* Related articles block */
.mk-article-related { margin-block-start: var(--mk-s-7); }
.mk-article-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-s-4);
  flex-wrap: wrap;
  margin-block-end: var(--mk-s-5);
}
.mk-article-related__title { font-size: var(--mk-t-h3); font-weight: 800; color: var(--mk-c-ink); }
.mk-article-related__all {
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-bg-deep);
  text-decoration: none;
}
.mk-article-related__all:hover { color: var(--mk-c-accent-2); }

/* FAQ category nav (used on /marketing/faq) */
.mk-faq-nav {
  display: flex;
  gap: var(--mk-s-3);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--mk-s-4);
  background: var(--mk-c-bg-alt);
  border-radius: var(--mk-r-md);
}
.mk-faq-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-s-2);
  padding: var(--mk-s-3) var(--mk-s-5);
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-ink);
  transition: all var(--mk-dur-2) var(--mk-ease);
}
.mk-faq-nav__link:hover {
  background: var(--mk-c-bg-deep);
  border-color: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  transform: translateY(-2px);
}
.mk-faq-nav__count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-accent-soft);
  color: var(--mk-c-bg-deep);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}
.mk-faq-nav__link:hover .mk-faq-nav__count { background: var(--mk-c-accent); }

/* FAQ contact callout (bottom of /marketing/faq) */
.mk-faq-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--mk-s-4), 3vw, var(--mk-s-6));
  flex-wrap: wrap;
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-5), 4vw, var(--mk-s-7));
  box-shadow: var(--mk-sh-1);
}
.mk-faq-contact__copy { flex: 1 1 280px; min-width: 0; }
.mk-faq-contact__title {
  margin-block-start: var(--mk-s-2);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--mk-c-ink);
  line-height: 1.2;
}
.mk-faq-contact__body {
  margin-block-start: var(--mk-s-3);
  color: var(--mk-c-ink-soft);
  line-height: 1.6;
}
.mk-faq-contact__cta { display: flex; gap: var(--mk-s-3); flex-wrap: wrap; }

/* FAQ accordion (native <details>/<summary>) */
.mk-faq { display: grid; gap: var(--mk-s-3); margin-block-start: var(--mk-s-6); }
.mk-faq__item {
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  overflow: hidden;
  transition: box-shadow var(--mk-dur-2) var(--mk-ease);
}
.mk-faq__item[open] { box-shadow: var(--mk-sh-2); border-color: var(--mk-c-bg-deep); }
.mk-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-s-4);
  /* Tighter padding on narrow viewports so the question text + plus icon fit
     comfortably without breaking onto a third line. */
  padding: clamp(var(--mk-s-4), 3.5vw, var(--mk-s-5)) clamp(var(--mk-s-4), 4vw, var(--mk-s-6));
  min-height: 44px;
  font-size: var(--mk-t-base);
  font-weight: 700;
  color: var(--mk-c-ink);
  cursor: pointer;
  list-style: none;
}
.mk-faq__q::-webkit-details-marker { display: none; }
/* Focus-visible should ring only the summary, not the whole <details> block. */
.mk-faq__item:focus-within { outline: 0; }
.mk-faq__q:focus-visible {
  outline: 3px solid var(--mk-c-accent);
  outline-offset: -3px;
  border-radius: var(--mk-r-md);
}
.mk-faq__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mk-c-bg-alt);
  color: var(--mk-c-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform var(--mk-dur-2) var(--mk-ease), background var(--mk-dur-2) var(--mk-ease);
}
.mk-faq__item[open] .mk-faq__icon {
  transform: rotate(45deg);
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
}
.mk-faq__a {
  padding: 0 var(--mk-s-6) var(--mk-s-5);
  color: var(--mk-c-ink-soft);
  line-height: 1.7;
}

/* ============================================================
   15. CTA BAND - full deep block, white H2, teal CTA, scattered + glyphs
   ============================================================ */

.mk-cta-band {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  padding-block: clamp(var(--mk-s-6), 4vw, var(--mk-s-8));
  position: relative;
  overflow: hidden;
  text-align: center;
}
.mk-cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
}
.mk-cta-band__title {
  font-size: clamp(1.875rem, 4vw, var(--mk-t-h2));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--mk-c-on-deep);
}
.mk-cta-band__subtitle {
  margin-block-start: var(--mk-s-4);
  color: rgba(255,255,255,0.78);
  font-size: var(--mk-t-lede);
  max-width: 56ch;
  margin-inline: auto;
}
.mk-cta-band__buttons { margin-block-start: var(--mk-s-6); display: inline-flex; gap: var(--mk-s-4); flex-wrap: wrap; justify-content: center; }

/* Form variant - keeps copy centered on top, form below in a max-width slot */
.mk-cta-band--form .mk-cta-band__form-slot {
  margin-block-start: var(--mk-s-7);
  max-width: 720px;
  margin-inline: auto;
}

/* ============================================================
   16. CONTACT FORM - white card with rounded inputs + teal CTA
   ============================================================ */

.mk-form { display: grid; gap: var(--mk-s-4); }
.mk-form--card {
  background: var(--mk-c-bg);
  color: var(--mk-c-ink);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-4), 3.5vw, var(--mk-s-6));
  box-shadow: var(--mk-sh-2);
}
.mk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-s-4); }
@media (max-width: 560px) { .mk-form__row { grid-template-columns: 1fr; } }

.mk-field { display: grid; gap: var(--mk-s-2); }
.mk-field__label {
  font-size: var(--mk-t-sm);
  color: var(--mk-c-ink);
  font-weight: 600;
}
.mk-field__required {
  color: #dc2626;
  margin-inline-start: 2px;
  font-weight: 700;
}
.mk-field__optional {
  color: var(--mk-c-mute);
  font-weight: 400;
  font-size: 0.85em;
  margin-inline-start: 4px;
}
.mk-field input,
.mk-field select,
.mk-field textarea {
  width: 100%;
  /* font-size inherits the 16px body size, which prevents iOS Safari from
     zooming the viewport when an input is focused. Don't drop below 16px. */
  font: inherit;
  color: var(--mk-c-ink);
  background: var(--mk-c-bg-alt);
  border: 1.5px solid transparent;
  border-radius: var(--mk-r-sm);
  /* min-height ensures comfortable touch targets even when padding shrinks. */
  min-height: 44px;
  padding: var(--mk-s-3) var(--mk-s-4);
  transition: border-color var(--mk-dur-1) var(--mk-ease), background var(--mk-dur-1) var(--mk-ease);
}
.mk-field textarea { resize: vertical; min-height: 96px; }
.mk-field input:focus,
.mk-field select:focus,
.mk-field textarea:focus {
  border-color: var(--mk-c-bg-deep);
  background: var(--mk-c-bg);
  outline: 0;
}
.mk-field--checkbox { grid-template-columns: auto 1fr; align-items: center; }
.mk-field--checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--mk-c-bg-deep);
}
.mk-field--checkbox label, .mk-field--checkbox span:not(.mk-field__label) { font-size: var(--mk-t-sm); color: var(--mk-c-ink-soft); }

.mk-form__submit-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--mk-s-4); flex-wrap: wrap;
  margin-block-start: var(--mk-s-3);
}
.mk-form__legal { font-size: var(--mk-t-xs); color: var(--mk-c-mute); max-width: 36ch; flex: 1 1 18rem; min-width: 0; }
@media (max-width: 480px) {
  .mk-form__submit-row { flex-direction: column; align-items: stretch; }
  .mk-form__legal { max-width: none; flex: 0 0 auto; }
  .mk-form .btn { width: 100%; }
}

/* btn_save() helper renders <button class="btn ..."> - override defensively */
.mk-form .btn {
  padding: var(--mk-s-3) var(--mk-s-6);
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  border: 2px solid var(--mk-c-accent);
  border-radius: var(--mk-r-pill);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--mk-dur-2) var(--mk-ease);
}
.mk-form .btn:hover { background: var(--mk-c-accent-2); border-color: var(--mk-c-accent-2); color: var(--mk-c-bg); transform: translateY(-2px); }

/* ============================================================
   17. FOOTER
   ============================================================ */

.mk-footer { background: var(--mk-c-bg-dark); color: rgba(255,255,255,0.78); }
.mk-footer__cta-band {
  background: var(--mk-c-bg-deep);
  color: var(--mk-c-on-deep);
  position: relative;
  overflow: hidden;
}
.mk-footer__cta-inner {
  position: relative;
  max-width: var(--mk-max-w);
  margin-inline: auto;
  padding: clamp(var(--mk-s-7), 6vw, var(--mk-s-9)) var(--mk-gutter);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--mk-s-8);
  align-items: center;
}
@media (max-width: 880px) { .mk-footer__cta-inner { grid-template-columns: 1fr; text-align: center; } }

.mk-footer__cta-text .mk-eyebrow { color: var(--mk-c-accent); }
.mk-footer__cta-text h2 {
  font-size: clamp(1.875rem, 4vw, var(--mk-t-h2));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-block-start: var(--mk-s-3);
  color: var(--mk-c-on-deep);
}
.mk-footer__cta-text .mk-lede { color: rgba(255,255,255,0.78); margin-block-start: var(--mk-s-3); }

.mk-footer__meta { padding-block: var(--mk-s-7); border-block-start: 1px solid rgba(255,255,255,0.10); }
.mk-footer__meta-inner {
  max-width: var(--mk-max-w);
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: var(--mk-s-7);
}
@media (max-width: 880px) { .mk-footer__meta-inner { grid-template-columns: 1fr; } }

.mk-footer__brand-mark { color: var(--mk-c-accent); display: inline-flex; }
.mk-footer__brand .mk-footer__logo-img { color: var(--mk-c-on-deep); margin-block-end: var(--mk-s-3); }
.mk-footer__tagline { font-size: var(--mk-t-base); color: rgba(255,255,255,0.78); margin-block-start: var(--mk-s-3); font-weight: 500; }

/* Social profiles - the same list Organization.sameAs publishes. */
.mk-footer__social { display: flex; gap: var(--mk-s-3); list-style: none; padding: 0; margin: var(--mk-s-4) 0 0; }
.mk-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.mk-footer__social-link svg { inline-size: 1.125rem; block-size: 1.125rem; display: block; }
.mk-footer__social-link:hover,
.mk-footer__social-link:focus-visible { color: var(--mk-c-on-deep); background: var(--mk-c-accent); transform: translateY(-2px); }
.mk-footer__social-link:focus-visible { outline: 2px solid var(--mk-c-on-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mk-footer__social-link { transition: none; } .mk-footer__social-link:hover { transform: none; } }
.mk-footer__copy { font-size: var(--mk-t-sm); color: rgba(255,255,255,0.55); margin-block-start: var(--mk-s-3); }

.mk-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mk-s-6);
}
@media (max-width: 700px) { .mk-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--mk-s-5); } }
/* Below 360px the 2-col footer cramps tags + counts onto two lines. Stack to
   single column for clean readability. */
@media (max-width: 359.98px) { .mk-footer__cols { grid-template-columns: 1fr; } }

.mk-footer__col-title {
  font-size: var(--mk-t-sm);
  color: var(--mk-c-on-deep);
  font-weight: 700;
  margin-block-end: var(--mk-s-3);
}
.mk-footer__col ul { display: grid; gap: var(--mk-s-2); }
.mk-footer__col a { font-size: var(--mk-t-sm); color: rgba(255,255,255,0.65); }
.mk-footer__col a:hover { color: var(--mk-c-accent); }
.mk-footer__contact a { color: rgba(255,255,255,0.78); }

/* ============================================================
   18. DESIGN-SYSTEM PREVIEW PAGE (only used by /marketing/design_system)
   ============================================================ */

.ds-page { max-width: var(--mk-max-w); margin-inline: auto; padding-inline: var(--mk-gutter); padding-block: var(--mk-s-8); }
.ds-page__intro { display: grid; grid-template-columns: 1fr auto; gap: var(--mk-s-5); align-items: end; padding-block-end: var(--mk-s-6); border-block-end: 1px solid var(--mk-c-line); }
.ds-page__intro h1 { font-size: clamp(2.25rem, 4.5vw, var(--mk-t-h1)); font-weight: 800; letter-spacing: -0.025em; color: var(--mk-c-ink); }
.ds-page__intro p { color: var(--mk-c-ink-soft); max-width: 60ch; margin-block-start: var(--mk-s-3); }
.ds-page__meta { font-size: var(--mk-t-xs); color: var(--mk-c-mute); display: grid; gap: var(--mk-s-1); text-align: end; }

.ds-block { padding-block: var(--mk-s-8); border-block-end: 1px solid var(--mk-c-line); }
.ds-block:last-of-type { border-block-end: 0; }
.ds-block__head { display: grid; grid-template-columns: auto 1fr; gap: var(--mk-s-5); align-items: baseline; margin-block-end: var(--mk-s-6); }
.ds-block__id { font-size: var(--mk-t-xs); color: var(--mk-c-mute); font-weight: 600; align-self: start; padding-block-start: var(--mk-s-2); }
.ds-block__title { font-size: var(--mk-t-h3); font-weight: 800; color: var(--mk-c-ink); letter-spacing: -0.02em; }
.ds-block__notes { color: var(--mk-c-ink-soft); margin-block-start: var(--mk-s-2); max-width: 60ch; }

.ds-variant { margin-block-end: var(--mk-s-6); }
.ds-variant__label { display: inline-block; font-size: var(--mk-t-xs); color: var(--mk-c-mute); font-weight: 600; margin-block-end: var(--mk-s-3); padding-block-end: var(--mk-s-2); border-block-end: 1px solid var(--mk-c-line); width: 100%; }

.ds-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mk-s-4); }
.ds-swatch { border-radius: var(--mk-r-md); overflow: hidden; box-shadow: var(--mk-sh-1); background: var(--mk-c-bg); }
.ds-swatch__chip { height: 88px; }
.ds-swatch__meta { padding: var(--mk-s-3) var(--mk-s-4); font-size: var(--mk-t-xs); }
.ds-swatch__name { color: var(--mk-c-ink); font-weight: 600; }
.ds-swatch__hex { color: var(--mk-c-mute); margin-block-start: var(--mk-s-1); text-transform: uppercase; }

.ds-type-row { display: grid; grid-template-columns: 130px 110px 1fr; gap: var(--mk-s-5); align-items: baseline; padding-block: var(--mk-s-3); border-block-end: 1px solid var(--mk-c-line); }
.ds-type-row:last-child { border-block-end: 0; }
.ds-type-row__name { font-size: var(--mk-t-xs); color: var(--mk-c-mute); font-weight: 600; }
.ds-type-row__size { font-size: var(--mk-t-sm); color: var(--mk-c-ink-soft); }

.ds-space-row { display: grid; grid-template-columns: 90px 90px 1fr; gap: var(--mk-s-5); align-items: center; padding-block: var(--mk-s-2); border-block-end: 1px solid var(--mk-c-line); }
.ds-space-row:last-child { border-block-end: 0; }
.ds-space-row__bar { height: 14px; background: var(--mk-c-bg-deep); border-radius: var(--mk-r-sm); }
.ds-space-row__name { font-size: var(--mk-t-xs); color: var(--mk-c-mute); font-weight: 600; }
.ds-space-row__size { font-size: var(--mk-t-sm); color: var(--mk-c-ink-soft); }

.ds-frame { background: var(--mk-c-bg-alt); border-radius: var(--mk-r-md); padding: var(--mk-s-6); position: relative; overflow: hidden; }
.ds-frame--bleed { padding: 0; }

/* ============================================================
   19. MOTION
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .mk-reveal { opacity: 0; transform: translateY(16px); animation: mk-reveal var(--mk-dur-3) var(--mk-ease) forwards; }
  .mk-reveal--1 { animation-delay: 60ms; }
  .mk-reveal--2 { animation-delay: 140ms; }
  .mk-reveal--3 { animation-delay: 220ms; }
  .mk-reveal--4 { animation-delay: 300ms; }
  @keyframes mk-reveal { to { opacity: 1; transform: none; } }
}

/* ============================================================
   20. UTILITIES
   ============================================================ */

.mk-flex { display: flex; }
.mk-flex--gap-3 { gap: var(--mk-s-3); }
.mk-flex--gap-4 { gap: var(--mk-s-4); }
.mk-flex--center { align-items: center; }
.mk-flex--between { justify-content: space-between; }
.mk-grid { display: grid; }
.mk-grid--gap-5 { gap: var(--mk-s-5); }
.mk-mt-3 { margin-block-start: var(--mk-s-3); }
.mk-mt-4 { margin-block-start: var(--mk-s-4); }
.mk-mt-5 { margin-block-start: var(--mk-s-5); }
.mk-mt-6 { margin-block-start: var(--mk-s-6); }
.mk-text-center { text-align: center; }
.mk-text-soft { color: var(--mk-c-ink-soft); }
.mk-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ============================================================
   21. ILLUSTRATED CARD (modules INDEX + homepage modules section)
   ============================================================ */

.mk-modules-2up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-s-7);
}
@media (min-width: 768px) { .mk-modules-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mk-illus-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  overflow: hidden;
  box-shadow: var(--mk-sh-1);
  transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease);
  text-align: start;
}
.mk-illus-card:hover { transform: translateY(-6px); box-shadow: var(--mk-sh-3); }
.mk-illus-card:hover .mk-illus-card__illustration img { transform: scale(1.02); }
.mk-illus-card:hover .mk-illus-card__cta { color: var(--mk-c-accent-2); }
.mk-illus-card:hover .mk-illus-card__arrow { transform: translateX(-6px); }

.mk-illus-card__illustration {
  background: var(--mk-c-bg-alt);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.mk-illus-card__illustration img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mk-dur-3) var(--mk-ease);
}

.mk-illus-card__body { padding: var(--mk-s-6); display: grid; gap: var(--mk-s-3); align-content: start; }
.mk-illus-card__title { font-size: var(--mk-t-h4); font-weight: 700; line-height: 1.25; color: var(--mk-c-bg-deep); margin: 0; }
.mk-illus-card__copy { color: var(--mk-c-ink-soft); line-height: 1.6; margin: 0; }
.mk-illus-card__cta {
  display: inline-flex; align-items: center; gap: var(--mk-s-2);
  margin-block-start: var(--mk-s-2);
  font-weight: 600;
  color: var(--mk-c-bg-deep);
  transition: color var(--mk-dur-2) var(--mk-ease);
}
.mk-illus-card__arrow { display: inline-flex; transition: transform var(--mk-dur-2) var(--mk-ease); }

.mk-illus-card--coming { opacity: 0.78; }
.mk-illus-card--coming .mk-illus-card__title { color: var(--mk-c-ink); }

/* Compact variant - for 3-up grids on solution pages */
.mk-illus-card--compact .mk-illus-card__body { padding: var(--mk-s-5); gap: var(--mk-s-2); }
.mk-illus-card--compact .mk-illus-card__title { font-size: var(--mk-t-base); line-height: 1.3; }
.mk-illus-card--compact .mk-illus-card__copy { font-size: var(--mk-t-sm); line-height: 1.5; }
.mk-illus-card--compact .mk-illus-card__cta { font-size: var(--mk-t-xs); }

/* ============================================================
   22. STAND-ALONE VISUAL BLOCK (relocated mk-hero__photo for module DETAIL)
   ============================================================ */

.mk-visual-photo {
  position: relative;
  width: clamp(280px, 38vw, 460px);
  aspect-ratio: 4/3;
  margin-inline: auto;
  border-radius: var(--mk-r-lg);
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(7,73,129,0.12), transparent 70%),
    linear-gradient(180deg, var(--mk-c-accent-soft) 0%, var(--mk-c-bg-alt) 100%);
  overflow: hidden;
  display: flex; align-items: end; justify-content: center;
  box-shadow: var(--mk-sh-1);
}
.mk-visual-photo::after {
  content: "[ צילום מסך - מסך ניהול ההוצאות ]";
  font-size: var(--mk-t-sm);
  color: var(--mk-c-bg-deep);
  font-weight: 500;
  background: rgba(255,255,255,0.85);
  padding: var(--mk-s-2) var(--mk-s-4);
  border-radius: var(--mk-r-pill);
  margin-block-end: var(--mk-s-5);
}

/* ============================================================
   23. COUNTER BAND (homepage testimonial section)
   ============================================================ */

.mk-counter-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mk-s-7);
  text-align: center;
  margin-block-end: var(--mk-s-6);
}
@media (max-width: 700px) { .mk-counter-band { grid-template-columns: 1fr; gap: var(--mk-s-5); } }

.mk-counter__value {
  font-family: var(--mk-f-body);
  font-feature-settings: "tnum" 1;
  font-size: clamp(2.75rem, 5.5vw, var(--mk-t-h1));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--mk-c-bg-deep);
}
.mk-counter__suffix { color: var(--mk-c-accent-2); }
.mk-counter__label {
  margin-block-start: var(--mk-s-3);
  font-size: var(--mk-t-base);
  color: var(--mk-c-ink-soft);
  font-weight: 500;
  max-width: 28ch;
  margin-inline: auto;
}

/* ============================================================
   24. PILL COLLECTOR ("אנחנו כאן כדי לגדול יחד איתך")
   ============================================================ */

.mk-pill-collector {
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-md);
  padding: clamp(var(--mk-s-5), 3.5vw, var(--mk-s-7));
  box-shadow: var(--mk-sh-1);
}
.mk-pill-collector__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--mk-s-3);
  margin-block-end: var(--mk-s-5);
}
.mk-pill-collector__prompt {
  font-size: var(--mk-t-h4);
  font-weight: 700;
  color: var(--mk-c-bg-deep);
  margin: 0;
}
.mk-pill-collector__meta { display: inline-flex; align-items: center; gap: var(--mk-s-3); }
.mk-pill-collector__count {
  display: none;             /* hidden until first selection */
  font-size: var(--mk-t-sm);
  font-weight: 700;
  color: var(--mk-c-bg-deep);
  background: var(--mk-c-accent-soft);
  padding: var(--mk-s-1) var(--mk-s-3);
  border-radius: var(--mk-r-pill);
}
.mk-pill-collector[data-has-selection="true"] .mk-pill-collector__count { display: inline-block; }
.mk-pill-collector__clear {
  display: none;
  font-size: var(--mk-t-sm);
  color: var(--mk-c-mute);
  text-decoration: underline;
  cursor: pointer;
  background: none; border: 0; padding: 0;
}
.mk-pill-collector[data-has-selection="true"] .mk-pill-collector__clear { display: inline-block; }
.mk-pill-collector__clear:hover { color: var(--mk-c-bg-deep); }

.mk-pill-collector__list {
  display: flex; flex-wrap: wrap;
  gap: var(--mk-s-2);
  list-style: none; margin: 0; padding: 0;
}

.mk-pill {
  appearance: none;
  display: inline-flex; align-items: center; gap: var(--mk-s-2);
  background: var(--mk-c-bg-alt);
  color: var(--mk-c-ink);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-pill);
  padding: var(--mk-s-2) var(--mk-s-4);
  font-family: var(--mk-f-body);
  font-size: var(--mk-t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--mk-dur-1) var(--mk-ease), border-color var(--mk-dur-1) var(--mk-ease), color var(--mk-dur-1) var(--mk-ease), transform var(--mk-dur-1) var(--mk-ease);
}
.mk-pill:hover { border-color: var(--mk-c-bg-deep); background: var(--mk-c-bg); }
.mk-pill__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-line);
  color: var(--mk-c-bg);
  font-size: 11px; font-weight: 700; line-height: 1;
  transition: background var(--mk-dur-1) var(--mk-ease);
}
.mk-pill[aria-pressed="true"] {
  background: var(--mk-c-accent);
  color: var(--mk-c-bg-deep);
  border-color: var(--mk-c-accent);
}
.mk-pill[aria-pressed="true"] .mk-pill__mark { background: var(--mk-c-bg-deep); color: var(--mk-c-accent); }

.mk-pill-collector__footer {
  margin-block-start: var(--mk-s-6);
  padding-block-start: var(--mk-s-5);
  border-block-start: 1px solid var(--mk-c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-s-5);
  flex-wrap: wrap;
}
.mk-pill-collector__hint {
  flex: 1 1 18rem;
  /* min-width:0 lets the flex item shrink below 18rem on narrow screens
     without pushing the parent past the viewport (causing horizontal scroll
     at <320px). The flex-basis preserves the desktop sizing intent. */
  min-width: 0;
  margin: 0;
  color: var(--mk-c-ink-soft);
  font-size: var(--mk-t-sm);
  line-height: 1.55;
}

/* Module DETAIL hero illustration - used by /modules/expense_management */
.mk-module-illus {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-sh-2);
  background: var(--mk-c-bg);
}

/* ============================================================
   25. PIVOT MIRROR - Problem → Solution bridge (illustrative)
   ============================================================ */
.mk-pivot-mirror {
  background: linear-gradient(180deg, var(--mk-c-bg-alt) 0%, var(--mk-c-bg) 100%);
  padding-block: var(--mk-s-4);
}
/* The bridge sits between two padded .mk-section blocks, so its surrounding
   sections each contribute another 4-8rem on top of the bridge's own padding.
   Collapse those adjacent paddings so the SVG doesn't float in whitespace. */
.mk-section:has(+ .mk-pivot-mirror) { padding-block-end: var(--mk-s-5); }
.mk-pivot-mirror + .mk-section      { padding-block-start: var(--mk-s-5); }
.mk-pivot-mirror__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-s-8);
  max-width: 560px;
  margin-inline: auto;
  transform: rotate(-12deg);          /* RTL: before on right → tilts up; after on left → tilts down */
  transform-origin: center;
  padding-block: var(--mk-s-6);        /* breathing room for the rotated bounding box */
}
.mk-pivot-mirror__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mk-s-2);
  flex: 0 0 auto;
  transform: rotate(12deg);            /* counter-rotate so SVG + caption stay upright */
}
.mk-pivot-mirror__cell svg { width: 96px; height: 96px; }
.mk-pivot-mirror__caption {
  font-family: var(--mk-f-body);
  font-size: var(--mk-t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mk-pivot-mirror__cell--before .mk-pivot-mirror__caption { color: var(--mk-c-chart-down); }
.mk-pivot-mirror__cell--after  .mk-pivot-mirror__caption { color: var(--mk-c-accent-2); }
.mk-pivot-mirror__connector {
  flex: 1 0 60px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mk-pivot-mirror__connector::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(to right, var(--mk-c-chart-down), var(--mk-c-accent));
}
.mk-pivot-mirror__connector::after {
  content: "←";
  position: relative; z-index: 1;
  font-size: 1.25rem;
  color: var(--mk-c-bg-deep);
  background: var(--mk-c-bg);
  padding: 0 var(--mk-s-2);
  font-weight: 700;
}

/* Transformation strip - bridges a cream Problem section to a white Solution section.
   Section has a split bg (cream top half / white bottom half); card sits on the seam. */
.mk-bridge {
  background: linear-gradient(
    to bottom,
    var(--mk-c-bg-alt) 0%,
    var(--mk-c-bg-alt) 50%,
    var(--mk-c-bg) 50%,
    var(--mk-c-bg) 100%
  );
  padding-block: clamp(var(--mk-s-6), 4.5vw, var(--mk-s-8));
}
.mk-transform-strip {
  max-width: 1080px;
  margin-inline: auto;
  background: var(--mk-c-bg);
  border-radius: var(--mk-r-lg);
  box-shadow: var(--mk-sh-3);
  padding: clamp(var(--mk-s-5), 3.5vw, var(--mk-s-7));
}
.mk-transform-strip__title {
  font-size: var(--mk-t-h4);
  font-weight: 800;
  color: var(--mk-c-bg-deep);
  text-align: center;
  margin-block-end: var(--mk-s-7);
  letter-spacing: -0.015em;
}

/* Card grid - autofits 1/2/3 columns based on viewport */
.mk-transform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(var(--mk-s-4), 2.5vw, var(--mk-s-6));
  margin: 0;
  padding: 0;
}

/* A single comparison card: topic → struck "before" → arrow → "after".
   The downward arrow carries the transition, so the card no longer needs a
   "במקום" label, and the before/after contrast is the card's main mechanic. */
.mk-transform-card {
  position: relative;
  display: grid;
  gap: var(--mk-s-4);
  padding: clamp(var(--mk-s-5), 3vw, var(--mk-s-6));
  background: linear-gradient(180deg, var(--mk-c-bg) 0%, var(--mk-c-bg-alt) 100%);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-sh-1);

  /* Initial state for entrance animation - hidden + slightly lower */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--mk-dur-3) var(--mk-ease) var(--mk-stagger, 0ms),
    transform var(--mk-dur-3) var(--mk-ease) var(--mk-stagger, 0ms),
    box-shadow var(--mk-dur-2) var(--mk-ease);
}
.mk-transform-grid.is-revealed .mk-transform-card {
  opacity: 1;
  transform: translateY(0);
}
.mk-transform-card:hover { box-shadow: var(--mk-sh-2); }

/* Head row: small icon sitting on the same line as the topic, so the icon reads
   as a label for the topic instead of floating alone above the copy. */
.mk-transform-card__head {
  display: flex;
  align-items: center;
  gap: var(--mk-s-3);
  margin: 0;
}
.mk-transform-card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--mk-r-pill);
  background: var(--mk-c-accent-soft);
  color: var(--mk-c-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-transform-card__icon svg { width: 18px; height: 18px; display: block; }

/* Concept label (the "topic" being compared) */
.mk-transform-card__concept {
  font-size: var(--mk-t-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mk-c-accent-2);
  margin: 0;
}

/* before → arrow → after, as three stacked rows */
.mk-transform-card__compare {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: var(--mk-s-3);
  margin: 0;
}

/* "Without Payper" - struck through, deliberately quiet */
.mk-transform-card__before {
  font-size: var(--mk-t-sm);
  line-height: 1.45;
  color: var(--mk-c-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(226, 107, 63, 0.5);
  text-decoration-thickness: 2px;
  /* Reserve two lines. Without this a one-line "before" in one card and a
     two-line one in the next push their arrows and values out of alignment. */
  min-height: 2.9em;
}

/* The transition itself: arrow + a rule that draws in on reveal (RTL: the rule
   starts at the arrow on the right and extends left). */
.mk-transform-card__arrow {
  display: flex;
  align-items: center;
  gap: var(--mk-s-2);
  color: var(--mk-c-accent);
}
.mk-transform-card__arrow svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.mk-transform-card__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, var(--mk-c-accent), transparent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--mk-dur-3) var(--mk-ease) calc(var(--mk-stagger, 0ms) + 220ms);
}
.mk-transform-grid.is-revealed .mk-transform-card__rule { transform: scaleX(1); }

/* Headline "with Payper" value - the eye-catcher */
.mk-transform-card__after {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mk-c-bg-deep);
}

/* Honour reduced-motion: no transitions, immediately final state. */
@media (prefers-reduced-motion: reduce) {
  .mk-transform-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mk-transform-card__rule { transform: scaleX(1); transition: none; }
}

/* Module DETAIL body - 2-column (text on right / illustration on left in RTL) */
.mk-module-detail {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--mk-s-6), 5vw, var(--mk-s-8));
  align-items: start;
}
.mk-module-detail__copy { display: grid; gap: var(--mk-s-5); }
.mk-module-detail__copy .mk-lede { max-width: none; }
.mk-module-detail__visual {
  position: sticky;
  top: calc(var(--mk-header-h) + var(--mk-s-5));
}
@media (max-width: 880px) {
  .mk-module-detail { grid-template-columns: 1fr; }
  .mk-module-detail__visual { position: static; }
}

/* ============================================================
   26. MODULES MOSAIC — tilted constellation grid (homepage)
   ============================================================
   8 cards in a 4×2 grid. Bottom row shifted down (staircase). Each card has
   an alternating slight tilt. Behind the grid, an SVG net of dashed lines
   weaves between the cards with a slow flowing animation. Cards fade and
   rotate into their tilted resting state on scroll, and straighten + lift
   on hover. Mobile collapses to a single column with no tilts; reduced-
   motion users get static, level cards. */

.mk-modules-mosaic {
  position: relative;
  margin-block-start: var(--mk-s-5);
  padding-block: var(--mk-s-4) var(--mk-s-5);
  /* Don't clip the tilted/lifted cards to the section edges. */
  overflow: visible;
}

.mk-modules-mosaic__net {
  position: absolute;
  inset: var(--mk-s-5) 0;
  width: 100%;
  height: calc(100% - var(--mk-s-5) * 2);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.mk-modules-mosaic__net path {
  fill: none;
  stroke: var(--mk-c-accent-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: mk-net-flow 22s linear infinite;
}
.mk-modules-mosaic__net path.mk-modules-mosaic__net--still {
  animation: none;
  opacity: 0.55;
  stroke: var(--mk-c-mute);
  stroke-dasharray: 1 5;
}
@keyframes mk-net-flow {
  to { stroke-dashoffset: -360; }
}

.mk-modules-mosaic__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mk-s-4);
  align-items: stretch;
}

/* Bottom row sits a notch lower than the top row → staircase silhouette. */
.mk-modules-mosaic__grid > .mk-mod-mini:nth-child(n+5) {
  margin-block-start: var(--mk-s-6);
}

.mk-mod-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mk-s-3);
  padding: var(--mk-s-5) var(--mk-s-4);
  background: var(--mk-c-bg);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-sh-1);
  text-decoration: none;
  color: var(--mk-c-ink);
  /* Initial state for entrance animation. */
  opacity: 0;
  transform: translateY(24px) rotate(0deg);
  transition:
    opacity 600ms var(--mk-ease) var(--mk-card-delay, 0ms),
    transform 600ms var(--mk-ease) var(--mk-card-delay, 0ms),
    box-shadow var(--mk-dur-2) var(--mk-ease),
    border-color var(--mk-dur-2) var(--mk-ease);
}

/* Final tilted state, applied once the section scrolls into view. */
.mk-modules-mosaic.is-in-view .mk-mod-mini { opacity: 1; }
.mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(odd)  { transform: translateY(0) rotate(-3.5deg); }
.mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(even) { transform: translateY(0) rotate( 3.5deg); }

/* Hover: lift, straighten, brighten the border. Override the rotate from the
   :nth-child rules above by repeating the selectors at the same specificity. */
.mk-modules-mosaic.is-in-view .mk-mod-mini:hover,
.mk-modules-mosaic.is-in-view .mk-mod-mini:focus-visible {
  transform: translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow: var(--mk-sh-2);
  border-color: var(--mk-c-accent);
  z-index: 2;
}

.mk-mod-mini__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mk-r-sm);
  background: linear-gradient(135deg, var(--mk-c-bg-deep) 0%, var(--mk-c-accent-2) 100%);
  color: var(--mk-c-on-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mk-mod-mini__icon svg { width: 22px; height: 22px; }

.mk-mod-mini__title {
  font-size: var(--mk-t-h4);
  font-weight: 700;
  color: var(--mk-c-ink);
  margin: 0;
  line-height: 1.25;
}
.mk-mod-mini__body {
  font-size: var(--mk-t-sm);
  line-height: 1.5;
  color: var(--mk-c-ink-soft);
  margin: 0;
  flex-grow: 1;
}
.mk-mod-mini__cta {
  margin-top: auto;
  font-size: var(--mk-t-xs);
  font-weight: 700;
  color: var(--mk-c-accent-2);
  letter-spacing: 0.04em;
}
.mk-mod-mini__cta::after {
  content: " ←";
  display: inline-block;
  transition: transform var(--mk-dur-1) var(--mk-ease);
}
.mk-mod-mini:hover .mk-mod-mini__cta::after,
.mk-mod-mini:focus-visible .mk-mod-mini__cta::after {
  transform: translateX(-3px);
}

/* Tablet: 2 columns, no row offset. Hide the SVG net since the geometry
   no longer aligns with the original 4-column path. */
@media (max-width: 1024px) {
  .mk-modules-mosaic__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--mk-s-5); }
  .mk-modules-mosaic__grid > .mk-mod-mini:nth-child(n+5) { margin-block-start: 0; }
  .mk-modules-mosaic__net { display: none; }
}

/* Mobile: single column, level cards. Keep a small lift on hover for tactile
   feedback but kill the tilt and the staircase. */
@media (max-width: 600px) {
  .mk-modules-mosaic__grid { grid-template-columns: 1fr; }
  .mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(odd),
  .mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(even) {
    transform: translateY(0) rotate(0deg);
  }
  .mk-modules-mosaic.is-in-view .mk-mod-mini:hover,
  .mk-modules-mosaic.is-in-view .mk-mod-mini:focus-visible {
    transform: translateY(-2px) rotate(0deg);
  }
}

/* Reduced motion: no tilt, no flow, no entrance translation. The cards just
   appear in their final, level resting state. */
@media (prefers-reduced-motion: reduce) {
  .mk-mod-mini {
    opacity: 1;
    transform: none;
    transition: box-shadow var(--mk-dur-2) var(--mk-ease), border-color var(--mk-dur-2) var(--mk-ease);
  }
  .mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(odd),
  .mk-modules-mosaic.is-in-view .mk-mod-mini:nth-child(even) {
    transform: none;
  }
  .mk-modules-mosaic.is-in-view .mk-mod-mini:hover,
  .mk-modules-mosaic.is-in-view .mk-mod-mini:focus-visible {
    transform: translateY(-2px);
  }
  .mk-modules-mosaic__net path { animation: none; }
}

/* ============================================================
   27. CONTACT PAGE (/marketing/contact_us)
   Two-column: lead form (primary) + contact channels.
   ============================================================ */

.mk-contact {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--mk-s-7);
  align-items: start;
}
/* Form column reuses .mk-form--card (section 16); just let it fill the track. */
.mk-contact__form { min-width: 0; }

.mk-channels { display: flex; flex-direction: column; gap: var(--mk-s-4); }
.mk-channels__head {
  font-size: var(--mk-t-h4);
  font-weight: 800;
  color: var(--mk-c-bg-deep);
  margin: 0 0 var(--mk-s-2);
}

.mk-chan {
  display: flex;
  align-items: center;
  gap: var(--mk-s-4);
  padding: var(--mk-s-4) var(--mk-s-5);
  background: var(--mk-c-bg-alt);
  border: 1px solid var(--mk-c-line);
  border-radius: var(--mk-r-md);
  color: inherit;
  text-decoration: none;
  transition: transform var(--mk-dur-1) var(--mk-ease),
              box-shadow var(--mk-dur-1) var(--mk-ease),
              border-color var(--mk-dur-1) var(--mk-ease);
}
a.mk-chan:hover {
  transform: translateX(-4px);
  box-shadow: var(--mk-sh-1);
  border-color: var(--mk-c-accent-soft);
}
.mk-chan__ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--mk-r-pill);
  display: grid;
  place-items: center;
  background: var(--mk-c-accent-soft);
  color: var(--mk-c-bg-deep);
}
.mk-chan__ic svg { width: 22px; height: 22px; }
.mk-chan__body { display: flex; flex-direction: column; }
.mk-chan__label { font-size: var(--mk-t-xs); color: var(--mk-c-mute); font-weight: 500; }
.mk-chan__val { font-size: var(--mk-t-lede); font-weight: 700; color: var(--mk-c-ink); }
.mk-chan__val--ltr { direction: ltr; unicode-bidi: plaintext; }

.mk-contact-promise {
  display: flex;
  align-items: center;
  gap: var(--mk-s-4);
  margin-top: var(--mk-s-2);
  padding: var(--mk-s-4) var(--mk-s-5);
  border-radius: var(--mk-r-md);
  background: linear-gradient(120deg, var(--mk-c-bg-deep), var(--mk-c-bg-deep-2));
  color: var(--mk-c-on-deep);
}
.mk-contact-promise svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--mk-c-accent); }
.mk-contact-promise__body { display: flex; flex-direction: column; }
.mk-contact-promise__body b { font-size: var(--mk-t-base); }
.mk-contact-promise__body span { font-size: var(--mk-t-sm); color: rgba(255, 255, 255, 0.72); }

@media (max-width: 980px) {
  .mk-contact { grid-template-columns: 1fr; gap: var(--mk-s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-chan { transition: none; }
  a.mk-chan:hover { transform: none; }
}

/* ============================================================
   28. CONNECTED ENVIRONMENT (homepage — Payper hub + systems)
   Deep radial "stage"; nodes are positioned absolutely, and the
   connector paths + paper planes are injected by the section's
   inline script (app/views/marketing/_connected_environment.html.erb).
   ============================================================ */
.mk-eco {
  position: relative;
  overflow: hidden;
  color: var(--mk-c-on-deep);
  padding-block: clamp(var(--mk-s-8), 9vw, var(--mk-s-10));
  /* Grid over a deep radial glow → darker than the feature-grid deep above,
     so the two deep blocks read as a deliberate "deepening", not a repeat. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(120% 85% at 50% 4%, #0a5a9e 0%, rgba(10, 90, 158, 0) 58%),
    linear-gradient(180deg, var(--mk-c-bg-deep-2) 0%, #04294d 100%);
}
.mk-eco .mk-container { position: relative; z-index: 2; }

.mk-eco__motif { position: absolute; color: #fff; opacity: 0.045; z-index: 0; pointer-events: none; }
.mk-eco__motif--1 { top: 7%;   inset-inline-end: 4%;   width: 150px; }
.mk-eco__motif--2 { bottom: 6%; inset-inline-start: 5%; width: 168px; }
.mk-eco__motif--3 { top: 44%;  inset-inline-start: 2%; width: 108px; }

.mk-eco__intro { text-align: center; max-width: 680px; margin-inline: auto; margin-block-end: clamp(var(--mk-s-6), 5vw, var(--mk-s-8)); }
.mk-eco__eyebrow { font-size: var(--mk-t-sm); font-weight: 700; letter-spacing: 0.16em; color: var(--mk-c-accent); margin: 0 0 var(--mk-s-3); }
.mk-eco__title { font-size: clamp(1.9rem, 4.4vw, var(--mk-t-h2)); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.mk-eco__title em { font-style: normal; color: var(--mk-c-accent); }
.mk-eco__sub { margin: var(--mk-s-4) auto 0; font-size: var(--mk-t-lede); line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 54ch; text-wrap: balance; }

.mk-eco__stage { position: relative; height: clamp(600px, 74vw, 720px); max-width: 960px; margin-inline: auto; }
.mk-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.mk-eco__conn { stroke: rgba(0, 212, 200, 0.30); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.mk-eco__plane { fill: #fff; }

.mk-eco__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: clamp(140px, 19vw, 180px); height: clamp(140px, 19vw, 180px);
  border-radius: var(--mk-r-lg); background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 72px rgba(0, 212, 200, 0.4);
}
.mk-eco__hub svg { width: clamp(86px, 12vw, 112px); height: auto; color: var(--mk-c-bg-deep); }
.mk-eco__hub::before { content: ""; position: absolute; inset: -15px; border-radius: 30px; border: 1.5px dashed rgba(0, 212, 200, 0.5); animation: mk-eco-spin 46s linear infinite; }
.mk-eco__hub::after { content: ""; position: absolute; inset: -42px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 212, 200, 0.20) 0%, rgba(0, 212, 200, 0) 70%); z-index: -1; }

.mk-eco__node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(184px, 23vw, 214px); background: var(--mk-c-bg); color: var(--mk-c-ink);
  border-radius: var(--mk-r-md); padding: 13px 13px 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.30);
  transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease);
}
.mk-eco__node:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42); }
.mk-eco__node-head { display: flex; align-items: center; gap: var(--mk-s-3); margin-block-end: 11px; }
.mk-eco__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--mk-r-pill); display: grid; place-items: center; background: var(--mk-c-accent-soft); color: var(--mk-c-bg-deep); }
.mk-eco__ic svg { width: 20px; height: 20px; }
.mk-eco__label { font-size: var(--mk-t-base); font-weight: 800; line-height: 1.15; }
.mk-eco__logos { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-eco__logos--stack .mk-eco__logo { flex-basis: 100%; }
.mk-eco__logo { flex: 1 1 auto; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--mk-c-bg); border: 1px solid var(--mk-c-line); border-radius: var(--mk-r-sm); padding: 4px 8px; }
.mk-eco__logo img { max-width: 100%; max-height: 20px; object-fit: contain; display: block; }
.mk-eco__logo--text { font-size: var(--mk-t-xs); font-weight: 700; color: var(--mk-c-bg-deep); white-space: nowrap; }

.mk-eco__node--1 { top: 11%; left: 50%; }
.mk-eco__node--2 { top: 40%; left: 84%; }
.mk-eco__node--3 { top: 85%; left: 71%; }
.mk-eco__node--4 { top: 85%; left: 29%; }
.mk-eco__node--5 { top: 40%; left: 16%; }

@keyframes mk-eco-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .mk-eco__stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: var(--mk-s-5); }
  .mk-eco__lines { display: none; }
  .mk-eco__hub { position: static; transform: none; }
  .mk-eco__hub::before { animation: none; }
  .mk-eco__node { position: static !important; transform: none; width: 100%; max-width: 340px; }
  .mk-eco__node:hover { transform: none; }
  .mk-eco__nodes { display: grid; grid-template-columns: 1fr; gap: var(--mk-s-4); width: 100%; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-eco__hub::before { animation: none; }
  .mk-eco__node { transition: none; }
}