/* ======================================================================
   MARKETPLACE - PAGE-SPECIFIC STYLES
   Uses global tokens, typography, buttons, nav, footer.
   Only defines layout + components unique to marketplace.
   ====================================================================== */

.mk-section-bg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mk-section-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20,20,20,0.45), rgba(20,20,20,0.45)),
    var(--mk-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.mk-section-bg > .mk-container{
  position: relative;
  z-index: 1;
}

.mk-listing-card__btn.is-disabled, .btn.mk-apu-action.is-disabled{
  opacity: .5;
  background: #686868;
  cursor: not-allowed;
  pointer-events: none;
}

.mk-stand-rentals__media{
  position: relative;
}

    .is-title a{
      font-weight:750;
      line-height:1.35;
      color:var(--clr-text);
      text-decoration:none;
      overflow-wrap:anywhere;
    }

/* ----------------------------------------------------------------------
   FILE MAP
   01. Breadcrumbs / page overrides
   02. Layout containers / hero / search
   03. Hero stats / hero signup
   04. Shared light and dark content blocks
   05. Listings cards / controls / carousel
   06. Partners / team / contact / services
   07. Offer Up / insights / media / video helpers
   08. APU listing view / notes / modals / dashboard forms
   ---------------------------------------------------------------------- */


.mk-divider{
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 60px 0;
}


.form-error-summary{

margin-bottom: 16px; 
padding: 12px 14px; 
border: 1px solid var(--clr-danger);
border-radius: 10px; 
background: rgb(from var(--clr-danger) r g b / 0.4);

}

.field-msg--success{

margin-bottom: 16px; 
padding: 12px 14px; 
border: 1px solid var(--clr-success);
border-radius: 10px; 
background: var(--clr-success);

}

/* ----------------------------------------------------------------------
   0. BREADCRUMBS
   ---------------------------------------------------------------------- */

.mk-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 30px;
}

.mk-page-toolbar__left{
  display:flex;
  align-items:center;
  min-width:0;
}

.mk-page-toolbar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
  margin-left:auto;
  text-align:right;
}

.mk-page-toolbar__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.mk-breadcrumb{
  color:var(--clr-text-muted);
  font-size:14px;
  line-height:1.4;
}

.mk-breadcrumb__item{
  display:inline-flex;
  align-items:center;
}

.mk-breadcrumb__link{
  color:inherit;
  text-decoration:none;
}

.mk-breadcrumb__link:hover{
  text-decoration:underline;
}

.mk-breadcrumb__sep{
  opacity:0.6;
}

.mk-breadcrumb__current{
  color:var(--clr-text);
  font-weight:700;
}


/* ----------------------------------------------------------------------
   0. PAGE OVERRIDES
   ---------------------------------------------------------------------- */

:root{
  --viewport-border: none;
}

.marketplace_body{
  padding-top: 60px; /* fixed subnav offset */
}

.subnav-link.is-active{
  background-color: rgba(0,0,0,0.22);
}


/* ----------------------------------------------------------------------
   1. CONTAINERS + UTILITIES
   ---------------------------------------------------------------------- */

/* IMPORTANT:
   Keep mk-container neutral. Do not make it flex or centre content.
   Every section below relies on its own grid/flex rules. */
.mk-container{
  width: 100%;
  max-width: 80%;                 /* adjust if you want wider overall */
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  padding: 30px 0;
}

.mk-accent{ color: var(--clr-primary); }

/* ----------------------------------------------------------------------
   2. HERO (2-column grid)
   Left: heading + search
   Right: visual placeholder (empty for now)
   ---------------------------------------------------------------------- */


  .mk-auth-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
  }

  .mk-auth-btn__label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mk-auth-btn__spinner{
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: none;
    flex: 0 0 16px;
    animation: mkHeroAuthBtnSpin 0.7s linear infinite;
  }

  .mk-auth-btn.is-loading{
    pointer-events: none;
    opacity: 0.9;
  }

  .mk-auth-btn.is-loading .mk-auth-btn__spinner{
    display: inline-block;
  }

  .mk-auth-btn:disabled,
  .mk-hero-signup .mk-pass-toggle:disabled{
    pointer-events: none;
    opacity: 0.65;
    cursor: not-allowed;
  }

  .mk-hero-signup__hp{
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  @keyframes mkHeroAuthBtnSpin{
    to{
      transform: rotate(360deg);
    }
  }

.mk-hero{
  position: relative;
  height: 85vh;
  overflow: visible;
  display: flex;
  align-items: center;
  padding-bottom: clamp(40px, 8vh, 120px);
}


.mk-hero__bg--video{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  filter: brightness(0.55) contrast(1.05);
}

.mk-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
}


.mk-hero__bg--video::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: rgba(30,30,30,0.85);
}


@media (prefers-reduced-motion: reduce){
  .mk-hero__video{ display:none; }
.mk-hero__bg--video{
  background-image:url("../images/hero-bg-dt.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

}



.mk-hero__bg--video{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mk-hero__video-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.mk-hero__video-frame{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.mk-hero__video-control{
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

@media (max-width: 767px){
  .mk-hero__video-control{
    display: none;
  }
}


.mk-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "copy-top visual"
    "copy-bottom visual";
  gap: 40px;
  align-items: start;
  width: 100%;
  margin-top: 80px;
}

.mk-hero__copy{
  min-width: 0;
  display: grid;
  justify-items: start;
  text-align: left;
}

.mk-hero__copy--top{
  grid-area: copy-top;
  gap: var(--sp-5);
  align-self: center;
}

.mk-hero__copy--bottom{
  grid-area: copy-bottom;
  gap: 18px;
  align-self: start;
}

.mk-hero__subcopy{
  margin: 0 0 var(--sp-4) 0;
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  color: var(--clr-text);
}

.mk-hero__visual{
  grid-area: visual;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}


/* ----------------------------------------------------------------------
   3. SEARCH BAND
   Wider/longer search field
   ---------------------------------------------------------------------- */

.mk-search-band-wrap{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}

.mk-search-band{
  position: relative;
  z-index: 20;
  width: 100%;
  background: #222222;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.22);
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
  pointer-events: auto;
}

.mk-search-band-wrap.is-minimised .mk-search-band{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 12px));
  height: 0;
  overflow: hidden;
  border-top: 0;
  box-shadow: none;
}

/* Make this block span the full page width */
.mk-search-band .mk-container{
  max-width: none !important;
  width: 100%;
  padding: 15px 24px;
}

/* Thinner overall layout, with the search taking the space */
.mk-search-band__inner{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 0;
  width: 100%;
}

.mk-search-band__copy{
  min-width: 0;
}

.mk-search-band__kicker{
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.mk-search-band__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  color: #ffffff;
}

.mk-search--band{
  width: 100%;
  min-width: 0;
}

.mk-search--band .mk-search__field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.mk-search--band .mk-search__field input{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  background: rgba(255,255,255,0.06);
  font-size: 14px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.mk-search--band .mk-search__field input::placeholder{
  color: rgba(255,255,255,0.48);
}

.mk-search--band .mk-search__field input:focus{
  outline: none;
  border-color: var(--clr-primary);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

/* Leave button styling intact */
.mk-search__submit{
  flex: 0 0 auto;
  min-width: 50px;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--clr-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.mk-search__submit:hover,
.mk-search__submit:focus-visible{
  transform: translateY(-1px);
}

.mk-search__submit .material-icons-outlined{
  font-size: 22px;
}

.mk-search-band__close{
  flex: 0 0 auto;
  min-width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  padding: 14px;
}

.mk-search-band__close:hover,
.mk-search-band__close:focus-visible{
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.mk-search-band__close .material-icons-outlined{
  font-size: 20px;
}

.mk-search-band__fab{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 160;
  min-width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--clr-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(0,0,0,0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.88);
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
  padding: 15px;
}

.mk-search-band-wrap.is-minimised .mk-search-band__fab{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.mk-search-band__fab .material-icons-outlined{
  font-size: 28px;
}

body.mk-has-bottom-search{
  padding-bottom: 92px;
}


/* ----------------------------------------------------------------------
   HERO: MICRO STATS (4 small boxes above search)
   ---------------------------------------------------------------------- */

.mk-hero-microstats{
  width:90%;
  max-width:860px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin: 6px 0 14px 0;
}

.mk-hero-microstat{
  border-radius:14px;
  padding:20px;
  background:rgba(30,30,30,0.8);
  border:1px solid rgba(255,255,255,0.12);

  display:flex;
  flex-direction:column;
  gap:4px;
  text-align: center;
  justify-content: center;
}

.mk-hero-microstat__icon{
  font-size:36px;
  color:var(--clr-primary);
  opacity:0.95;
    text-align: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mk-hero-microstat__value{
  font-family:var(--ff-heading);
  font-weight:800;
  font-size:20px;
  line-height:var(--lh-base);
  color:var(--clr-text);
}

.mk-hero-microstat__label{
  font-size: var(--fs-300);
  line-height:var(--lh-base);
  color:var(--clr-text-muted);
}

/* Responsive */


/* ----------------------------------------------------------------------
   HERO: RIGHT COLUMN - SIGN UP PANEL
   Uses global input styles (.mk-input)
   ---------------------------------------------------------------------- */


.mk-hero-signup__title{

margin-bottom: 10px;

}

.mk-hero-signup{
  width:min(30vw, 100%);
  border-radius:18px;
  padding:40px;

  background:rgba(20,20,22,0.8);
  background:color-mix(in srgb, var(--grey-900) 80%, transparent);
  backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 48px rgba(0,0,0,0.35);
}


/* Company + Business type on one row (stack on mobile) */
.mk-hero-signup__grid--company{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}


.mk-hero-signup__intro{
  font-size:var(--fs-300);
  line-height:1.45;
  color:var(--clr-text);
  margin-bottom:20px;
}

.mk-hero-signup__form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mk-hero-signup__row{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mk-hero-signup__label{
  font-size: var(--fs-300);
  color:rgba(255,255,255,0.74);
}

.mk-hero-signup__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Password field with icon button */
.mk-hero-signup__password{
  position:relative;
}

.mk-hero-signup__password .mk-input{
  padding-right:46px; /* room for icon */
}

.mk-hero-signup__toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: none;
  border: none;
}

.mk-hero-signup__toggle .material-icons-outlined{
  font-size:18px;
}

.mk-hero-signup__btn{
  width:100%;
  margin-top:4px;
}

.mk-hero-signup__meta{
  text-align:center;
  font-size: var(--fs-300);
  color:rgba(255,255,255,0.70);
}

.mk-hero-signup__link{
  color:var(--clr-primary);
  text-decoration:none;
}

.mk-hero-signup__link:hover{
  text-decoration:underline;
}

/* Responsive: stack under hero copy */


/* Mobile: stack first/last name */


/* ----------------------------------------------------------------------
   5. LIGHT CONTENT SECTIONS
   ---------------------------------------------------------------------- */

.mk-light{
  background: var(--clr-text);
  color:var(--clr-text-dark);
  padding: var(--sp-section) 0;
}

.mk-light h2,
.mk-light h3{ color:var(--clr-text-dark); }

.mk-kicker{
  font-size: var(--fs-200);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--clr-text-muted);
}

.mk-kicker-dark{
  font-size: var(--fs-200);
  letter-spacing: 0.22em;
  text-transform: uppercase;
color:var(--clr-text-dark);
  margin-bottom: 10px;
}


.mk-p{
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  margin-bottom: 20px;
}


.mk-p-light{
  font-size: var(--fs-300);
  color: var(--clr-text);
}

/* Split layout */
.mk-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: flex-start;
  margin-bottom: 120px;
}

.mk-split:last-child{ margin-bottom: 0; }

.mk-split--reverse .mk-media{ order: 2; }
.mk-split--reverse .mk-copy{ order: 1; }


/* Mini cards */
.mk-mini-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-4);
  margin: 18px 0 22px;
}

.mk-mini-cards--tight{
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.mk-mini-cards--two{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 520px;
}

.mk-mini{
  display: flex;
  align-items: center;
  gap: var(--sp-3);

  padding: 16px;
  background: var(--clr-text);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--card-shadow);
}

.mk-mini .material-icons-outlined{
  color: var(--clr-primary);
  font-size: 20px;
}

.mk-mini__title{
  font-size: var(--fs-400);
  font-weight: 700;
  color:var(--clr-text-dark);
  line-height: 20px;
  margin: 20px 0;
}

.mk-mini__sub{
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: var(--lh-base);
}

.mk-copy__actions{
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ----------------------------------------------------------------------
   6. AVAILABLE ASSETS (dark)
   ---------------------------------------------------------------------- */

.mk-assets{
  background: var(--clr-bg);
  padding: var(--sp-section) 0;
}

.mk-assets__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
margin-bottom: 20px;
}

.mk-assets__kicker{
  font-size: var(--fs-200);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 10px;
}


.mk-asset-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.mk-asset-card{
  background: var(--clr-surface);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);

  display: grid;
  grid-template-rows: 180px 1fr;
}


.mk-asset-card__body{
  padding: var(--sp-8);
  display:flex;
  flex-direction:column;
  height:100%;
}

.mk-asset-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mk-asset-card__name{
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
}

.mk-asset-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 999;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(252,0,186,0.22);
  color: var(--clr-text);
  font-size: var(--fs-200);
}

.mk-asset-pill--alt{ background: rgba(255,255,255,0.08); }
.mk-asset-pill--ok{ background: rgba(0,176,59,0.22); }

.mk-asset-pill--shop{
  background: rgba(255, 193, 7, 0.26);           /* yellow tint */
  border: 1px solid rgba(255, 193, 7, 0.55);
  color: var(--clr-text);
}


.mk-listing-card__img{
  position: relative;
}

.mk-listing-card__availability{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

.mk-listing-card__availability .material-icons-outlined{

font-size: var(--fs-300);
margin-right: 5px;

}

    /* Sale availability flags in bottom-left of listing image */
    .mk-listing-card__img{ position: relative; }

    .mk-listing-card__sale-flags{
      position: absolute;
      left: 12px;
      top: 12px;
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      z-index: 2;
    }

    .mk-listing-card__sale-flags .mk-flag{
      white-space: nowrap;
    }

.mk-asset-card__meta{
  color: rgba(255,255,255,0.70);
  font-size: var(--fs-300);
  display: grid;
  gap: 6px;
  margin: 12px 0 18px;
}

.mk-asset-card__btn{
  width: 100%;
  min-width: 0;
}


/* ----------------------------------------------------------------------
   7. SHARED SPLIT + STATS SECTION (light)
   ---------------------------------------------------------------------- */

.mk-split-stats{
  background: var(--clr-text);
  color: var(--clr-text-dark);
  padding: 70px 0;
}

.mk-split-stats h2{
  color: var(--clr-text-dark);
}

/* Main layout */
.mk-split-stats__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
}

/* Stats grid */
.mk-split-stats__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Copy column */
.mk-split-stats__copy .mk-copy__actions{
  margin-top: 18px;
}

.mk-stat{
  background: var(--clr-text);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 22px;
  text-align: center;
}

.mk-stat__icon{
  font-size: 34px;
  line-height: 1;
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-stat__value{
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-500);
  color: var(--clr-text-dark);
  line-height: 1.05;
}

.mk-stat__label{
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: var(--lh-base);
  max-width: 22ch;
}

/* --------------------------------------------------
   ABOUT
-------------------------------------------------- */

.mk-about .mk-copy__actions{
  margin-top: 18px;
}

/* What makes us different - dark */
#difference{
  background: var(--clr-bg);
  color: #fff;
}


#difference .mk-team-head > div{
  width: 100%;
}

#difference .mk-assets__kicker,
#difference .mk-assets__title,
#difference .mk-p,
#difference .mk-p-light{
  color: #fff;
}

#difference .mk-team-grid{
  align-items: stretch;
}

#difference .mk-team-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}

#difference .mk-team-card--feature .mk-team-card__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  height: 100%;
  padding: 28px 22px;
}

#difference .mk-team-card__feature-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
height: 60px;
  color: var(--clr-primary);
  font-size: 34px;
  line-height: 1;
}

#difference .mk-team-card__name,
#difference .mk-team-card__bio{
  color: #fff;
}

#difference .mk-team-card__name{
  margin: 0;
  text-align: center;
}

#difference .mk-team-card__bio{
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
}

.mk-team-head .btn{

margin-bottom: 20px;

}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */


/* ----------------------------------------------------------------------
   9. ARTICLES (dark) - 4-up grid with real images
   ---------------------------------------------------------------------- */

.mk-articles{
  background: var(--clr-bg);
  padding: var(--sp-section) 0;
  color: var(--clr-text);
}

.mk-articles h2,
.mk-articles h3{ color: var(--clr-text); }

/* Use dark kicker in this section only */
.mk-articles .mk-kicker-dark{
  color: var(--clr-text-muted);
}

.mk-articles__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: 26px;
}

/* 4 in a row on desktop */
.mk-articles__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
}

/* card */
.mk-article{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* image wrapper + image */
.mk-article__media{
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(700px 240px at 30% 30%, rgba(252,0,186,0.16), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.mk-article__img{
  width: 100%;
  height: 280px;
  display: block;
  object-fit: cover;
}

/* body */
.mk-article__body{
  padding: 18px;
  display: grid;
  gap: 10px;
}

/* title + meta */
.mk-article__title{
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  line-height: 1.2;
  color: var(--clr-text);
}

.mk-article__meta{
  margin: 0;
  color: rgba(255,255,255,0.70);
  font-size: var(--fs-300);
}

/* link */
.mk-article__link{
  color: var(--clr-primary);
  font-weight: 800;
  font-size: var(--fs-300);
  text-decoration: none;
  margin-top: 2px;
}

.mk-article__link:hover{
  text-decoration: underline;
}

/* responsive */


/* ----------------------------------------------------------------------
   10. SIGN-IN CTA (light grey band)
   ---------------------------------------------------------------------- */

.mk-signin-cta{
  background: var(--clr-on-primary);
  padding: var(--sp-section) 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.mk-signin-cta__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.mk-signin-cta__title{
  color: var(--clr-text-dark);

}

.mk-signin-cta__text{
  color: var(--clr-text-dark);

}

.mk-signin-cta__actions{
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------
   11. RESPONSIVE
   ---------------------------------------------------------------------- */


/* ======================================================================
   12. LISTINGS PAGE
   ====================================================================== */

/* --- Header + grid --------------------------------------------------- */

.mk-listings-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.mk-listings-head > div{
  width: 100%;
}

.mk-listing-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* --- Card ------------------------------------------------------------ */

.mk-listing-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mk-listing-card__img{
  height: 300px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--clr-bg);
}

.mk-listing-card__body{
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  flex: 1;
}

.mk-listing-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.mk-listing-card__model{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  line-height: 1.1;
}

/* --- Meta list ------------------------------------------------------- */

.mk-listing-meta{
  display: grid;
  gap: 10px;
  font-size: var(--fs-300);
}

.mk-listing-meta__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}

.mk-listing-meta__row:last-child{
  border-bottom: 0;
  padding-bottom: 10px;
}

.mk-listing-meta__k{
  color: var(--clr-text);
}

.mk-listing-meta__v{
  font-weight: 600;
}

/* --- Actions (2-row layout) ----------------------------------------- */

.mk-listing-card__actions{
  display: grid;
  gap: 10px;
  margin-top: var(--sp-2);
}

.mk-listing-card__actions-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.mk-listing-card__btn{
  min-width: 0;
}

.mk-listing-card__minipack{
  width: fit-content;
}

/* Optional: make minipack align left on row 2 */
.mk-listing-card__actions .mk-listing-card__minipack{
    justify-self: end;
}


/* ======================================================================
   BUDGET
   ====================================================================== */

.mk-budget{
  display:grid;
  gap:10px;
}

.mk-budget__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.mk-budget__value{
  white-space:nowrap;
  opacity:0.9;
}

.mk-budget input[type="range"]{
  width:100%;
}

#mkBudgetRange{
  outline:none !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0;
  margin:0;
  box-sizing:border-box;
}

#mkBudgetRange:focus,
#mkBudgetRange:focus-visible,
#mkBudgetRange:active{
  outline:none !important;
  box-shadow:none !important;
}

#mkBudgetRange::-webkit-slider-thumb:focus,
#mkBudgetRange::-webkit-slider-thumb:active{
  outline:none !important;
  box-shadow:none !important;
}

#mkBudgetRange::-moz-range-thumb:focus,
#mkBudgetRange::-moz-range-thumb:active{
  outline:none !important;
  box-shadow:none !important;
}


/* ======================================================================
   LISTING BRAND BAR
   ====================================================================== */

.mk-listing-card__brand{
  padding:12px 16px;
  border-top:1px solid var(--clr-border);
  background:var(--clr-surface-alt);
  display:flex;
  align-items:center;
  gap:12px;
  min-height:80px;
}

.mk-listing-card__brand-logo{
  width:150px;
  height:60px;
  border-radius:10px;
  background:#222222;
  border:1px solid var(--clr-border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 150px;
  padding:4px;
  box-sizing:border-box;
  overflow:hidden;
}

.mk-listing-card__brand-logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center center;
  display:block;
  margin:0 auto;
}

.mk-listing-card__brand-copy{
  min-width:0;
}

.mk-listing-card__brand-name{
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  color:inherit;
}

.mk-listing-card__brand-label{
  font-size:var(--fs-300);
  font-style:italic;
  color:var(--clr-text);
  white-space:nowrap;
}

.mk-listing-card__brand-text{
  color:var(--clr-text);
  font-size:var(--fs-300);
  line-height:1;
}

/* --- Utility --------------------------------------------------------- */

.mk-blur{
  filter: blur(6px);
  user-select: none;
}

/* --- Responsive ------------------------------------------------------ */


/* ======================================================================
   LISTINGS PAGE (DARK)
   ====================================================================== */

.mk-assets .mk-h2,
.mk-assets .mk-h1,
.mk-assets .mk-p{
  color: var(--clr-text);
}

.mk-assets .mk-p{
  color: var(--clr-text);
}

.mk-assets .mk-kicker{
  color: var(--clr-text-muted);
}

.mk-assets .mk-listings-head{
  margin-bottom: 26px;
}

.mk-assets .mk-listing-card{
  background: var(--clr-surface);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--card-shadow);
}

.mk-assets .mk-listing-card__model{
  color: var(--clr-text);
}

.mk-assets .mk-listing-meta{
  color: rgba(255,255,255,0.80);
}

.mk-assets .mk-listing-meta__row{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mk-assets .mk-listing-meta__k{
  color: var(--clr-text-muted);
}

.mk-assets .mk-listing-meta__v{
  color: var(--clr-text);
}

.mk-assets .mk-listing-card__brand{
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mk-assets .mk-listing-card__brand img{
  opacity: 0.95;
  filter: brightness(1.05);
}

.mk-assets .mk-listing-card__actions .pill-link{
  color: rgba(255,255,255,0.85);
}

.mk-assets .mk-listing-card__actions .pill-link:hover{
  color: var(--clr-text);
}

/* ======================================================================
   LISTINGS CONTROLS (SEARCH + FILTERS + TOP APUS)
   ====================================================================== */

.mk-listings-controls{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:20px;
  margin-bottom:10px;
  width:100%;
}

/* Row 1: horizontal layout */
.mk-listings-row{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:100%;
}

/* Left takes remaining space */
.mk-listings-left{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
}

/* Search + top APUs inline */
.mk-listings-left-inner{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
}

/* Right group pinned to the right */
.mk-listings-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-3);
  margin-left:auto;
}

/* --- Search ---------------------------------------------------------- */

.mk-listings-search{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
}

.mk-listings-search input{
  width:100%;
  margin-top:0;
  padding:12px 44px 12px 14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);
  color:var(--clr-text);
}

.mk-listings-search input::placeholder{
  color:rgba(255,255,255,0.55);
}

.mk-listings-search .material-icons-outlined{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,0.70);
  pointer-events:none;
}

/* ======================================================================
   TOP APUS
   ====================================================================== */

.mk-top-apus{
  flex:0 0 auto;
  min-width:0;
  max-width:none;
  white-space:nowrap;
}

.mk-top-apus__label{
  font-size:var(--fs-300);
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.70);
  white-space:nowrap;
}

.mk-top-apus__list{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  white-space:nowrap;
}

.mk-top-apu{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:var(--clr-text);
  text-decoration:none;
  font-size:var(--fs-300);
  white-space:nowrap;
  flex:0 0 auto;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.mk-top-apu:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.10);
  border-color:var(--clr-primary);
  text-decoration:none;
}

.mk-top-apu.is-active{
  border-color:rgba(255,255,255,0.30);
  background:rgba(255,255,255,0.14);
}

/* Responsive */


/* --- Responsive controls -------------------------------------------- */


/* ======================================================================
   13. OFFER UP PAGE
   ====================================================================== */

/* inline link in meta row */
.mk-content-link{
  margin-left: 10px;
  font-weight: 600;
  text-decoration: none;
  color: var(--clr-primary);
}
.mk-content-link:hover{
  text-decoration: underline;
}

/* modal (appended to <body>, so it will not be clipped by cards) */
.mk-content-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.mk-content-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(640px, calc(100vw - 28px));
  max-height: min(70vh, 560px);
  background: var(--clr-surface);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.mk-content-modal.is-open,
.mk-content-modal-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mk-content-modal.is-open{
  transform: translate(-50%, -50%);
}

.mk-content-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mk-content-modal__title{
  font-family: var(--ff-heading);
  font-size: var(--fs-300);
  color: var(--clr-text);
  line-height: 1.2;
}

.mk-content-modal__close{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-content-modal__body{
  padding: 12px 14px 14px;
  overflow: auto;
}

/* simple list */
.mk-content-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mk-content-item{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.mk-content-item__left{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mk-content-item__pn{
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.mk-content-item__desc{
  font-size: var(--fs-300);
  color: rgba(255,255,255,0.70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}

.mk-content-item__qty{
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}


/* ======================================================================
   14. LIST YOUR APU INCLUDE
   ====================================================================== */

.mk-cta-banner{
  position: relative;
  width: 100%;
  margin: 0; /* no bottom margin */
  overflow: hidden;
  background: transparent;
  border: none;
  isolation: isolate;
  height: 25vh;
  background-color: var(--clr-bg);
}

/* Background image layer */
.mk-cta-banner__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(0.95) contrast(1.05);
}

/* Dark overlay */
.mk-cta-banner__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 400px at 15% 30%, rgba(0,0,0,0.25), transparent 60%),
    radial-gradient(900px 380px at 70% 50%, rgba(0,0,0,0.35), transparent 60%),
    linear-gradient(
      90deg,
      var(--clr-text-dark),
      rgba(0,0,0,0.48) 55%,
      var(--clr-text-dark)
    );
}

/* Inner content container */
.mk-cta-banner__inner{
  position: relative;
  z-index: 1;

  max-width: 80%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: var(--sp-6);
  align-items: center;

  padding: 32px 36px;
  border-radius: var(--radius-lg);
}

/* Text styles */
.mk-cta-banner__kicker{
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text);
}

.mk-cta-banner__title{
  margin: 0 0 10px;

}

.mk-cta-banner__text{
  margin: 0;
  color: rgba(255,255,255,0.82);
  max-width: 720px;
  font-size: 18px;
}

/* Actions */
.mk-cta-banner__actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mk-cta-banner__actions .btn{
  white-space: nowrap;
}

.mk-cta-banner__actions .pill-link{
  white-space: nowrap;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}

.mk-cta-banner__actions .pill-link:hover{
  background: rgba(255,255,255,0.12);
}

/* Responsive */


/* ======================================================================
   15. PARTNERS PAGE
   ====================================================================== */


/* --------------------------------------------------
   Packages: 2-column (50% each)
-------------------------------------------------- */

.mk-asset-grid--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}


/* --------------------------------------------------
   Benefits: 3-column grid
-------------------------------------------------- */

.mk-asset-grid--three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}


/* --------------------------------------------------
   DARK package mini cards
   (kept as-is in case used elsewhere)
-------------------------------------------------- */

.mk-mini-cards--dark-vertical .mk-mini{
  background:var(--clr-bg);
  border:1px solid var(--clr-border);
  border-radius:12px;
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.mk-mini-cards--dark-vertical .mk-mini .material-icons-outlined{
  font-size:36px;
  color:var(--clr-primary);
  margin-bottom:6px;
}

.mk-mini-cards--dark-vertical .mk-mini__txt{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-align:center;
}

.mk-mini-cards--dark-vertical .mk-mini__title,
.mk-mini-cards--dark-vertical .mk-mini__sub{
  color:var(--clr-text);
  opacity:.85;
}


/* --------------------------------------------------
   Asset cards: ensure image height pushes layout
-------------------------------------------------- */

.mk-asset-card{
  display:grid;
  grid-template-rows:auto 1fr;
    overflow: hidden;
}


/* Make sure your body has a known padding value */


/* --------------------------------------------------
   Package/benefit card image
-------------------------------------------------- */

.mk-asset-card__img{
  position:relative;
  display:block;
  height:280px;
}

.mk-asset-card__img-el{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* --------------------------------------------------
   PARTNERS PAGE: section theming
   - Packages = light UI
   - Benefits = light UI
-------------------------------------------------- */

#packages{
  background: var(--clr-text);
  color: var(--clr-text-dark);
}

#packages .mk-assets__title,
#packages .mk-h2,
#packages .mk-p,
#packages .mk-copy,
#packages .mk-kicker{
  color: var(--clr-text-dark);
}

#packages .mk-asset-card{
  background: var(--clr-text);
  border: 1px solid rgba(0,0,0,0.10);
}

#packages .mk-asset-card__img{
  background: #f2f2f2;
}

#packages .mk-feature-row{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

#packages .mk-feature-ico{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.05);
}

#packages .mk-feature-text{
  color: var(--clr-text-dark);
  opacity: 0.9;
}

#packages .mk-feature-tick{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.05);
}


/* BENEFITS now matches light sections */
#benefits{
  background: var(--clr-text);
  color: var(--clr-text-dark);
}

#benefits .mk-assets__kicker{
  color: var(--clr-text-dark);
  opacity: 0.7;
}

#benefits .mk-assets__title,
#benefits .mk-h2,
#benefits .mk-p,
#benefits .mk-copy,
#benefits .mk-kicker{
  color: var(--clr-text-dark);
}

#benefits .mk-asset-card{
  background: var(--clr-text);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--card-shadow);
}

#benefits .mk-asset-card__img{
  background: #f7f7f7;
}

#benefits .mk-feature-row{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

#benefits .mk-feature-ico{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}

#benefits .mk-feature-text{
  color: var(--clr-text-dark);
  opacity: 0.9;
}

#benefits .mk-feature-tick{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}

#benefits .mk-feature-tick .material-icons-outlined,
#benefits .mk-feature-ico .material-icons-outlined,
#benefits .mk-accent{
  color: var(--clr-primary);
}

/* --------------------------------------------------
   BULLETS
-------------------------------------------------- */

#packages .mk-insights__list,
#benefits .mk-insights__list{
  color: var(--clr-text-dark);
}

#packages .mk-insights__list li::before,
#benefits .mk-insights__list li::before{
  content: "•";
  color: var(--clr-primary);
  font-size: 18px;
  line-height: 1;
  top: 2px;
}


/* ------------------------------------------------------------
   PARTNERS PAGE: feature table list
------------------------------------------------------------ */

.mk-feature-table{
  margin:0 0 30px 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.mk-feature-row{
  display:grid;
  grid-template-columns:34px 1fr 22px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--clr-border);
  background:rgba(0,0,0,0.12);
  border-radius:12px;
}

.mk-feature-ico{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.16);
}

.mk-feature-ico .material-icons-outlined{
  font-size:var(--fs-300);
  color:var(--clr-primary);
  line-height:var(--lh-base);
}

.mk-feature-text{
  font-size:var(--fs-300);
  line-height:var(--lh-base);
  color:var(--clr-text);
  opacity:0.92;
}

.mk-feature-tick{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.18);
}

.mk-feature-tick .material-icons-outlined{
  font-size:16px;
  color:var(--clr-primary);
  line-height:1;
}


/* --------------------------------------------------
   Spacing hooks (no inline styles)
-------------------------------------------------- */

.mk-copy__actions--spaced{ margin-top:18px; }
.mk-copy__actions--tight{ margin-top:12px; }

.mk-asset-grid--spaced{ margin-top:18px; }

.mk-assets__intro{ margin-top:8px; }

.mk-package-title{ margin-top:6px; }
.mk-package-desc{ margin-top:10px; }

.mk-benefit-title{ margin-top:6px; }
.mk-benefit-desc{ margin-top:10px; }


/* --------------------------------------------------
   Card CTA: title left, button right
-------------------------------------------------- */

.mk-card-cta{
  margin-top:auto;
  margin-left: calc(var(--sp-8) * -1);
  margin-right: calc(var(--sp-8) * -1);
  margin-bottom: calc(var(--sp-8) * -1);

  padding: var(--sp-8);

  display:flex;
  align-items:center;          /* vertical alignment */
  justify-content:space-between; /* pushes button right */
  gap:16px;


  border-top: 1px solid var(--clr-border-light);

  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}

.mk-card-cta__title{

color: var(--clr-text-dark);

}

/* keep your existing button rules */
.btn--full{
  width:100%;
  justify-content:center;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
/* =========================================================
   Partner logo carousel
   ========================================================= */

.mk-partners{
  padding: var(--sp-10) 0;
  background: var(--clr-surface);
}

.mk-partners__carousel{
  overflow: hidden;
  margin-top: var(--sp-6);
  position: relative;
}

.mk-partners__track{
  display: flex;
  gap: 120px;
  width: max-content;
  animation: mkPartnerScroll 30s linear infinite;
}

.mk-partner-logo{
  height: 120px;          /* give enough room */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}


.mk-partner-logo img{
  height: 50px;  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: 0.25s;
}

.mk-partner-logo img:hover{
  filter: grayscale(0%);
  opacity: 1;
}

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

/* Make the card body a column so we can push the button to the bottom */


/* Content takes remaining space, ensuring buttons align */
.mk-asset-card__content{
  flex: 1 1 auto;
}

/* Bottom-aligned, consistent width button (not full width) */
.mk-asset-card__btn--fixed{
  align-self: center;
  width: 80%;
  margin-top: 18px;
}

/* On small screens, give it a bit more width */


/* Partner package mini cards: 2 rows of 3 */
.mk-asset-card .mk-mini-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* tablet */


/* mobile */


/* ---------------------------------------------------------
   TEAM SECTION
--------------------------------------------------------- */

.mk-team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: 26px;
}

.mk-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.mk-team-card {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: var(--clr-text);
  box-shadow: var(--card-shadow);
}

.mk-team-card__img-wrap {
  height: 350px;
  background: var(--grey-100);
}

.mk-team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mk-team-card__body {
  padding: 16px;
}

.mk-team-card__name {
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--clr-text-dark);
}

.mk-team-card__role {
  font-size: var(--fs-300);
  color: rgba(0,0,0,0.60);
  margin-bottom: 10px;
}

.mk-team-card__bio {
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: 1.6;
}

.mk-team-cta {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.mk-team-cta__text {
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  max-width: 70ch;
}

.mk-team-cta__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}


.mk-contact-card--location{
  margin-bottom: 0;
}

.mk-contact-map-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

}

/* ---------------------------------------------------------
   CONTACT PAGE (Marketplace / mk styles) - TIDIED / DEDUPED
   - Keeps ONE layout system: mk-contact-layout + mk-contact-card
   - Keeps mk-hero-grid + points (optional, only if used)
   - Uses an explicit contact hero grid so intro, form and cards
     stay in the correct columns on desktop
   - Removes duplicate field layout definitions
--------------------------------------------------------- */


/* ---------------------------------------------------------
   CONTACT HERO
--------------------------------------------------------- */
.mk-contact-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "intro form"
    "cards form";
  gap: 24px 40px;
  align-items: start;
  width: 100%;
  margin-top: 80px;
}

.mk-contact-hero__intro{
  grid-area: intro;
  padding-right: 90px;
}

.mk-contact-card--form{
  grid-area: form;
}

.mk-contact-hero__cards{
  grid-area: cards;
  align-self: start;
  padding-right: 90px;
  margin-top: 0;
}

/* Optional: hero-side grid + points (only if used on this page) */
.mk-hero-grid{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 22px;
  align-items: start;
}

.mk-hero-left .mk-p{
  max-width: 72ch;
}

.mk-hero-points{
  margin-top: 18px;
  display: grid;
  gap: var(--sp-3);
}

.mk-point{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
}

.mk-point .material-icons-outlined{
  font-size: 20px;
  opacity: 0.8;
  margin-top: 1px;
}

.mk-point__title{
  font-family: var(--ff-heading);
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.mk-point__desc{
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: var(--lh-base);
}

/* ---------------------------------------------------------
   CONTACT LAYOUT
--------------------------------------------------------- */
.mk-contact-layout{
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: var(--sp-5);
  align-items: start;
}

/* Generic card used in contact page */
.mk-contact-card{
  background: var(--clr-surface);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--card-shadow);
  border-radius: 14px;
  overflow: hidden;
  padding: 30px;
}

.mk-contact-card__head{
  margin-bottom: 12px;
}

.mk-contact-card__title{
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
  line-height: 1.2;
  margin-bottom: 4px;
  color: #ffffff;
}

.mk-contact-card__sub{
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: #ffffff;
  opacity: 0.8;
}

/* Right column stack */
.mk-contact-side{
  display: grid;
  gap: var(--sp-5);
}

/* ---------------------------------------------------------
   FORM GRID
--------------------------------------------------------- */
.mk-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.mk-field{
  display: grid;
  gap: 6px;
}

.mk-field--full{
  grid-column: 1 / -1;
}

.mk-help{
  margin-top: 8px;
  font-size: var(--fs-300);
  opacity: 0.8;
}

/* ---------------------------------------------------------
   CONTACT LINES
--------------------------------------------------------- */
.mk-contact-lines{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.mk-contact-line{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.85);
}

.mk-contact-line .material-icons-outlined{
  font-size: 20px;
  opacity: 0.8;
}

.mk-contact-line__label{
  font-size: var(--fs-200);
  color: rgba(0,0,0,0.60);
  margin-bottom: 2px;
}

.mk-contact-line__value{
  font-family: var(--ff-heading);
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: 1.2;
}

/* ---------------------------------------------------------
   LOCATION LIST
--------------------------------------------------------- */
.mk-location-list{
  display: grid;
  gap: var(--sp-3);
}

.mk-location{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.85);
}

.mk-location__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mk-location__title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  color: var(--clr-text-dark);
  margin-bottom: 6px;
}

.mk-location--dark{
  background: #222222;
  border: 1px solid rgba(255,255,255,0.10);
}

.mk-location--dark .mk-location__title,
.mk-location--dark .mk-location__lines,
.mk-location--dark .mk-location__lines div,
.mk-location--dark a{
  color: #ffffff;
}

.mk-location--dark .mk-location__title .material-icons-outlined{
  color: var(--clr-primary);
  opacity: 1;
}

.mk-location__title .material-icons-outlined{
  font-size: 22px;
  opacity: 0.85;
}

.mk-location__lines{
  display: grid;
  gap: 6px;
  font-size: var(--fs-300);
  opacity: 0.85;
}

.mk-location a,
.mk-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mk-badge{
  font-size: var(--fs-200);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: var(--clr-text-dark);
}

/* ---------------------------------------------------------
   MAP
--------------------------------------------------------- */
.mk-map--fullbleed{
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

.mk-map--fullbleed iframe{
  width: 100%;
  height: 400px;
  border-radius: 0;
  display: block;
}

/* ---------------------------------------------------------
   FAQ STRIP
--------------------------------------------------------- */
.mk-contact-faq{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.mk-contact-faq__item{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.85);
}

.mk-contact-faq__q{
  font-family: var(--ff-heading);
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  margin-bottom: 6px;
}

.mk-contact-faq__a{
  font-size: var(--fs-300);
  color: var(--clr-text-dark);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   COMBINED CONTACT / LOCATION BLOCK
--------------------------------------------------------- */
.mk-contact-combined{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: var(--sp-5);
  align-items: stretch;
}

.mk-contact-combined__location{
  min-width: 0;
}

.mk-contact-combined__location-card{
  display: grid;
  gap: 10px;
  height: 100%;
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.mk-contact-combined__title{
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
  line-height: 1.2;
  color: var(--clr-text-dark);
}

.mk-contact-combined__sub{
  font-size: var(--fs-300);
  color: rgba(0,0,0,0.60);
  margin-bottom: 8px;
}

.mk-contact-combined__address{
  display: grid;
  gap: 6px;
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  color: var(--clr-text-dark);
}

.mk-contact-combined__stack{
  display: grid;
  gap: var(--sp-4);
}



/* ---------------------------------------------------------
   DIRECT CONTACT STRIP
--------------------------------------------------------- */

.mk-contact-direct-section{
  background: #f7f7f8;
  padding: 32px 0;
}

.mk-contact-direct-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.mk-contact-direct-card{
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  text-align: center;
  min-height: 100%;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  color: var(--clr-text-dark);
}

.mk-contact-direct-card__icon{
  font-size: 36px;
  color: var(--clr-primary);
  margin-bottom: 4px;
}

.mk-contact-direct-card__label{
  font-size: var(--fs-200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.55);
}

.mk-contact-direct-card__value{
  font-family: var(--ff-heading);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  color: var(--clr-text-dark);
}

.mk-contact-direct-card__value a{
  color: var(--clr-primary);
  text-decoration: none;
}

.mk-contact-direct-card__value a:hover{
  text-decoration: underline;
}

.mk-contact-direct-card__meta{
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: rgba(0,0,0,0.70);
  max-width: 28ch;
}


/* MARKETPLACE BLOCK */


/* Marketplace horizontal mini-cards */
.mk-mini-cards--marketplace{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);

}

.mk-mini-cards--marketplace .mk-mini{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: var(--sp-6);
    margin: 20px 0 20px 0;
}

.mk-mini-cards--marketplace .material-icons-outlined{
  font-size: 36px;
}

.mk-mini-cards--marketplace .mk-mini__txt{
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ----------------------------------------------------------------------
   APU LISTINGS BLOCK (summary listing cards)
   ---------------------------------------------------------------------- */

.mk-listing-grid--summary{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.mk-listing-card--summary .mk-listing-card__img{
  height: 270px;
}

.mk-listing-card--summary .mk-listing-meta{
  margin-top: 0;
}

.mk-listing-card--summary .mk-listing-meta__row{
  padding: 8px 0;
}

.mk-listing-card__actions--summary{
  margin-top: 12px;
}

.mk-listing-card__actions--summary .mk-listing-card__btn{
  width: 100%;
}

/* Only keep this if your markup actually contains .mk-listing-card__actions-row */
.mk-listing-card__actions--summary .mk-listing-card__actions-row{
  display: block;
}

/* ----------------------------------------------------------------------
   CAROUSEL (Available Assets)
   - 4 cards visible
   - no native scrollbars
   - shadows not clipped
   - side arrows
   ---------------------------------------------------------------------- */

.mk-carousel{
  position: relative;
}

/* side arrows live outside the viewport so they don't affect layout */
.mk-carousel__controls{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.mk-carousel__arrow{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.mk-carousel__arrow .material-icons-outlined{
  color: var(--clr-text);
}

.mk-carousel__arrow:hover{
  background-color: var(--clr-primary);
}


/* keep them close to the carousel */
.mk-carousel__arrow--left{ left: -80px; }
.mk-carousel__arrow--right{ right: -80px; }

/* viewport should only clip horizontally */
.mk-carousel__viewport{
  overflow-x: hidden;
  overflow-y: visible;   /* allow shadows to show */
}

/* track: add internal space so bottom shadow is inside the viewport */
.mk-carousel__track{
  display: grid;
  grid-auto-flow: column;
  gap: var(--sp-4);
  grid-auto-columns: calc((100% - (var(--sp-4) * 3)) / 4);

  scroll-behavior: smooth;

  /* IMPORTANT: this is what stops the shadow being clipped */
  padding-bottom: 16px;

  /* still allow JS scroll, hide native UI */
  overflow-x: scroll;
  overflow-y: visible;

  touch-action: pan-y;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mk-carousel__track::-webkit-scrollbar{ display:none; }

/* make sure nothing else clips */
.mk-carousel,
.mk-assets,
.mk-container{
  overflow: visible;
}


/* slides should not impose min widths */
.mk-carousel__slide{
  min-width: 0 !important;
  width: 100%;
}

/* just in case any global styles target articles */
.mk-carousel__slide.mk-listing-card{
  width: 100%;
}

/* dots */
.mk-carousel__dots{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Carousel dots should ignore global button styling */
.mk-carousel__dots .mk-carousel__dot{
  all: unset;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.mk-carousel__dots .mk-carousel__dot:hover{ transform: scale(1.15); }
.mk-carousel__dots .mk-carousel__dot.is-active{
  background: rgba(255,255,255,0.70);
  border-color: rgba(255,255,255,0.70);
}

/* responsive: reduce to 2-up on smaller screens (still “exact” columns) */


/* ----------------------------------------------------------------------
   PARTNERS BLOCK (dark) - split layout like marketplace
   ---------------------------------------------------------------------- */

.mk-partners{
  padding: var(--sp-section) 0;
  background: var(--clr-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Ensure split aligns at the top */
.mk-partners__split{
  align-items: start;
}

/* Benefits as 4 in a row */
.mk-partners__benefits{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);

}

.mk-partners__benefit{
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
    margin: 20px 0;
}

.mk-partners__icon{
  display: inline-flex;
  font-size: 36px;
  color: var(--clr-primary);
  margin-bottom: 10px;
}

.mk-partners__benefit-title{
  font-size:var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 20px;
}

.mk-partners__benefit-sub{
  margin-top: 6px;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: rgba(255,255,255,0.74);
}

.mk-partners__actions{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* Media box stays top-aligned and matches marketplace behaviour */
.mk-partners__media-box{
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--card-shadow);
  background: rgba(255,255,255,0.03);
}

.mk-partners__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */


/* ----------------------------------------------------------------------
   VIDEO PLAY OVERLAY (click-to-play)
   ---------------------------------------------------------------------- */

.mk-video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mk-video-embed::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mk-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mk-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
}

.mk-video-overlay:hover,
.mk-video-overlay:active,
.mk-video-overlay:focus,
.mk-video-overlay:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  outline: none;
}

.mk-video-overlay__bg{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--clr-primary);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  display: block;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mk-video-overlay__play{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--clr-text);
  transform: translate(-38%, -50%);
}

.mk-video-overlay:hover .mk-video-overlay__bg,
.mk-video-overlay:focus-visible .mk-video-overlay__bg{
  transform: scale(1.1);
}

.mk-video-overlay:focus-visible .mk-video-overlay__bg{
  box-shadow: 0 0 0 4px rgba(255,255,255,0.22), 0 12px 30px rgba(0,0,0,0.28);
}


/* ----------------------------------------------------------------------
   STANDARD MEDIA IMAGES
   ---------------------------------------------------------------------- */

.mk-media-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}


/* ----------------------------------------------------------------------
   OFFER UP (light block) - content in container, video boxed right
   Behaves like Marketplace split section
   ---------------------------------------------------------------------- */

.mk-offerup{
  position: relative;
  padding: clamp(44px, 5vw, 74px) 0;
}

/* Two-column split. Right column scales up on large screens. */
.mk-offerup__layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 40vw, 780px));
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}


.mk-offerup__video-box{
  position: relative;
  overflow: visible;
}

.mk-offerup__coming-soon{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border-radius: 999px;
  background: var(--clr-primary);
  color: var(--clr-text);
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,0.18);
}


.mk-offerup-h1{

color: var(--clr-text-dark);
margin: 20px 0 30px 0;

}

/* Right column: align to right, allow it to grow with column */
.mk-offerup__media{
  justify-self: end;
  width: 100%;
    grid-column: 2;
}

/* Mobile: stack */


/* Left column */
.mk-offerup__content{
  display: grid;
  gap: var(--sp-6);
    grid-column: 1;
}

/* Header with logo */
.mk-offerup__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
}

.mk-offerup__brand{
  display: grid;
  gap: 8px;
}

.mk-offerup__logo{
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.mk-offerup__header-actions{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Title + lead */
.mk-offerup__hero{
  display: grid;
  gap: 10px;
}

/* How it works wrapper */
.mk-offerup__how{
  display: grid;
  gap: var(--sp-4);
}

.mk-offerup__how-title{
  font-weight: 900;
  margin: 0;
}

/* ----------------------------------------------------------------------
   VIDEO (make it scale like Marketplace)
   ---------------------------------------------------------------------- */

/* Keep using your existing global .mk-video-box / overlay styles */
.mk-offerup__media .mk-media__box{
  width: 100%;
}

/* This is the bit that makes it resize properly */
.mk-offerup__media .mk-video{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

/* ----------------------------------------------------------------------
   OFFER UP TOGGLE — LIGHT UI
   ---------------------------------------------------------------------- */

.mk-offerup__toggle{
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin: 10px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #efefef;
}

.mk-offerup__toggle-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--grey-700);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.mk-offerup__toggle-btn:hover{
  background: rgba(0,0,0,0.06);
  color: var(--grey-900);
}

.mk-offerup__toggle-btn.is-active{
  background: var(--clr-text);
  color: var(--clr-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
}

.mk-offerup__toggle-btn:focus-visible{
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   OfferUp "How it works" tiles — horizontal layout
   ---------------------------------------------------------------------- */

.mk-offerup__boxes--stack{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.mk-offerup__step{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--sp-5);
  padding: 18px;
  background: var(--clr-text);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--card-shadow);
  margin: 0 0 20px 0;
  justify-content: flex-start;
  height: 100%;
}


/* Step rows */


.mk-offerup__step-num-box{
  height: 60px;
  width: 60px;
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.mk-offerup__step-num{
  font-weight: 900;
  font-size: 20px;
  color: var(--clr-primary);
}

.mk-offerup__step-main{
  display: grid;
  gap: 6px;
  align-items: center;
}

.mk-offerup__step-body{
  display: grid;
  gap: 6px;
}

.mk-offerup__box-title{
  font-size: var(--fs-300);
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 20px;
}

.mk-offerup__box-sub{
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: var(--clr-text-dark);
}

/* Actions */
.mk-offerup__actions{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}


/* ----------------------------------------------------------------------
   INSIGHTS BLOCK (light)
   ---------------------------------------------------------------------- */

.mk-insights--light{
  background: var(--clr-text);
  padding: var(--sp-section) 0;
  color: var(--clr-text-dark);
}

/* header */
.mk-insights--light .mk-insights__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.mk-insights--light .mk-insights__lead{
  margin-top: 8px;
  color: rgba(0,0,0,0.72);
}

/* cards grid */
.mk-insights--light .mk-insights__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* card */
.mk-insights--light .mk-insights__card{
  background: var(--clr-text);
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.10);
  box-shadow: var(--card-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* top image (mockup) */
.mk-insights--light .mk-insights__media{
  width: 100%;
  padding: 14px;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mk-insights--light .mk-insights__media img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* content */
.mk-insights--light .mk-insights__card-body{
  padding: var(--sp-5);
  display:grid;
  gap:10px;
}

.mk-insights--light .mk-assets__title,
.mk-insights--light .mk-h1,
.mk-insights--light .mk-h2,
.mk-insights--light h2,
.mk-insights--light h4,
.mk-insights--light h3{
  color: var(--clr-text-dark);
}

.mk-insights__card-title{

  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-tight);

}

.mk-insights--light .mk-insights__card-sub{
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: rgba(0,0,0,0.72);
}

.mk-insights--light .mk-insights__list{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: rgba(0,0,0,0.72);
}

.mk-insights--light .mk-insights__list li{
  position: relative;
  padding-left: 18px;
}

.mk-insights--light .mk-insights__list li::before{
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clr-primary);
  font-weight: 900;
  font-size: var(--fs-300);
  line-height: 1;
}

/* tags */
.mk-insights--light .mk-insights__tags{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mk-insights--light .mk-insights__tags .mk-asset-pill{
  background: rgba(252,0,186,0.10);
  border: 1px solid rgba(252,0,186,0.18);
  color: var(--clr-primary);
}

/* responsive */


/* ----------------------------------------------------------------------
   SERVICES BLOCK (dark)
   ---------------------------------------------------------------------- */

.mk-services{
  background: var(--clr-bg);
  padding: var(--sp-section) 0;
}

/* ----------------------------------------------------------------------
   SERVICES: grid layout (selectors left, animated slides right)
   ---------------------------------------------------------------------- */


#services button.mk-services__selector-item{
  width: 100%;
  min-height: 52px;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;

  border-radius: 12px;
  padding: 20px;

  background: var(--grey-900);
  border: 1px solid rgba(255,255,255,0.08);

  color: var(--clr-text);
  cursor: pointer;
  text-align: left;

  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

#services button.mk-services__selector-item .material-icons-outlined{
  font-size: 36px;
  color: rgba(255,255,255,0.70);
}

#services .mk-services__selector-text{
  font-size:var(--fs-300);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#services button.mk-services__selector-item:hover{
  background: #2a2a2a !important;
  color: rgba(255,255,255,0.92) !important;
}

#services button.mk-services__selector-item:hover .material-icons-outlined{
  color: rgba(255,255,255,0.92) !important;
}

#services button.mk-services__selector-item:focus-visible{
  outline: 2px solid rgba(255,255,255,0.22) !important;
  outline-offset: 2px !important;
}

#services button.mk-services__selector-item.is-active{
  color: var(--clr-text) !important;
  background-color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
}

#services button.mk-services__selector-item.is-active .material-icons-outlined{
  color: var(--clr-text) !important;
}

/* RIGHT: animated slides */
#services .mk-services__slides{
  min-width: 0;
}


/* card wrapper spacing */
#services .mk-services__card{
  padding: 20px 0 20px 0;
}


/* ----------------------------------------------------------------------
   SHARED VALUE PROPS SECTION
   Used by services, insights, and similar split content sections
---------------------------------------------------------------------- */

.mk-value-props{
  background: var(--clr-bg);
  color: var(--clr-text);
}

.mk-value-props .mk-assets__title,
.mk-value-props .mk-h2,
.mk-value-props .mk-p,
.mk-value-props .mk-copy,
.mk-value-props .mk-kicker{
  color: var(--clr-text);
}

.mk-value-props .mk-assets__kicker{
  color: var(--clr-text-muted);
}

.mk-value-props .mk-assets__head{
  margin-bottom: 30px;
}

.mk-value-props__split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  margin: 0;
}

/* default rows: text left, image right */
.mk-value-props__split .mk-copy{
  order: 1;
  display: grid;
  gap: var(--sp-4);
}

.mk-value-props__split .mk-media{
  order: 2;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
}

/* reversed rows: image left, text right */
.mk-value-props__split.mk-split--reverse .mk-media{
  order: 1;
}

.mk-value-props__split.mk-split--reverse .mk-copy{
  order: 2;
}

.mk-value-props .mk-p-light{
  color: rgba(255,255,255,0.82);
}

.mk-value-props .mk-mini-cards{
  margin-top: 10px;
  margin-bottom: 10px;
}

.mk-value-props .mk-copy__actions{
  margin-top: 6px;
}

.mk-media__box{
  width: 640px;
  min-height: 360px;
  background: rgba(255,255,255,0.03);
  border: none;
  box-shadow: var(--card-shadow);
    border-radius: 10px;
      overflow: hidden;
}


.mk-value-props .mk-media-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/*====================================
VIEW LISTING
======================================*/

/* Notes card */
.mk-apu-notes{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mk-apu-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  opacity:0.9;
}

.mk-apu-note .material-icons-outlined{
  font-size:14px;
  margin-top:2px;
  opacity:0.7;
  color: var(--clr-primary);
}

/* Force full-width cards inside APU grid */
.mk-apu-card--full{
  grid-column: 1 / -1;
}


/* TOP: Image | Title/SN/Chip | Actions column */
.mk-apu-top{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

/* Right column wrapper (last operated by + actions) */
.mk-apu-actions-col{
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

/* Last operated by (base) */
.mk-apu-lastop{
  border-radius: 18px;
  background: var(--clr-bg);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: left;
  height: 100%;
}

.mk-apu-lastop__logo{
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  display: block;
}

.mk-apu-lastop__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mk-apu-lastop__label{
  font-size: var(--fs-300);
  line-height: 1.2;
  color: var(--clr-text-muted);
  text-align: left;
}

/* Compact variant for top-right */
.mk-apu-lastop--compact{
  padding: 14px;
  gap: 8px;
  height: auto;
}

.mk-apu-lastop--compact .mk-apu-lastop__logo{
  aspect-ratio: 3 / 1;
  max-height: 72px;
}

.mk-apu-lastop--compact .mk-apu-lastop__logo img{

  padding: 6px 10px;
}

/* Image */
.mk-apu-img{
  border-radius: 18px;
  overflow: hidden;
  background: var(--clr-bg);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 30px;
  box-sizing: border-box;
}

.mk-apu-img img{
  position: absolute;
  inset: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}
/* Middle column */
.mk-apu-hero{
  padding-top: 6px;
}

.mk-apu-title{
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}

.mk-apu-sub{
  margin-top: 8px;
  color: rgba(255,255,255,0.7);
}

.mk-apu-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.mk-apu-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: var(--fs-300);
  line-height: 1;
  white-space: nowrap;
}

.mk-apu-badge b{
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

/* Actions (now live inside right column stack) */
.mk-apu-actions{
  display: grid;
  gap: var(--sp-3);
  margin-top: 0;
  align-items: stretch;
  width: 100%;
}

.mk-apu-actions .mk-apu-action{
  width: 100%;
  justify-content: center;
}

.mk-apu-actions .btn.mk-apu-action,
.mk-apu-actions .pill-link.mk-apu-action{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mk-apu-actions .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mk-apu-actions .pill-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* simple text link (not full-width) */
.mk-save-link{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--clr-primary);
  text-decoration: none;
  font-size: var(--fs-300);
  line-height: 1;
  text-align: right;
}

.mk-save-link:hover{
  color: var(--clr-text);
  text-decoration: none;
}

.mk-save-link .material-icons-outlined{
  font-size: 18px;
  line-height: 1;
}

/* Card base (APU details uses this) */
.mk-apu-meta-card{
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px;

}

.mk-apu-meta-head{
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: center;
}

/* keep for other sections that still use it (eg Additional Details two-col) */
.mk-apu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}

.mk-apu-row{
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mk-apu-row:last-child{
  border-bottom: none;
}

.mk-apu-k{
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
}

.mk-apu-v{
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  text-align: right;
}

.mk-apu-section{
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px;
}

.mk-apu-divider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 10px 0 14px 0;
}

/* NEW: Details layout grid (APU spans both right-side rows) */
.mk-apu-details-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 22px;
  align-items: stretch;
}

.mk-apu-card--apu,
.mk-apu-card--cert,
.mk-apu-card--llp{
  height: 100%;
}

/* Grid placement */
.mk-apu-card--apu{
  grid-column: 1;
  grid-row: 1 / span 2;
}

.mk-apu-card--cert{
  grid-column: 2;
  grid-row: 1;
}

.mk-apu-card--llp{
  grid-column: 2;
  grid-row: 2;
}

.mk-apu-card--additional{
  grid-column: 1 / -1;
  grid-row: 3;
}

/* APU Details: one column inside the card */
.mk-apu-list{
  display: grid;
  gap: 0;
}

/* Icons next to headings */
.mk-card-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mk-card-title__icon{
  font-size: 22px;
  color: var(--clr-primary);
  line-height: 1;
}

.mk-card-title__text{
  margin: 0;
}

.mk-apu-actions__row{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--sp-3);
  width:100%;
  width: 67%;
  margin-top: 20px;
}

.mk-apu-actions__row .mk-apu-action{
  width:100%;
  min-width:0;
  justify-content:center;
}

.mk-apu-actions .btn.mk-apu-action,
.mk-apu-actions .pill-link.mk-apu-action{
  min-height: 52px;
  box-sizing: border-box;
}

/* ====================================
   Offer up parts list modal (large lists) - 6 columns
   Part Number | Description | Serial Number | Condition | Qty | Notes
   ==================================== */

/* =========================================================
   Sortable table headers in Offer Up modal
   ========================================================= */

/* table grid */
.mk-offerup-modal__table{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* header buttons */
.mk-offerup-modal__th.is-sort{
  /* reset global button styles (but DO NOT kill border-right) */
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04); /* slightly darker header */

  border-top: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;

  box-shadow: none !important;

  margin: 0;
  min-width: 0;

  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;

  cursor: pointer;
  line-height: inherit;
  border-radius: 0 !important;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 12px;
}

/* remove divider on last column */
.mk-offerup-modal__table > .mk-offerup-modal__th.is-sort:nth-child(6){
  border-right: 0 !important;
}


/* inner layout (label + icon) */
.mk-offerup-modal__th.is-sort .mk-sorthead{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mk-offerup-modal__th.is-sort .mk-sorticon{
  width: 14px;
  height: 14px;
  display: inline-block;
  opacity: 0.55;
  transform: translateY(1px);
}

/* default neutral sort icon */
.mk-offerup-modal__th.is-sort .mk-sorticon::before{
  content: '⇅';
  display: block;
  font-size: var(--fs-300);
  line-height: 14px;
}

/* active sorting states */
.mk-offerup-modal__th.is-sort[data-sort-dir="asc"] .mk-sorticon{
  opacity: 0.9;
}
.mk-offerup-modal__th.is-sort[data-sort-dir="asc"] .mk-sorticon::before{
  content: '▲';
}

.mk-offerup-modal__th.is-sort[data-sort-dir="desc"] .mk-sorticon{
  opacity: 0.9;
}
.mk-offerup-modal__th.is-sort[data-sort-dir="desc"] .mk-sorticon::before{
  content: '▼';
}

.mk-offerup-modal__th.is-sort.is-active{
  opacity: 0.95;
}


.mk-offerup-modal-backdrop{
  position: fixed;
  inset: 0;
  background: var(--clr-text-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}

.mk-offerup-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(1100px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  background: var(--clr-bg);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

.mk-offerup-modal.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.mk-offerup-modal-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mk-offerup-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mk-offerup-modal__title{
  font-size:var(--fs-300);
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}

.mk-offerup-modal__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mk-offerup-modal__tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 16px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mk-offerup-modal__search{
  position: relative;
  width: min(520px, 100%);
}
.mk-offerup-modal__search input{
  width: 100%;
  padding: 12px 38px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  outline: none;
}
.mk-offerup-modal__search span{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}

.mk-offerup-modal__count{
  font-size: var(--fs-300);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

.mk-offerup-modal__body{
  padding: 14px 16px 16px 16px;
  overflow: auto;
  max-height: calc(100vh - 190px);
}

/* 6-column grid */
.mk-offerup-modal__table{
  display: grid;
  grid-template-columns:
    minmax(150px, 1.1fr)   /* Part number */
    minmax(260px, 2.2fr)   /* Description */
    minmax(150px, 1fr)     /* Serial number */
    minmax(140px, 1fr)     /* Condition */
    90px                   /* Qty */
    minmax(220px, 1.4fr);  /* Notes */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}

/* Header cells (border-right for all but last) */
.mk-offerup-modal__th{
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  color: var(--clr-text);
  font-weight: 800;
  font-size: var(--fs-300);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.mk-offerup-modal__th:nth-child(6){ border-right: none; }

/* Rows container spans full width */
.mk-offerup-modal__rows{
  grid-column: 1 / -1;
  display: block;
}

/* Each row matches the same 6-column grid */
.mk-offerup-modal__row{
  display: grid;
  grid-template-columns:
    minmax(150px, 1.1fr)
    minmax(260px, 2.2fr)
    minmax(150px, 1fr)
    minmax(140px, 1fr)
    90px
    minmax(220px, 1.4fr);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mk-offerup-modal__td{
  padding: 10px 12px;
  font-size: var(--fs-300);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.08);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-offerup-modal__td:nth-child(6){ border-right: none; }

/* Right-align Qty */
.mk-offerup-modal__th:nth-child(5),
.mk-offerup-modal__td:nth-child(5){
  text-align: right;
  white-space: nowrap;
}

.mk-offerup-modal__more{
  display: none;
  margin-top: 12px;
  text-align: center;
}

/* Mobile: keep 6 cols, but make them tighter (modal scrolls horizontally if needed) */


.mk-listing-card__brand-text{
  color: var(--clr-text);
  font-size: var(--fs-300);
  line-height: 1;
}

/* ====================================
   VIEW OFFER UP PAGE
   ==================================== */


.mk-apu-hero .mk-offerup-ends,
.mk-offerup-hero .mk-offerup-ends{
  margin: 16px 0 14px;


}

.mk-apu-hero .mk-offerup-ends__label,
.mk-offerup-hero .mk-offerup-ends__label{
  font-size: var(--fs-300);
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 8px;
}

.mk-apu-hero .mk-offerup-ends__time,
.mk-offerup-hero .mk-offerup-ends__time{
  font-size: 38px;
  line-height: 1.05;
  font-weight: 900;
}

.mk-apu-hero .mk-offerup-ends__meta,
.mk-offerup-hero .mk-offerup-ends__meta{
  margin-top: 10px;
  font-size: var(--fs-300);
  opacity: .5;
  font-style: italic;
}

   .mk-count-num{
  color: var(--clr-primary);
  font-weight: 900;
}


.mk-count-unit{
  font-size: 0.55em;   /* smaller units */
  font-weight: 200;    /* less bold */
  opacity: 1;       /* softer */
  letter-spacing: .02em;
  margin-left: 2px;
}


.mk-offerup{
  padding: var(--sp-section) 0;
}

.mk-offerup-top{}

/* ----------------------------------------------------
   APU offer-up: match APU top layout v2
   (Image | Title | Actions + compact logo)
   ---------------------------------------------------- */

.mk-apu-top.mk-apu-top--v2{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: 40px;
}

.mk-apu-hero.mk-apu-hero--mid{
  padding-top: 6px;
}

/* Right column wrapper (logo + actions) */
.mk-apu-actions-col{
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

/* Compact logo card */
.mk-apu-lastop.mk-apu-lastop--compact{
  padding: 14px;
  gap: 8px;
  height: auto;
}

.mk-apu-lastop.mk-apu-lastop--compact .mk-apu-lastop__logo{
  aspect-ratio: 3 / 1;
  max-height: 72px;
}

.mk-apu-lastop.mk-apu-lastop--compact .mk-apu-lastop__logo img{
  object-fit: contain;
  padding: 6px 10px;
}

/* Actions in right column */
.mk-apu-actions{
  margin-top: 0;
}

/* ----------------------------------------------------
   Small pill inside left column
   ---------------------------------------------------- */

.mk-offerup-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: var(--fs-300);
  line-height: 1;
  white-space: nowrap;
  margin-top: 6px;
}
.mk-offerup-pill b{ font-weight: 700; color: rgba(255,255,255,0.9); }

/* ----------------------------------------------------
   Contents preview table
   ---------------------------------------------------- */

.mk-offerup-preview{ max-width: 100%; }
.mk-offerup-empty{ color: rgba(255,255,255,0.7); font-size: var(--fs-300); }

.mk-offerup-table{
  display: grid;
  grid-template-columns:
    minmax(150px, 1.1fr)   /* Part number */
    minmax(260px, 2.2fr)   /* Description */
    minmax(150px, 1fr)     /* Serial number */
    minmax(140px, 1fr)     /* Condition */
    90px                   /* Qty */
    minmax(220px, 1.4fr);  /* Notes */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}

/* Header cells */
.mk-offerup-th{
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  color: var(--clr-text);
  font-weight: 800;
  font-size: var(--fs-300);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.mk-offerup-th:nth-child(6){ border-right: none; }

/* Body cells */
.mk-offerup-td{
  padding: 10px 12px;
  font-size: var(--fs-300);
  color: var(--clr-text);

  border-right: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.08);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Every 6th cell in each row is the last column, remove right border */
.mk-offerup-td:nth-child(6n){ border-right: none; }

/* Qty column align right (header is 5th, body repeats every 6) */
.mk-offerup-th:nth-child(5){ text-align: right; white-space: nowrap; }
.mk-offerup-td:nth-child(6n + 5){ text-align: right; white-space: nowrap; }

/* If your layout ever wraps, force the grid to stay aligned */
.mk-offerup-th,
.mk-offerup-td{ box-sizing: border-box; }

/* Mobile: keep 6 columns but tighten widths (table can scroll if needed) */


.mk-offerup-table > :nth-last-child(-n+3){
  border-bottom: none;
}

.mk-offerup-preview__more{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-300);
}

/* Responsive: stack top layout */


/* Parts package also uses the v2 top layout */
.mk-offerup-package .mk-apu-top.mk-apu-top--v2{
  align-items: start;
}

/* Optional: slightly tighter right column for packages */
.mk-offerup-package .mk-apu-actions-col{
  gap: var(--sp-4);
}

/* Keep the compact logo consistent */
.mk-offerup-package .mk-apu-lastop.mk-apu-lastop--compact .mk-apu-lastop__logo img{
  object-fit: contain;
}


/* ----------------------------------------------------------------------
   ACCOUNT PAGE: INLINE STYLE REPLACEMENTS
   ---------------------------------------------------------------------- */

/* Message cards spacing + inner layout */
.dash-card-message{
  margin-bottom:16px;
}

.dash-card-message__body{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Generic form grids */
.form-grid-12{
  display:grid;
  gap:12px;
}

.form-grid-10{
  display:grid;
  gap:10px;
}

/* Labels and full-width controls */
.form-label-block{
  display:block;
  margin-bottom:6px;
}

.input-full{
  width:100%;
}

/* Form action rows (buttons) */
.form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.form-actions--sm{ padding-top:4px; }
.form-actions--md{ padding-top:6px; }

/* Form hints */
.form-hint{
  margin-top:2px;
}

/* Report layout grids */
.report-frequency-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.report-settings-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Make the report frequency rows not add bottom margin inside the grid */
.platform-access-row--tight{
  margin-bottom:0;
}

/* ----------------------------------------------------------------------
   PLATFORM ACCESS ROW (Reduced) - YOUR PROVIDED STYLES
   ---------------------------------------------------------------------- */

.platform-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: #212121;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-300);
}

.platform-access-name {
  flex: 1;
  font-size: var(--fs-300);
}

.platform-access-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.platform-checkbox-main,
.platform-admin-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-100);
  cursor: pointer;
}

.platform-admin-pill {
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius);
  background: var(--grey-600);
  border: 1px solid var(--grey-500);
}

.platform-checkbox-main input[type="checkbox"],
.platform-admin-pill input[type="checkbox"] {
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--clr-border);
  background-color: var(--grey-900);
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

.platform-checkbox-main input[type="checkbox"]:hover,
.platform-admin-pill input[type="checkbox"]:hover {
  border-color: var(--clr-primary);
}

.platform-checkbox-main input[type="checkbox"]:focus-visible,
.platform-admin-pill input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.platform-checkbox-main input[type="checkbox"]:checked,
.platform-admin-pill input[type="checkbox"]:checked {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.platform-checkbox-main input[type="checkbox"]:checked::after,
.platform-admin-pill input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 5px;
  top: 4px;
  left: 3px;
  border-left: 2px solid var(--clr-on-primary);
  border-bottom: 2px solid var(--clr-on-primary);
  transform: rotate(-45deg);
}


   /* ----------------------------------------------------------------------
   ACCOUNT PAGE: INLINE STYLE REPLACEMENTS (External CSS)
   Notes:
   - platform-access-row / platform-checkbox-main etc are provided globally
   - this file only covers what was previously inline on the account page
   - adds a 20px gap between cards in the RIGHT column
   ---------------------------------------------------------------------- */

/* Message cards spacing + inner layout */
.dash-card-message{
  margin-bottom:16px;
}

.dash-card-message__body{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Generic form grids */
.form-grid-12{
  display:grid;
  gap:12px;
}

.form-grid-10{
  display:grid;
  gap:10px;
}

/* Labels and full-width controls */
.form-label-block{
  display:block;
  margin-bottom:6px;
}

.input-full{
  width:100%;
}

/* Form action rows (buttons) */
.form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.form-actions--sm{ padding-top:4px; }
.form-actions--md{ padding-top:6px; }

/* Form hints */
.form-hint{
  margin-top:2px;
}

/* Section headings inside forms (used in Email settings card) */
.form-section-head{
  display:grid;
  gap:4px;
}

.form-section-title{
  font-weight:700;
  font-size: var(--fs-400);
}

.form-section-sub{
  font-size: var(--fs-300);
}

/* Report layout grids */
.report-frequency-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.report-settings-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Make the report frequency rows not add bottom margin inside the grid */
.platform-access-row--tight{
  margin-bottom:0;
}

/* ----------------------------------------------------------------------
   COLUMN STACKING GAP
   - when you wrap cards inside a column container (span-6 wrapper),
     the wrapper needs its own vertical spacing
   - right column: 20px gap between cards
   ---------------------------------------------------------------------- */

/* only apply to the RIGHT column wrapper (assumes it's the 2nd span-6 in dash-grid) */
.dash-grid > .span-6:nth-of-type(2){
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Keep the left column stacked normally (optional, but avoids surprises) */
.dash-grid > .span-6:nth-of-type(1){
  display:flex;
  flex-direction:column;
  gap: var(--sp-4);
}


/* ==========================================================
   DASHBOARD FLAGS
   ========================================================== */

    /* Flags only (no row background colouring) */
    .mk-flag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size: var(--fs-300);
      line-height:1;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      white-space:nowrap;
    }
    .mk-flag .material-icons-outlined{ font-size:16px; }

    .mk-flag--warn{
      border-color: rgba(255, 167, 38, 0.35);
      background: rgba(255, 167, 38, 0.12);
      color: var(--clr-text);
    }
    .mk-flag--sold{
      border-color: rgba(46, 125, 50, 0.35);
      background: rgba(46, 125, 50, 0.12);
            color: var(--clr-text);
    }
    .mk-flag--info{
      border-color: rgba(66, 165, 245, 0.35);
      background: rgba(66, 165, 245, 0.12);
            color: var(--clr-text);
    }

    .mk-flag--danger{
  background: rgba(255, 59, 48, 0.18);
  border-color: rgba(255, 59, 48, 0.35);
        color: var(--clr-text);
}

    /* Saved listings: action pills aligned like other tables */
    .saved-actions{
      display:inline-flex;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
      white-space:nowrap;
    }


/* ==========================================================
   ALERTS TABLE (column layout) - ICON + FLAG + DATE + ACTIONS
   ========================================================== */

.mk-table{
  display: grid;
  gap: var(--sp-3);
  width: 100%;
}

/* Optional header row */
.mk-table-head{
  display: grid;
  grid-template-columns: 44px 1fr 140px 180px auto;
  gap: var(--sp-4);
  padding: 8px 18px;
  font-size: var(--fs-300);
  color: var(--clr-text);
}

/* ==========================================================
   ALERTS: force consistent column widths + alignment
   ========================================================== */

.mk-row--box{
  display: grid;

  /* icon | content | flag | date | actions */
  grid-template-columns: 44px minmax(420px, 1fr) 140px 200px 320px;

  gap: var(--sp-4);
  align-items: center;

  /* important: don’t let parent rules centre items */
  justify-items: start;

  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.mk-row--box.is-unread{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}

/* ICON column */
.mk-alert-icon{
  justify-self: center;      /* centre the icon inside its 44px column */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.mk-alert-icon .material-icons-outlined{
  font-size: 36px;
  color: var(--clr-primary);
}

/* CONTENT column */
.mk-alert-main{
  justify-self: start;
  text-align: left;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mk-alert-title{
    font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.6;
}

.mk-alert-body{
  font-size: var(--fs-300);
  color: var(--clr-text);
  line-height: 1.4;
}

/* FLAG column */
.mk-alert-flag{
  justify-self: start;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* DATE column */
.mk-col-date{
  justify-self: start;
  text-align: left;
  font-size: var(--fs-300);
  color: var(--clr-text);
  white-space: nowrap;
}

/* ACTIONS column */
.mk-alert-actions{
  justify-self: end;          /* pins actions to the right edge of the row */
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Optional: make pills consistent height */
.mk-alert-actions .pill-link{

  display: inline-flex;
  align-items: center;
}

/* Mobile stacking */


/* Top actions above alerts table */
.alerts-top-actions{
  width: 100%;
  display:flex;
  justify-content:flex-end;
  margin: 10px 0;

}


/* ======================================================================
   CUSTOMER & PARTNER DASHBOARD
   Sorted + labelled
   ====================================================================== */


/* ======================================================================
   GLOBAL / BASE
   ====================================================================== */

html{ scroll-behavior:smooth; }

/* Dashboard layout (keeps the same site page width behaviour) */
body.has-subnav .dash-main { padding-top: 0; }

.dash-main{

width:80%;
margin: 0 auto;

}



/* ======================================================================
   MY ACCOUNT
   ====================================================================== */


.mk-account-layout {
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-6);
}

.mk-account-side {
  position: sticky;
  top: 24px;
  align-self: start;
  min-width: 0;
}

.mk-account-side .dash-card,
.mk-account-side .card-body {
  width: 100%;
}

.mk-account-side .card-body {
  align-items: stretch;
}

.mk-account-main {
  min-width: 0;
  display: grid;
  gap: var(--sp-6);
}

.mk-account-main .dash-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 30px;
  align-items: stretch;
}

.mk-account-main .dash-card .card-body > .form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mk-account-nav {
  display: grid;
  gap: 12px;
  width: 100%;
}

.mk-account-nav__link {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  color: var(--clr-text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing);
  box-sizing: border-box;
  min-width: 0;
}

.mk-account-nav__link:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  text-decoration: none;
  color: var(--clr-text);
}

.mk-account-nav__link.is-active {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

.mk-account-nav__icon {
  color: var(--clr-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

.mk-account-nav__title {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.mk-account-nav__sub {
  display: block;
  font-size: var(--fs-300);
  line-height: 1.45;
  color: var(--clr-text-muted);
}

.mk-account-meta {
  display: grid;
  gap: 10px;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mk-account-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-300);
}

.mk-account-meta__label {
  color: var(--clr-text-muted);
}

.mk-account-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
  width: 100%;
}

.mk-account-header__copy {
  flex: 1 1 0;
  min-width: 0;
}

.mk-account-header__copy p {
  margin: 8px 0 0;
  color: var(--clr-text-muted);
}

.mk-account-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--fs-300);
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
  margin-left: auto;
  flex: 0 0 auto;
}

.mk-account-status.is-on {
  border-color: rgba(46,125,50,0.35);
  background: rgba(46,125,50,0.12);
}

.mk-account-status.is-off {
  border-color: rgba(255,59,48,0.35);
  background: rgba(255,59,48,0.18);
}

.mk-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mk-account-note {
  margin-top: 8px;
  font-size: var(--fs-300);
  color: var(--clr-text-muted);
}

.mk-account-note--floating {
  padding-left: var(--sp-2);
}

.mk-account-section {
  display: grid;
  gap: 14px;
}

.mk-account-section + .mk-account-section {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mk-account-section__intro {
  color: var(--clr-text-muted);
  margin-top: -4px;
}

.mk-account-checks {
  display: grid;
  gap: 10px;
}

.mk-account-check-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--clr-text);
}

.mk-account-check-copy {
  display: block;
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--clr-text-muted);
}

.mk-account-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: var(--sp-4);
}

.mk-account-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.mk-account-access-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  min-width: 0;
}

.mk-account-access-card--summary {
  background: rgba(255,255,255,0.05);
}

.mk-account-access-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mk-account-access-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.mk-account-access-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--clr-primary);
  flex: 0 0 44px;
}

.mk-account-access-card__icon .material-icons-outlined {
  font-size: 22px;
}

.mk-account-access-card__title-wrap {
  min-width: 0;
}

.mk-account-access-card__eyebrow {
  display: block;
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 4px;
}

.mk-account-access-card__title {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text);
}

.mk-account-access-card__text {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .mk-account-layout {
    grid-template-columns: 1fr;
  }

  .mk-account-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .mk-account-grid,
  .mk-account-access-grid {
    grid-template-columns: 1fr;
  }

  .mk-account-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ======================================================================
   MY ALERTS
   ====================================================================== */


.mk-alerts-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.mk-alerts-summary .mk-flag {
  white-space: nowrap;
}

.mk-alerts-list {
  display: grid;
  gap: 14px;
}

.mk-alert-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.mk-alert-row.is-unread {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}

.mk-alert-row.is-removed {
  border-color: rgba(185, 28, 28, 0.30);
  background: rgba(185, 28, 28, 0.08);
}

.mk-alert-row.is-partner-alert {
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.07);
}

.mk-alert-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--clr-primary);
}

.mk-alert-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mk-alert-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mk-alert-title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-text);
}

.mk-alert-body {
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.65;
}

.mk-alert-flag,
.mk-alert-date,
.mk-alert-actions {
  min-width: 0;
}

.mk-alert-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill-link.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .mk-alert-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .mk-alert-flag,
  .mk-alert-date,
  .mk-alert-actions {
    grid-column: 2;
  }

  .mk-alert-actions {
    justify-content: flex-start;
  }
}



/* ======================================================================
   SAVED LISTINGS
   ====================================================================== */

.mk-saved-note {
  display: block;
  margin-top: 6px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.5;
}

.pill-link.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.mk-saved-list {
  --saved-grid:
    minmax(0, 1.45fr)
    minmax(0, .75fr)
    minmax(0, .75fr)
    minmax(0, .8fr)
    minmax(0, .82fr)
    minmax(0, .7fr)
    minmax(190px, .9fr);

  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mk-saved-list__head,
.mk-saved-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--saved-grid);
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}

.mk-saved-list__head {
  padding: 0 14px 4px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.3;
  font-weight: 700;
}

.mk-saved-list__head .is-right {
  text-align: right;
}

.mk-saved-row {
  min-height: 92px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.mk-saved-row.is-removed {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.28);
}

.mk-saved-cell {
  min-width: 0;
  max-width: 100%;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mk-saved-cell--asset {
  display: grid;
  gap: 7px;
  color: var(--clr-text);
}

.mk-saved-title {
  font-weight: 750;
  line-height: 1.35;
  color: var(--clr-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mk-saved-title:hover {
  text-decoration: underline;
}

.mk-saved-title.is-static:hover {
  text-decoration: none;
}

.mk-saved-cell--status {
  justify-self: start;
  min-width: 0;
}

.mk-saved-cell--action {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.mk-saved-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 100%;
}

.mk-saved-actions form {
  display: inline-flex !important;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
}

.mk-saved-actions .pill-link {
  white-space: nowrap;
  flex: 0 0 auto;
}

.mk-saved-unsave-button {
  border: 0;
  background: none;
  cursor: pointer;
}

.mk-saved-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
}

@media (max-width: 1180px) {
  .mk-saved-list__head {
    display: none;
  }

  .mk-saved-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .mk-saved-cell::before {
    content: attr(data-label);
    display: block;
    color: var(--clr-text-muted);
    font-weight: 700;
    font-size: var(--fs-200);
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .mk-saved-cell--asset,
  .mk-saved-cell--action {
    grid-column: 1 / -1;
  }

  .mk-saved-cell--asset::before,
  .mk-saved-cell--action::before {
    display: none;
  }

  .mk-saved-cell--status,
  .mk-saved-cell--action {
    justify-self: start;
  }

  .mk-saved-cell--action {
    justify-content: flex-start;
  }

  .mk-saved-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .mk-saved-row {
    grid-template-columns: 1fr;
  }

  .mk-saved-actions {
    flex-wrap: wrap;
  }
}

/* ======================================================================
   MY RFQs
   ====================================================================== */

.mk-rfq-message {
  display: block;
  max-width: 520px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.5;
  margin-top: 6px;
}

.pill-link.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.mk-rfq-list {
  --rfq-grid:
    minmax(0, 1.35fr)
    minmax(0, .8fr)
    minmax(0, .82fr)
    minmax(0, .82fr)
    minmax(0, .72fr)
    minmax(0, .72fr)
    minmax(0, .78fr)
    minmax(0, .7fr)
    minmax(130px, .55fr);

  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mk-rfq-list__head,
.mk-rfq-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--rfq-grid);
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}

.mk-rfq-list__head {
  padding: 0 14px 4px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.3;
  font-weight: 700;
}

.mk-rfq-list__head .is-right {
  text-align: right;
}

.mk-rfq-row {
  min-height: 92px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.mk-rfq-row.is-removed {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.28);
}

.mk-rfq-cell {
  min-width: 0;
  max-width: 100%;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mk-rfq-cell--asset {
  display: grid;
  gap: 7px;
  color: var(--clr-text);
}

.mk-rfq-title {
  font-weight: 750;
  line-height: 1.35;
  color: var(--clr-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mk-rfq-title:hover {
  text-decoration: underline;
}

.mk-rfq-title.is-static:hover {
  text-decoration: none;
}

.mk-rfq-cell--status {
  justify-self: start;
  min-width: 0;
}

.mk-rfq-cell--action {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.mk-rfq-cell--action .pill-link {
  white-space: nowrap;
}

.mk-rfq-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
}

@media (max-width: 1180px) {
  .mk-rfq-list__head {
    display: none;
  }

  .mk-rfq-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .mk-rfq-cell::before {
    content: attr(data-label);
    display: block;
    color: var(--clr-text-muted);
    font-weight: 700;
    font-size: var(--fs-200);
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .mk-rfq-cell--asset,
  .mk-rfq-cell--action {
    grid-column: 1 / -1;
  }

  .mk-rfq-cell--asset::before,
  .mk-rfq-cell--action::before {
    display: none;
  }

  .mk-rfq-cell--status,
  .mk-rfq-cell--action {
    justify-self: start;
  }

  .mk-rfq-cell--action {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .mk-rfq-row {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   CUSTOMER DASHBOARD
   ====================================================================== */

.mk-dashboard-intro {
  display: grid;
  gap: 10px;
}

.mk-dashboard-intro p {
  margin: 0 0 30px 0;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.mk-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.mk-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mk-dashboard-kpi {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 12px;
  min-height: 132px;
}

.mk-dashboard-kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mk-dashboard-kpi__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: var(--clr-primary);
  flex: 0 0 auto;
}

.mk-dashboard-kpi__label {
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.4;
  margin: 0;
}

.mk-dashboard-kpi__value {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--clr-text);
  margin: 0;
}

.mk-dashboard-kpi__foot {
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.5;
  margin: 0;
}

.mk-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.mk-dashboard-grid .span-6 {
  grid-column: span 12;
}

.mk-dashboard-grid > .dash-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.mk-dashboard-grid > .dash-card > .card-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  align-items: stretch;
  overflow: visible;
}

.mk-dashboard-list {
  --dash-list-grid:
    minmax(0, 1.35fr)
    minmax(0, .8fr)
    minmax(0, .75fr)
    minmax(0, .7fr)
    minmax(0, .7fr)
    minmax(0, .75fr)
    minmax(96px, .42fr);

  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  overflow: visible;
}

.mk-dashboard-list--rfq {
  --dash-list-grid:
    minmax(0, 1.25fr)
    minmax(0, .72fr)
    minmax(0, .85fr)
    minmax(0, .65fr)
    minmax(0, .62fr)
    minmax(0, .68fr)
    minmax(0, .58fr)
    minmax(112px, .4fr);
}

.mk-dashboard-list__head,
.mk-dashboard-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--dash-list-grid);
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}

.mk-dashboard-list__head {
  padding: 0 14px 4px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.3;
  font-weight: 700;
}

.mk-dashboard-list__head .is-right {
  text-align: right;
}

.mk-dashboard-row {
  min-height: 92px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.mk-dashboard-cell {
  min-width: 0;
  max-width: 100%;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mk-dashboard-cell--asset {
  display: grid;
  gap: 7px;
  color: var(--clr-text);
}

.mk-dashboard-title {
  font-weight: 750;
  line-height: 1.35;
  color: var(--clr-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mk-dashboard-title:hover {
  text-decoration: underline;
}

.mk-dashboard-title.is-static:hover {
  text-decoration: none;
}

.mk-dashboard-cell--status {
  justify-self: start;
  min-width: 0;
}

.mk-dashboard-cell--action {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.mk-dashboard-cell--action .pill-link {
  white-space: nowrap;
}

.mk-dashboard-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
}

.pill-link.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .mk-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mk-dashboard-list__head {
    display: none;
  }

  .mk-dashboard-row,
  .mk-dashboard-list--rfq .mk-dashboard-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mk-dashboard-cell--status,
  .mk-dashboard-cell--action {
    justify-self: start;
  }

  .mk-dashboard-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .mk-dashboard-kpis {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   ASSET AVAILABILITY
   ====================================================================== */

   .mk-dashboard-intro {
  display: grid;
  gap: 10px;
}

.mk-dashboard-intro p {
  margin: 0 0 30px 0;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.mk-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.mk-market-actions {
  display: grid;
  gap: 18px;
  width: 100%;
}

.mk-priority-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
}

.mk-priority-note .material-icons-outlined {
  color: var(--clr-accent, #ffffff);
  font-size: 24px;
  line-height: 1;
}

.mk-priority-note strong {
  display: block;
  color: var(--clr-text);
  font-size: var(--fs-300);
  line-height: 1.35;
  margin-bottom: 4px;
}

.mk-priority-note span {
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.mk-actions-summary {
  display: flex;
  justify-content: flex-start;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.4;
}

.mk-actions-summary strong {
  color: var(--clr-text);
  font-weight: 800;
}

.mk-action-list {
  display: grid;
  gap: 14px;
}

.mk-action-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.mk-action-card__image {
  width: 160px;
  height: 160px;
  aspect-ratio: 1 / 1;
  align-self: start;
  justify-self: start;
  border-radius: 18px;
  background: #222222;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.mk-action-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.mk-action-card__image .material-icons-outlined {
  font-size: 42px;
  color: rgba(255,255,255,0.82);
}

.mk-action-card__main {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.2fr);
  grid-template-rows: auto auto;
  gap: 12px 16px;
  min-width: 0;
  align-self: start;
}

.mk-action-card__head {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.mk-action-card__title {
  margin: 0;
  color: var(--clr-text);
  font-size: var(--fs-500);
  line-height: 1.25;
  font-weight: 900;
}

.mk-action-card__title a {
  color: inherit;
  text-decoration: none;
}

.mk-action-card__title a:hover {
  text-decoration: underline;
}

.mk-action-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.4;
}

.mk-action-card__meta strong {
  color: var(--clr-text);
  font-weight: 750;
}

.mk-action-card__flags {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mk-action-card__details {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: stretch;
}

.mk-action-detail {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.mk-action-detail__label {
  color: var(--clr-text-muted);
  font-size: var(--fs-100);
  line-height: 1.3;
}

.mk-action-detail__value {
  color: var(--clr-text);
  font-size: var(--fs-200);
  line-height: 1.65;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.mk-action-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  align-self: start;
  justify-self: start;
  min-width: 190px;
}

.mk-action-card__actions .btn,
.mk-action-card__actions .pill-link {
  justify-content: center;
  white-space: nowrap;
}

.mk-action-card__actions .btn.is-disabled,
.mk-action-card__actions .pill-link.is-disabled,
.mk-action-card__actions button:disabled {
  background-color: var(--grey-800);
  border-color: var(--grey-600);
  color: var(--clr-text-muted);
  -webkit-text-fill-color: var(--clr-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.mk-action-card__actions .btn.is-confirmed,
.mk-action-card__actions button.is-confirmed:disabled {
  background: #16a34a;
  border-color: #22c55e;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  opacity: 1;
  cursor: default;
}

.mk-action-card__actions button.btn.btn--primary.is-confirmed,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:disabled,
.mk-action-card__actions button.btn.btn--primary.is-confirmed[disabled],
.mk-action-card__actions button.btn.btn--primary.is-confirmed:hover,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:focus,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:active,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:disabled:hover,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:disabled:focus,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:disabled:active,
.mk-action-card__actions button.btn.btn--primary.is-confirmed[disabled]:hover,
.mk-action-card__actions button.btn.btn--primary.is-confirmed[disabled]:focus,
.mk-action-card__actions button.btn.btn--primary.is-confirmed[disabled]:active {
  background: #16a34a !important;
  background-color: #16a34a !important;
  background-image: none !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  cursor: default !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none;
}

.mk-action-card__actions button.btn.btn--primary.is-confirmed .material-icons-outlined,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:hover .material-icons-outlined,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:focus .material-icons-outlined,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:active .material-icons-outlined,
.mk-action-card__actions button.btn.btn--primary.is-confirmed:disabled:hover .material-icons-outlined {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mk-inline-form {
  margin: 0;
}

.mk-dashboard-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mk-dashboard-empty strong {
  color: var(--clr-text);
}

.mk-market-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mk-market-modal__intro {
  display: grid;
  gap: 7px;
}

.mk-market-modal__eyebrow {
  color: var(--clr-text-muted);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.mk-market-modal__title {
  margin: 0;
  color: var(--clr-text);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
}

.mk-market-modal__sub {
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.mk-modal-asset-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mk-modal-asset-summary__item {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.mk-modal-asset-summary__label {
  color: var(--clr-text-muted);
  font-size: var(--fs-100);
  line-height: 1.3;
}

.mk-modal-asset-summary__value {
  color: var(--clr-text);
  font-size: var(--fs-200);
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.mk-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mk-choice-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  cursor: pointer;
}

.mk-choice-card:hover {
  background: rgba(255,255,255,0.06);
}

.mk-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mk-choice-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-text);
  font-weight: 900;
  line-height: 1.3;
}

.mk-choice-card__top .material-icons-outlined {
  font-size: 20px;
}

.mk-choice-card__copy {
  color: var(--clr-text-muted);
  font-size: var(--fs-100);
  line-height: 1.45;
}

.mk-choice-card:has(input:checked) {
  border-color: var(--clr-accent, #ffffff);
  background: rgba(255,255,255,0.08);
}

.mk-modal-field-panel {
  display: none;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.mk-modal-field-panel.is-active {
  display: grid;
}

.mk-modal-field-panel__head {
  display: grid;
  gap: 4px;
}

.mk-modal-field-panel__head h4 {
  margin: 0;
  color: var(--clr-text);
  font-size: var(--fs-300);
  line-height: 1.3;
  font-weight: 900;
}

.mk-modal-field-panel__head p {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

.mk-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mk-price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mk-price-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mk-field {
  display: grid;
  gap: 7px;
}

.mk-field label,
.mk-field__label {
  color: var(--clr-text);
  font-size: var(--fs-300);
  line-height: 1.35;
  font-weight: 800;
}

.mk-field small {
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.35;
}

.mk-field input,
.mk-field select,
.mk-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--clr-text);
  min-height: 42px;
  padding: 10px 12px;
  outline: 0;
  font: inherit;
}

.mk-field textarea {
  min-height: 92px;
  resize: vertical;
}

.mk-price-field[hidden] {
  display: none !important;
}

.mk-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.mk-modal__actions .btn,
.mk-modal__actions .pill-link {
  justify-content: center;
}

.mk-modal__note {
  color: var(--clr-text-muted);
  font-size: var(--fs-100);
  line-height: 1.5;
}

@media (max-width: 1280px) {
  .mk-action-card__main {
    grid-template-columns: minmax(200px, 0.75fr) minmax(340px, 1.25fr);
  }

  .mk-action-card__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .mk-action-card {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  .mk-action-card__image {
    width: 96px;
    height: 96px;
    min-width: 0;
    min-height: 0;
    align-self: start;
  }

  .mk-action-card__main {
    grid-template-columns: minmax(220px, 0.8fr) minmax(340px, 1.2fr);
    grid-template-rows: auto auto;
  }

  .mk-action-card__head {
    grid-column: 1;
    grid-row: 1;
  }

  .mk-action-card__flags {
    grid-column: 1;
    grid-row: 2;
  }

  .mk-action-card__details {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mk-action-card__actions {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: end;
    justify-self: end;
  }

  .mk-action-card__actions .btn,
  .mk-action-card__actions .pill-link {
    width: auto;
  }

  .mk-price-grid,
  .mk-price-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mk-action-card__main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .mk-action-card__head,
  .mk-action-card__flags,
  .mk-action-card__details {
    grid-column: 1;
    grid-row: auto;
  }

  .mk-action-card__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .mk-choice-grid,
  .mk-modal-asset-summary {
    grid-template-columns: 1fr;
  }

  .mk-action-card__details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mk-dashboard-actions {
    justify-content: flex-start;
  }

  .mk-priority-note {
    grid-template-columns: 1fr;
  }

  .mk-action-card {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 18px;
  }

  .mk-action-card__image {
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    align-self: auto;
    justify-self: start;
  }

  .mk-action-card__main {
    grid-template-columns: 1fr;
  }

  .mk-action-card__details {
    grid-template-columns: 1fr;
  }

  .mk-action-card__actions {
    flex-direction: column;
    align-self: auto;
    justify-self: stretch;
    width: 100%;
  }

  .mk-action-card__actions .btn,
  .mk-action-card__actions .pill-link {
    width: 100%;
  }

  .mk-field-grid,
  .mk-price-grid,
  .mk-price-grid--three {
    grid-template-columns: 1fr;
  }

  .mk-modal__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mk-modal__actions .btn,
  .mk-modal__actions .pill-link {
    width: 100%;
  }

  .mk-dashboard-empty {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ======================================================================
   MY LISTINGS
   ====================================================================== */

   .mk-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mk-dashboard-kpi {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 12px;
  min-height: 132px;
}

.mk-dashboard-kpi__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mk-dashboard-kpi__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: var(--clr-primary);
  flex: 0 0 auto;
}

.mk-dashboard-kpi__label {
  color: var(--clr-text-muted);
  font-size: var(--fs-300);
  line-height: 1.4;
  margin: 0;
}

.mk-dashboard-kpi__value {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--clr-text);
  margin: 0;
}

.mk-dashboard-kpi__foot {
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.5;
  margin: 0;
}

.mk-listings-list {
  --listings-grid:
    minmax(0, .6fr)
    minmax(130px, .55fr)
    minmax(130px, .55fr)
    minmax(620px, 1.9fr)
    minmax(280px, .85fr);

  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}


.mk-listings-list__head {
  padding: 0 14px 4px;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.3;
  font-weight: 700;
}

.mk-listings-list__head .is-right {
  text-align: right;
}

.mk-listings-row {
  min-height: 96px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.mk-listings-cell {
  min-width: 0;
  max-width: 100%;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mk-listings-cell--listing {
  display: grid;
  gap: 6px;
  color: var(--clr-text);
}

.mk-listings-title {
  color: var(--clr-text);
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mk-listings-title:hover {
  text-decoration: underline;
}

.mk-listings-title.is-static:hover {
  text-decoration: none;
}

.mk-listings-cell--status {
  justify-self: start;
}

.mk-listings-cell--action {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.mk-listings-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
}

.mk-listings-actions .pill-link {
  white-space: nowrap;
  flex: 0 0 auto;
}

.mk-listings-mini-grid {
  display: grid;
  gap: 12px;
  width: 100%;
}

.mk-listings-mini-grid--metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mk-listings-mini-item {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.mk-listings-mini-label {
  display: block;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.25;
  margin-bottom: 6px;
  white-space: nowrap;
  text-align: center;
}

.mk-listings-mini-value {
  display: block;
  color: var(--clr-text);
  font-size: var(--fs-200);
  line-height: 1.25;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.mk-listings-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  margin-top: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
}

@media (max-width: 1280px) {
  .mk-listings-list {
    --listings-grid:
      minmax(0, 1.15fr)
      minmax(125px, .55fr)
      minmax(125px, .55fr)
      minmax(560px, 1.6fr)
      minmax(260px, .85fr);
  }

  .mk-listings-cell--action {
    justify-self: end;
  }

  .mk-listings-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

@media (max-width: 1180px) {
  .mk-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-listings-list__head {
    display: none;
  }

  .mk-listings-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mk-listings-cell {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .mk-listings-cell::before {
    content: attr(data-label);
    color: var(--clr-text-muted);
    font-weight: 700;
  }

  .mk-listings-cell--listing {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mk-listings-cell--listing::before,
  .mk-listings-cell--action::before {
    display: none;
  }

  .mk-listings-cell--status,
  .mk-listings-cell--action {
    justify-self: start;
  }

  .mk-listings-cell--action {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .mk-listings-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .mk-listings-mini-grid--metrics {
    grid-template-columns: repeat(6, minmax(84px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 720px) {
  .mk-dashboard-kpis {
    grid-template-columns: 1fr;
  }

  .mk-listings-cell {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mk-listings-mini-grid--metrics {
    grid-template-columns: repeat(6, minmax(92px, 1fr));
  }
}


/* ======================================================================
   PARTNER DASHBOARD
   ====================================================================== */


.mk-dashboard-intro {
  display: grid;
  gap: 10px;
}

.mk-dashboard-intro p {
  margin: 0 0 30px 0;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.mk-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.mk-assets-board {
  display: grid;
  gap: 18px;
  width: 100%;
}

.mk-assets-board__summary {
  display: flex;
  justify-content: flex-start;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.4;
}

.mk-assets-board__summary span {
  display: inline;
}

.mk-assets-board__summary strong {
  color: var(--clr-text);
  font-weight: 800;
}

.mk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mk-asset-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.mk-asset-controls__left {
  flex: 1 1 auto;
  min-width: 0;
}

.mk-asset-controls__right {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.mk-asset-search {
  position: relative;
  display: block;
  width: 100%;
}

.mk-asset-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 44px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--clr-text);
  outline: 0;
}

.mk-asset-search input::placeholder {
  color: var(--clr-text-muted);
}

.mk-asset-search .material-icons-outlined {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--clr-text-muted);
  pointer-events: none;
}

.mk-filter-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  background: var(--clr-accent, #ffffff);
  color: #111111;
}

.mk-asset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mk-chip {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--clr-text);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 11px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-100);
  line-height: 1;
}

.mk-chip .material-icons-outlined {
  font-size: 16px;
}

.mk-chip:hover {
  background: rgba(255,255,255,0.08);
}

.mk-flyout-open {
  overflow: hidden;
}

.mk-flyout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.56);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mk-flyout-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mk-flyout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  width: min(430px, calc(100vw - 24px));
  background: var(--clr-surface, #111111);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -24px 0 60px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.mk-flyout.is-open {
  transform: translateX(0);
}

.mk-flyout__head {
  min-height: 72px;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mk-flyout__title {
  color: var(--clr-text);
  font-size: var(--fs-500);
  font-weight: 800;
  line-height: 1.2;
}

.mk-flyout__body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 20px;
  align-content: start;
}

.mk-flyout__foot {
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mk-filter-group {
  display: grid;
  gap: 12px;
}

.mk-filter-group__title {
  color: var(--clr-text);
  font-size: var(--fs-200);
  font-weight: 800;
  line-height: 1.3;
}

.mk-filter-group__list {
  display: grid;
  gap: 8px;
}

.mk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--clr-text);
  cursor: pointer;
}

.mk-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--clr-accent, #ffffff);
}

.mk-check span {
  font-size: var(--fs-200);
  line-height: 1.3;
}

.mk-check:hover {
  background: rgba(255,255,255,0.055);
}

.mk-asset-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.mk-asset-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.mk-asset-card__image {
  position: relative;
  min-height: 170px;
  height: 230px;
  background: #222222;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-asset-card__image img {
  width: 80%;
  height: 80%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.mk-asset-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.82);
  background: #222222;
}

.mk-asset-card__placeholder .material-icons-outlined {
  font-size: 58px;
}

.mk-asset-card__body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.mk-asset-card__head {
  display: grid;
  gap: 8px;
}

.mk-asset-card__title {
  margin: 20px 0;
  color: var(--clr-text);
  font-size: var(--fs-500);
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.mk-asset-card__title a {
  color: inherit;
  text-decoration: none;
}

.mk-asset-card__title a:hover {
  text-decoration: underline;
}

.mk-asset-card__serial {
  margin: -14px 0 18px 0;
  color: var(--clr-text-muted);
  font-size: var(--fs-200);
  line-height: 1.35;
}

.mk-asset-card__serial strong {
  color: var(--clr-text);
  font-weight: 700;
}

.mk-asset-services {
  display: grid;
  gap: 10px;
}

.mk-asset-service {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.mk-asset-service--muted {
  opacity: 0.9;
}

.mk-asset-service__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mk-asset-service__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--clr-text);
  font-size: var(--fs-200);
  font-weight: 800;
  line-height: 1.25;
}

.mk-asset-service__title .material-icons-outlined {
  font-size: 19px;
  opacity: .86;
}

.mk-asset-service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mk-asset-service__actions .pill-link {
  white-space: nowrap;
}

.mk-asset-service__actions .pill-link.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mk-dashboard-empty {
  width: 100%;
  max-width: none;
  min-height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: var(--clr-text-muted);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 1500px) {
  .mk-asset-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .mk-asset-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mk-dashboard-actions {
    justify-content: flex-start;
  }

  .mk-assets-board__summary {
    justify-content: flex-start;
  }

  .mk-asset-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .mk-asset-controls__right {
    width: 100%;
    flex-wrap: wrap;
  }

  .mk-asset-card-grid {
    grid-template-columns: 1fr;
  }

  .mk-dashboard-empty {
    align-items: flex-start;
    flex-direction: column;
  }

  .mk-flyout__foot {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .mk-flyout__foot .btn,
  .mk-flyout__foot .pill-link {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================================
   SUBNAV: ICONS + BADGES
   ====================================================================== */

.subnav-icon-wrap{
  position:relative;
  display:inline-flex;
}

.subnav-badge{
  position:absolute;
  top:-6px;
  right:-7px;
  width:16px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  background: var(--clr-primary);
  color:var(--clr-text);
  font-size:10px;
  font-weight:300;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}


/* ======================================================================
   SUBNAV: BUYER / PARTNER MODE TOGGLE
   Lives in .subnav-actions on both navs
   ====================================================================== */

.subnav-mode{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.subnav-mode .subnav-link{
  padding: 8px 10px;
  border-radius: 999px;
  opacity: 0.85;
  white-space: nowrap;
}

.subnav-mode .subnav-link:hover{
  opacity: 1;
}

.subnav-mode .subnav-link.is-active{
  opacity: 1;
  background: var(--clr-primary);
  border: 1px solid rgba(255,255,255,0.14);
}

.subnav-mode .material-icons-outlined{
  font-size: 18px;
}

.subnav-mode .subnav-link.is-active .material-icons-outlined{
  color: var(--clr-text);
}


/* ======================================================================
   DASH: WRAPPER + HERO
   ====================================================================== */

.dash-wrap{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--container-gutter) var(--sp-12);
}

.dash-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--sp-6);
}

.dash-hero h1{ margin:0; font-size: var(--fs-600); }
.dash-hero-sub{ margin: 8px 0 0; color: var(--clr-text); }
.dash-hero-company{ display:inline-block; margin-left:10px; opacity:0.85; }

.dash-hero-actions{
  display:flex;
  gap: var(--sp-3);
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dash-hero-actions .btn{ min-width: 0; }


/* ======================================================================
   DASH: GRID + SPANS
   ====================================================================== */

.dash-grid{
  margin-top: var(--sp-6);
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}

/* Card spans */
.span-12{ grid-column: span 12; }
.span-8{ grid-column: span 8; }
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }


/* ======================================================================
   DASH: CARDS (BASE)
   ====================================================================== */

.dash-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.dash-card .card-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in oklab, var(--grey-900) 65%, transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dash-card .card-bar .left{
  display:flex;
  align-items:center;
  gap: var(--sp-2);
  min-width: 0;
}

.dash-card .card-bar .left .material-icons-outlined{
  color: var(--clr-primary);
}

.dash-card .card-bar .title{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  margin:0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-card .card-body{
  padding: var(--sp-5);
  display:flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
  flex: 1 1 auto; /* helps cards fill vertically */
}


/* ======================================================================
   DASH: KPI CARDS
   ====================================================================== */

.kpi-card{ grid-column: span 3; }


.kpi-value{
  font-family: var(--ff-heading);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  color: var(--clr-primary);
  margin: 0;
}

.kpi-label{
  margin-top: 6px;
  color: var(--clr-text);
  font-size: var(--fs-300);
}

/* KPI numbers behave like links */
.kpi-link{
  display:inline-block;
  color: var(--clr-primary);
  text-decoration: none;
}
.kpi-link .kpi-value{ color: inherit; }
.kpi-link:hover .kpi-value{ color:var(--clr-text) !important; }
.kpi-link:hover{ color:var(--clr-text) !important; text-decoration:none; }
.kpi-link:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ======================================================================
   DASH: MUTED TEXT / NOTES
   ====================================================================== */

.dash-muted{
  color: var(--clr-text);
  font-size: var(--fs-300);
}

.dash-muted.is-table-note{
  margin-top: 10px;
}


/* ======================================================================
   DASH: MINI LIST (ROW-STYLE)
   ====================================================================== */

.mini{
  display:grid;
  gap: var(--sp-2);
  width: 100%;
}

.mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.mini-row:first-child{ border-top: 0; padding-top: 0; }

.mini-left{ min-width:0; }

.mini-title{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-title a{ text-decoration:none; }
.mini-title a:hover{ text-decoration: underline; }

.mini-meta{ color: var(--clr-text); font-size: var(--fs-300); margin-top: 2px; }


/* ======================================================================
   PILLS + BUTTON UTILS
   ====================================================================== */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.15);
  font-size: var(--fs-100);
  white-space: nowrap;
}

.pill.is-new{ border-color: color-mix(in oklab, var(--clr-primary) 60%, var(--clr-text) 0%); }
.pill.is-open{ border-color: rgba(255,255,255,0.22); }
.pill.is-closed{ border-color: color-mix(in oklab, var(--clr-success) 65%, transparent); }

.btn-full{ width:100%; min-width:0; }


/* ======================================================================
   TOP CARD (FEATURED CONTENT)
   ====================================================================== */

.top-card{ display:grid; gap: 8px; }

.top-card-kicker{
  color: var(--clr-text);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.top-card-title{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  line-height: 1.15;
}
.top-card-title a{ text-decoration:none; }
.top-card-title a:hover{ text-decoration: underline; }

.top-card-actions{ margin-top: var(--sp-4); }


/* ======================================================================
   ACCOUNT GRID (PROFILE / SETTINGS-STYLE)
   ====================================================================== */

.acct-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}


.acct-label{ color: var(--clr-text); font-size: var(--fs-100); }


/* ======================================================================
   TABLES: GENERIC WRAP
   ====================================================================== */

.dash-table-wrap{
  display: block;
  width: 100%;
  max-width: none;
}


/* ======================================================================
   DASHBOARD MINI TABLES (SCOPED)
   ====================================================================== */

.mini-table-wrap{ width:100%; overflow:auto; }

.mini-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 720px;
}

.mini-table th,
.mini-table td{
  padding: 12px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.mini-table thead th{
  font-weight: 600;
  opacity: 0.9;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  text-align: left;
}

.mini-table td.is-title{
  white-space: normal;
  min-width: 260px;
}
.mini-table td.is-title a{ text-decoration: none; }

.mini-table td.is-muted{ opacity: 0.85; }

.mini-table td.is-right,
.mini-table th.is-right{ text-align: right; }

.mini-table td.is-center,
.mini-table th.is-center{ text-align: center; }

.mini-table .pill-link--btn{ white-space: nowrap; }

/* Make tables feel like rows, not boxed chunks */
.dash-card .card-body{ padding-top: 10px; }


/* ======================================================================
   FILTERS / CONTROLS (LISTINGS + RESULTS CARD)
   ====================================================================== */

/* Filters layout inside the results card */
.dash-filters{ width:100%; }

.listings-controls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  width:100%;
}

.listings-controls-left{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  flex:1;
}

/* Wider inputs */
.ctrl--search{ flex: 2 1 420px; }
.ctrl--type{ flex: 1 1 220px; }
.ctrl--status{ flex: 1 1 240px; }
.ctrl--location{ flex: 1 1 240px; }

.ctrl input,
.ctrl select{ width:100%; }

/* Apply/Clear pinned right */
.listings-actions-bar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
  white-space:nowrap;
}

.listings-count{
  opacity:0.85;
    font-size: var(--fs-300);;
}

/* Status cell layout: flag + edit link */
.status-cell{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}


/* ======================================================================
   DASHBOARD GRAPHS: PANEL-LEVEL LAYOUT (2-UP)
   Update: make each graph 50% width (views + sales cards)
   ====================================================================== */

/* Force the two graph cards to split the row evenly */
.dash-grid > .dash-card.span-8,
.dash-grid > .dash-card.span-4{
  grid-column: span 6; /* 50% each on a 12-col grid */
}


/* ======================================================================
   DASHBOARD GRAPHS: INTERNAL LAYOUT (PLOT + LEGEND)
   ====================================================================== */

.dash-graph-row{
  display: grid;
  grid-template-columns: 4fr 1fr; /* graph 4× legend */
  gap: var(--sp-4);
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}


.dash-graph-wrap,
.dash-graph-legend{
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dash-graph-wrap{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
}

/* SVG fill */
.dash-graph-wrap svg{
  width: 100%;
  height: 100%;
  display:block;
}

/* Simple load states */
.dash-graph-wrap.is-prep svg{ opacity: 0; transform: translateY(4px); }
.dash-graph-wrap.is-ready svg{ opacity: 1; transform: translateY(0); transition: opacity 260ms ease, transform 260ms ease; }

/* Empty state */
.dash-graph-wrap.is-empty{
  height: 90px;
  padding: 16px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dash-graph-empty-msg{
  font-size: var(--fs-300);
  opacity: 0.75;
  font-style: italic;
  text-align: center;
}


/* ======================================================================
   DASHBOARD GRAPHS: LEGEND
   ====================================================================== */

.dash-graph-legend{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 10px;
  min-width: 0;
}

.dash-legend-title{ font-size: var(--fs-300); opacity: 0.8; margin-bottom: 2px; }

.dash-legend-item{ display:flex; align-items:center; gap: 10px; min-width:0; }

.dash-legend-swatch{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.22);
  background: var(--clr-primary);
}

.dash-legend-text{
  font-size: var(--fs-300);
  opacity: 0.92;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dash-legend-meta{
  display:grid;
  gap: 8px;
  margin-top: 6px;
}

.dash-legend-kv{
  display:flex;
  justify-content:space-between;
  gap: var(--sp-3);
  font-size: var(--fs-300);
  opacity: 0.92;
}

.dash-legend-kv .k{ opacity: 0.7; }

.dash-legend-kv .v{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align:right;
  min-width: 0;
}


/* ======================================================================
   DASHBOARD GRAPHS: AXES + GRIDLINES
   ====================================================================== */

.dash-axis-text{ font-size: var(--fs-200); fill: rgba(255,255,255,0.70); }
.dash-axis-text-strong{ fill: rgba(255,255,255,0.86); }
.dash-axis-line{ stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.dash-grid-line{ stroke: rgba(255,255,255,0.06); stroke-width: 1; }


/* ======================================================================
   DASHBOARD GRAPHS: TOOLTIP
   ====================================================================== */

.dash-graph-tooltip{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);
  background: var(--clr-text-dark);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: var(--fs-300);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  box-shadow: var(--card-shadow);
  white-space: nowrap;
  z-index: 999999;
}

.dash-graph-tooltip.is-on{ opacity: 1; }

.dash-tt-title{ font-size: var(--fs-300); opacity: 0.9; margin-bottom: 4px; }
.dash-tt-row{ display:flex; align-items:center; gap: 8px; font-size: var(--fs-300); opacity: 0.95; }

.dash-tt-dot{
  width: 9px;
  height: 9px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.22);
  flex: 0 0 auto;
  background: var(--clr-primary);
}


/* ======================================================================
   GRAPH SWATCH HELPERS
   ====================================================================== */

/* Optional: if your global CSS doesn't already handle these */
.dash-swatch--primary{ background: var(--clr-primary); }
.dash-swatch--teal{ background: #4ad7d1; }

/* Teal swatch for quotes */
.dash-legend-swatch.dash-swatch--teal{ background: #4ad7d1; }

.dash-tt-dot.is-primary { background: var(--clr-primary); }
.dash-tt-dot.is-teal { background: #4ad7d1; }


/* ======================================================================
   GRAPH CARD HEIGHT CONSISTENCY
   ====================================================================== */

/* Optional: if your sales chart is still shorter, force a consistent graph height */
.dash-card [data-dash-graph="sales30"],
.dash-card [data-dash-graph="views30"]{
  min-height: 280px;
}


/* ======================================================================
   DASH: FILTER / CONTROL ROW (REUSABLE)
   Use on: quotes, listings, saved listings, offer-ups, etc.
   Pattern: left controls + right actions pinned to edge
   ====================================================================== */

/* Row wrapper */
.dash-controls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  width:100%;
}

/* Left side: inputs */
.dash-controls-left{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  flex:1;
}

/* Ensure controls fill their flex columns */
.ctrl input,
.ctrl select{ width:100%; }

/* Right side: actions (Apply/Clear etc) */
.dash-controls-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
  white-space:nowrap;
}


/* ======================================================================
   DASH: CONTROL WIDTH HELPERS (REUSABLE)
   Add these alongside .ctrl on the individual control wrapper:
   e.g. <div class="ctrl ctrl--search">...</div>
   ====================================================================== */

.ctrl--search{ flex: 2 1 420px; }
.ctrl--status{ flex: 1 1 240px; }


/* ======================================================================
   DASH: TABLE ACTION PILLS (REUSABLE)
   ====================================================================== */

.dash-row-actions{
  display:inline-flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  white-space:nowrap;
}


/* ======================================================================
   DASH: COUNT / META TEXT (REUSABLE)
   ====================================================================== */

.dash-count{
  opacity:0.85;
    font-size: var(--fs-300);;
}


/* ======================================================================
   TABLE: TITLE CELL (REUSABLE HELPER)
   If your global table CSS supports .is-title already, keep it there instead.
   ====================================================================== */

.table td.is-title{
  white-space: normal;
}


/* ======================================================================
   ARTICLE PAGE
   ====================================================================== */
html, body{ background:var(--clr-bg); }
body.marketplace_body{ background:var(--clr-bg); }

/* -------------------------------------------------------
   PAGE WRAPPER
------------------------------------------------------- */
.mk-article-page{
  padding: 0; /* hero controls top spacing */
}

/* Back link (base) */
.mk-article-page__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 0 0 20px 0;
}

/* -------------------------------------------------------
   FULL-WIDTH HERO (NEW MARKUP: .mk-article-hero)
   Full width background, inner content constrained by .mk-container
------------------------------------------------------- */
.mk-article-hero{
  position: relative;
  width: 100%;
  background: rgba(0,0,0,0.22); /* slightly darker than var(--clr-bg) */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-section) 0;
  overflow: hidden;
}

/* Subtle sheen / depth */
.mk-article-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,0.03), transparent 55%);
  pointer-events:none;
}

/* Ensure hero content sits above sheen */
.mk-article-hero .mk-container{
  position: relative;
  z-index: 1;
}


/* -------------------------------------------------------
   HEADER (inside hero)
------------------------------------------------------- */
.mk-article-header{
  margin: 0; /* hero provides spacing */
}

.mk-article-header__top{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-4);
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* LEFT: META */
.mk-article-header__meta{
  padding: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
}

.mk-article-header__meta-line{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size: var(--fs-300);
  color: var(--clr-text-muted);
}

.mk-article-header__intro{
  margin: 2px 0 0;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: var(--clr-text);
  max-width: 60ch;
}

/* RIGHT: MEDIA */
.mk-article-header__media{
  position:relative;
  width:100%;
  background:var(--grey-900);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

.mk-article-header__media img,
.mk-article-header__media video{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
}

/* -------------------------------------------------------
   BODY SECTION (inside container after hero)
------------------------------------------------------- */
.mk-article-divider{
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.10);
  margin: clamp(18px, 2.2vw, 26px) 0;
}

.mk-article-body{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(18px, 2.4vw, 30px);
  align-items:start;
  margin-bottom: 80px;
}

.mk-article-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: clamp(18px, 2.2vw, 26px);
}

.mk-article-content{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.mk-article-content h3{
  margin-top:22px;
  color:var(--clr-text);
}

.mk-article-content p,
.mk-article-content li{
  font-size:var(--fs-300);
  line-height:1.75;
  color: rgba(255,255,255,0.82);
}

.mk-article-content ul{
  margin:12px 0 0 18px;
}

.mk-article-content figure.mk-article-figure{
  margin: 18px 0;
  padding: 0;
}

.mk-article-content figure.mk-article-figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}

.mk-article-content figure.mk-article-figure figcaption{
  margin-top: 10px;
  font-size: var(--fs-300);
  color: rgba(255,255,255,0.62);
}

/* Actions */
.mk-copy__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* -------------------------------------------------------
   RELATED: STICKY RIGHT COLUMN (RELIABLE)
   Sticky the ASIDE (works better inside grid)
------------------------------------------------------- */
.mk-article-aside{
  position: -webkit-sticky;
  position: sticky;
  top: 98px;          /* fixed header/subnav total height */
  align-self: start;  /* important for grid */
  min-width: 0;
}

/* Inner panel styles */
.mk-related{
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.10);
}


.mk-related__list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.mk-related__item{
  display:flex;
  flex-direction:column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mk-related__item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.mk-related__link{
  display:inline-flex;
  align-items:flex-start;
  gap: 10px;
  text-decoration: none;
}

.mk-related__link:hover .mk-related__name{ color:var(--clr-text); }

.mk-related__name{
  font-size: var(--fs-300);
  line-height: 1.35;
  color: rgba(255,255,255,0.86);
}

.mk-related__meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  font-size: var(--fs-300);
  color: rgba(255,255,255,0.62);
}

.mk-related__dot{ opacity: 0.6; }

.mk-article-share .pill-link{

margin: 20px 20px 0 0;

}

/* -------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */


/* -------------------------------------------------------
   ARTICLE CTA (post-read section)
------------------------------------------------------- */

.mk-article-cta{
  margin-top: clamp(36px,4vw,56px);
  padding-top: clamp(24px,3vw,32px);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mk-article-cta__inner{
  max-width: 720px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mk-article-cta__title{
  margin:0;
  font-size: clamp(20px,2.2vw,24px);
  color:var(--clr-text);
}

.mk-article-cta__text{
  margin:0;
  font-size:var(--fs-300);
  line-height:1.7;
  color: var(--clr-text);
}

.mk-article-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}


/* ======================================================================
   QUOTE REQUEST MODAL
   ====================================================================== */


/* ---------- Offer legal gate ---------- */
#quoteRequestModal .mk-action__legal{
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

#quoteRequestModal .mk-action__legal-title{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
  line-height: 1.1;
}

#quoteRequestModal .mk-action__legal-sub{
  color: var(--clr-text);
  font-size: var(--fs-300);
}

#quoteRequestModal .mk-action__legal-list{
  list-style: none;
  margin: 0;
  padding: 20px 0;
  display: grid;
  gap: var(--sp-5);
  color: var(--clr-text);
  font-size: var(--fs-300);
}

#quoteRequestModal .mk-action__legal-list li{
  position: relative;
  padding-left: 40px;
}

#quoteRequestModal .mk-action__legal-list li::before{
  content: "check";
  font-family: "Material Icons Outlined";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--clr-bg);
  color: var(--clr-primary);
  font-size: 18px;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ---------- Quote prices block ---------- */
#quoteRequestModal .mk-quote-prices{
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

#quoteRequestModal .mk-quote-price{
  padding: var(--sp-4);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 8px;
}

#quoteRequestModal .mk-quote-price__label{
  font-size: var(--fs-300);
  color: var(--clr-text);
  line-height: 1.2;
}

#quoteRequestModal .mk-quote-price__value{
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
  line-height: 1.05;
}

#quoteRequestModal .mk-quote-price__asterisk{
  display: inline-block;
  margin-left: 4px;
  color: var(--clr-primary);
  font-weight: 700;
}

#quoteRequestModal .mk-quote-prices__note{
  grid-column: 1 / -1;
  font-size: var(--fs-300);
  color: var(--clr-text);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

#quoteRequestModal .mk-quote-prices--done{
  margin-top: var(--sp-3);
}


/* --- keep the rest of your existing modal styles below unchanged --- */
#quoteRequestModal.mk-modal[hidden]{ display:none; }
#quoteRequestModal.mk-modal{ z-index: 999999; }
body.mk-modal-open{ overflow:hidden; }

#quoteRequestModal.mk-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}

#quoteRequestModal .mk-modal__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.9);
}

#quoteRequestModal .mk-modal__panel{
  position: relative;
  z-index: 1;
  width: min(740px, 92vw);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  outline: none;
}

#quoteRequestModal .mk-modal__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6);
  background: color-mix(in oklab, var(--grey-900) 65%, transparent);
  border-bottom: 1px solid var(--clr-border);
}

#quoteRequestModal .mk-modal__bar-left{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

#quoteRequestModal .mk-modal__bar-left .material-icons-outlined{
  color: var(--clr-primary);
  font-size: 30px;
}

#quoteRequestModal .mk-modal__bar-title{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
}

#quoteRequestModal .mk-modal__body{
  padding: var(--sp-10);
  display: grid;
  gap: var(--sp-6);
}

#quoteRequestModal [hidden]{ display: none !important; }

#quoteRequestModal .mk-action{
  display: grid;
  gap: var(--sp-5);
  width: 100%;
  margin: 0 auto;
}

#quoteRequestModal .mk-modal__actions{
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

#quoteRequestModal .mk-modal__actions .btn{ min-width: 0; }

#quoteRequestModal .mk-modal__note{
  font-size: var(--fs-300);
  color: var(--clr-text);
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-4);
}

#quoteRequestModal .mk-modal__close{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
}

#quoteRequestModal .mk-modal__close .material-icons-outlined{ font-size: 20px; }

/* ---------- Confirm copy block ---------- */
#quoteRequestModal .mk-action__copy{
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

#quoteRequestModal .mk-action__copy-sub{
  color: var(--clr-text);
  font-size: var(--fs-300);
}

/* ---------- Done block ---------- */
#quoteRequestModal .mk-action__done{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

#quoteRequestModal .mk-action__icon{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

#quoteRequestModal .mk-action__icon .material-icons-outlined{
  color: var(--clr-primary);
  font-size: 26px;
}

#quoteRequestModal .mk-action__done-value{
  font-family: var(--ff-heading);
  font-size: var(--fs-500);
  line-height: 1.05;
}

#quoteRequestModal .mk-action__done-sub{
  margin-top: 6px;
  color: var(--clr-text);
  font-size: var(--fs-300);
}

/* $ inside the field, but only show when active (match edit-listing-modal.php) */
#quoteRequestModal .money-wrap{
  position: relative;
}


/* keep global field styling, just add left padding for the $ */
#quoteRequestModal .money-input{
  padding-left: 30px;
  position: relative;
  z-index: 1;
}

/* currency symbol */
#quoteRequestModal .money-wrap::before{
  content: attr(data-currency);
  position: absolute;
  left: 12px;
  top: 58%;
  transform: translateY(-50%);
  color: var(--clr-text);
  font-size: var(--fs-300);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 2;
}

#quoteRequestModal .money-wrap.is-active::before{ opacity: 1; }

#quoteRequestModal .money-input:disabled{ opacity: 0.75; }

/* Offer input block should be a card (label + field + hint + error) */
#quoteRequestModal .mk-action__field{
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Make sure the label/hint/error sit correctly inside the block */
#quoteRequestModal .mk-action__field .mk-field__label{
  margin: 0;
}

#quoteRequestModal .mk-action__field .mk-field__hint{
  margin-top: 0;
}

#quoteRequestModal .mk-action__field .mk-field__error{
  margin-top: 0;
}

/* Offer field group card (label + input + hint) */
#quoteRequestModal .mk-action__field{
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}


/* ======================================================================
   AUTH MODAL
   ====================================================================== */


.mk-auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}

.mk-auth-btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-auth-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  flex: 0 0 16px;
  animation: mkAuthBtnSpin 0.7s linear infinite;
}

.mk-auth-btn.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.mk-auth-btn.is-loading .mk-auth-btn__spinner {
  display: inline-block;
}

.mk-auth-btn:disabled,
.mk-pass-toggle:disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.mk-auth-tablink.is-disabled,
.mk-auth-switch.is-disabled,
.mk-modal__close.is-disabled,
.mk-auth-link.is-disabled,
.pill-link.is-disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}

.mk-auth-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mk-auth-marketing-opt-in {
  margin: 6px 0 20px 0;
}

@keyframes mkAuthBtnSpin {
  to {
    transform: rotate(360deg);
  }
}

.mk-auth-foot{
  margin-top: 10px;
}

.mk-modal[hidden]{ display: none; }

.mk-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}

body.mk-modal-open{
  overflow: hidden;
}

.mk-modal__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.9);
}

.mk-modal__panel{
  position: relative;
  z-index: 1;
  width: min(960px, 92vw);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  outline: none;
}

.mk-modal__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6);
  background: color-mix(in oklab, var(--grey-900) 65%, transparent);
  border-bottom: 1px solid var(--clr-border);
}

.mk-modal__bar-left{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.mk-modal__bar-left .material-icons-outlined{
  color: var(--clr-primary);
}

.mk-modal__bar-title{
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
}

.mk-modal__body{
  padding: var(--sp-10);
  display: grid;
  gap: var(--sp-5);
}

.mk-modal__lead{
  margin: 0;
  color: var(--clr-text);
  margin-bottom: 20px;
}

.mk-modal__meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.mk-modal__chip{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
}

.mk-modal__chip .material-icons-outlined{
  color: var(--clr-primary);
}

.mk-modal__actions{
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.mk-modal__actions .btn{
  min-width: 0;
}

.mk-modal__note{
  font-size: var(--fs-300);
  color: var(--clr-text);
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-4);
}

.mk-modal__layout{
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 100%;
}

.mk-modal__media{
  background:
    linear-gradient(
      to bottom right,
      rgba(0,0,0,0.25),
      var(--clr-text-dark)
    ),
    url("../images/marketplace/auth-bg.jpg") center / cover no-repeat;
}

.mk-modal__content{
  display: flex;
  flex-direction: column;
}

.mk-modal__close{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
}

.mk-modal__close .material-icons-outlined{
  font-size: 20px;
}

/* Full-width primary buttons in forms */
.mk-auth-actions--stack{
  display: grid;
  gap: var(--sp-3);
}

.mk-auth-btn{
  width: 100%;
}

/* "Forgot password" as a plain link */
.mk-auth-link{
  font-size: var(--fs-300);
  color: var(--clr-text);
  text-decoration: none;
  justify-self: start;
}

.mk-auth-link:hover{
  color: var(--clr-text);
  text-decoration: underline;
}

/* Tabs: highlight selected */
.mk-auth-tabs--bar .mk-auth-tablink{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--clr-text);
}

.mk-auth-tabs--bar .mk-auth-tablink.is-active{
  color: var(--clr-text);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--clr-primary);
}

/* ------------------------------------------------------------
   Signup form rows
   ------------------------------------------------------------ */
.mk-auth-form{
  display: grid;
  gap: 6px;
}

.mk-auth-form__row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.mk-auth-form__row .form-group{
  margin: 0;
  min-width: 0;
}

/* ------------------------------------------------------------
   Checkbox blocks in auth modal
   ------------------------------------------------------------ */
.mk-auth-form > .form-group > .checkbox{
  margin-top: 0;
}

.mk-auth-form > .form-group .field-msg{
  margin-top: 6px;
}

/* ------------------------------------------------------------
   Password toggle (eye icon inside field)
   ------------------------------------------------------------ */
.form-group.has-pass-toggle{
  position: relative;
}

.form-group.has-pass-toggle .mk-auth-input{
  padding-right: 46px;
}

.mk-pass-toggle{
  position: absolute;
  right: 10px;
  top: 40%;
  transform: translateY(-50%);
  min-width: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--clr-text);
  cursor: pointer;
  padding: 0;
}

.mk-pass-toggle:hover,
.mk-pass-toggle:active,
.mk-pass-toggle:focus,
.mk-pass-toggle:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
}

.mk-pass-toggle:hover{
  color: var(--clr-primary);
}

.mk-pass-toggle .material-icons-outlined{
  font-size: 18px;
  pointer-events: none;
}


  /* =========================================================
     1. PAGE LAYOUT - VIEW APU
     ========================================================= */


  .mk-apu-page-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap:24px;
    align-items:start;
    margin-top:30px;
  }

  .mk-apu-main{
    min-width:0;
    position:sticky;
    top:24px;
    align-self:start;
  }

  .mk-apu-side{
    min-width:0;
    position:sticky;
    top:24px;
    align-self:start;
  }

  .mk-apu-details-stack{
    display:grid;
    gap:24px;
  }

  .mk-apu-grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
  }

  .mk-apu-card{
    width:100%;
    min-width:0;
  }

  .mk-apu-pairs-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
  }

  .mk-apu-pairs-col{
    min-width:0;
  }

  .mk-apu-pairs-col .mk-apu-row:last-child{
    border-bottom:none;
  }

  .mk-apu-section{
    overflow:hidden;
  }

  /* =========================================================
     2. ACCORDIONS
     Fixes:
     - whole collapsed header is clickable
     - removes fake bottom padding on collapsed cards
     - divider only shows when open
     ========================================================= */
  .mk-click-accordion{
    cursor:pointer;
    scroll-margin-top:24px;
    padding:0;
    overflow:hidden;
  }

  .mk-click-accordion *{
    cursor:inherit;
  }

  .mk-click-accordion a,
  .mk-click-accordion button,
  .mk-click-accordion input,
  .mk-click-accordion select,
  .mk-click-accordion textarea,
  .mk-click-accordion label{
    cursor:auto;
  }

  .mk-accordion-summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    margin:0;
    padding:18px 22px;
    min-height:72px;
    user-select:none;
    box-sizing:border-box;
  }

  .mk-accordion-summary::-webkit-details-marker{
    display:none;
  }

  .mk-accordion-summary .mk-card-title{
    margin:0;
    min-width:0;
    flex:1 1 auto;
  }

  .mk-accordion__chev{
    transition:transform .2s ease;
    opacity:.8;
    flex:0 0 auto;
  }

  .mk-apu-section[open] .mk-accordion__chev{
    transform:rotate(180deg);
  }

  .mk-accordion__body{
    padding:0 22px 22px;
  }

  .mk-click-accordion .mk-apu-divider{
    display:none;
  }

  .mk-click-accordion[open] .mk-apu-divider{
    display:block;
    margin:0 22px;
  }

  /* =========================================================
     3. TABLE WRAPPERS
     ========================================================= */
  .mk-table-scroll{
    overflow-x:auto;
    width:100%;
  }

  .mk-data-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    table-layout:fixed;
      font-size: var(--fs-300);;
    color:rgba(255,255,255,0.78);
  }

  .mk-data-table th,
  .mk-data-table td{
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
    vertical-align:top;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  .mk-data-table th{
    font-weight:100;
      font-size: var(--fs-300);;
    letter-spacing:.04em;
    color:rgba(255,255,255,0.52);
    white-space:normal;
  }

  .mk-data-table td{
    white-space:normal;
    color:rgba(255,255,255,0.82);
  }

  .mk-data-table tbody tr:hover td{
    color:rgba(255,255,255,0.92);
  }

  .mk-data-table td.mk-col-tight,
  .mk-data-table th.mk-col-tight{
    white-space:nowrap;
    width:110px;
  }

  .mk-data-table th:last-child,
  .mk-data-table td:last-child{
    text-align:right;
  }

  /* =========================================================
     4. OPERATOR HISTORY TABLE COLUMN SIZING
     ========================================================= */
  .mk-operator-history-table th:nth-child(1),
  .mk-operator-history-table td:nth-child(1){
    width:34%;
    min-width:220px;
  }

  .mk-operator-history-table th:nth-child(2),
  .mk-operator-history-table td:nth-child(2),
  .mk-operator-history-table th:nth-child(3),
  .mk-operator-history-table td:nth-child(3){
    width:120px;
  }

  .mk-operator-history-table th:nth-child(4),
  .mk-operator-history-table td:nth-child(4){
    width:18%;
  }

  /* =========================================================
     5. SHOP VISITS TABLE COLUMN SIZING
     ========================================================= */
  .mk-shop-visits-table th:nth-child(1),
  .mk-shop-visits-table td:nth-child(1){
    width:18%;
    min-width:160px;
  }

  .mk-shop-visits-table th:nth-child(2),
  .mk-shop-visits-table td:nth-child(2){
    width:110px;
  }

  .mk-shop-visits-table th:nth-child(3),
  .mk-shop-visits-table td:nth-child(3){
    width:14%;
  }

  .mk-shop-visits-table th:nth-child(4),
  .mk-shop-visits-table td:nth-child(4),
  .mk-shop-visits-table th:nth-child(5),
  .mk-shop-visits-table td:nth-child(5){
    width:100px;
  }

  .mk-shop-visits-table th:nth-child(6),
  .mk-shop-visits-table td:nth-child(6){
    width:220px;
    min-width:220px;
  }

  .mk-shop-visits-table th:nth-child(7),
  .mk-shop-visits-table td:nth-child(7){
    width:130px;
  }

  /* =========================================================
     6. WORKSCOPE LIST
     ========================================================= */
  .mk-workscope{
    display:grid;
    gap:6px;
    min-width:180px;
  }

  .mk-workscope__item{
    display:flex;
    align-items:center;
    gap:8px;
    line-height:1.3;
  }

  .mk-workscope__item .material-icons-outlined{
    font-size:16px;
    flex:0 0 auto;
  }

  .mk-workscope__item.is-on .material-icons-outlined{
    color:var(--clr-primary);
  }

  .mk-workscope__item.is-off{
    opacity:.55;
  }

  .mk-workscope__item.is-off .material-icons-outlined{
    color:rgba(255,255,255,0.42);
  }

  /* =========================================================
     7. TIMELINE CARD + WRAPPER
     ========================================================= */
  .mk-timeline-card{
    overflow:hidden;
  }

  .mk-timeline-wrap{
    position:relative;
    padding:12px 0 4px;
    min-height:320px;
  }

  .mk-timeline-list{
    display:flex;
    flex-direction:column-reverse;
    gap:18px;
    position:relative;
  }

  .mk-timeline-list::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:var(--clr-primary);
    border-radius:999px;
  }

  .mk-timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 34px minmax(0, 1fr);
    gap:12px;
    align-items:start;
    min-height:70px;
  }

  .mk-timeline-empty,
  .mk-timeline-dot,
  .mk-timeline-card-box{
    grid-row:1;
  }

  .mk-timeline-empty{
    min-height:1px;
  }

  /* =========================================================
     8. TIMELINE LEFT / RIGHT BOX POSITIONING
     ========================================================= */
  .mk-timeline-card-box--left{
    grid-column:1;
    justify-self:stretch;
    text-align:center;
  }

  .mk-timeline-card-box--right{
    grid-column:3;
    justify-self:stretch;
    text-align:center;
  }

  /* =========================================================
     9. TIMELINE DOT + HOVER PULSE
     ========================================================= */
  .mk-timeline-dot{
    grid-column:2;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--clr-primary);
    border:3px solid var(--clr-primary);
    margin:10px auto 0;
    position:relative;
    z-index:2;
    box-shadow:0 0 0 4px rgba(0,0,0,0.16);
    align-self:start;
    transition:transform .22s ease, box-shadow .22s ease;
  }

  .mk-timeline-dot::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:4px solid var(--clr-primary);
    opacity:0;
    transform:scale(.75);
    transition:transform .28s ease, opacity .28s ease;
  }

  .mk-timeline-item:hover .mk-timeline-dot{
    transform:scale(1.22);
    box-shadow:0 0 0 6px rgba(0,0,0,0.16);
  }

  .mk-timeline-item:hover .mk-timeline-dot::after{
    opacity:.35;
    transform:scale(1.15);
  }

  /* =========================================================
     10. TIMELINE CONTENT BOXES
     ========================================================= */
  .mk-timeline-card-box{
    border:1px solid rgba(255,255,255,0.08);
    background:var(--clr-bg);
    border-radius:14px;
    padding:18px 22px;
    min-height:64px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    align-self:start;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    will-change:transform;
  }

  .mk-timeline-card-box:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,0.18);
    border-color:var(--clr-primary);
    background:var(--clr-bg);
  }

  .mk-timeline-type{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    opacity:.82;
    margin:0 0 8px 0;
  }

  .mk-timeline-type .material-icons-outlined{
    font-size:18px;
    color:var(--clr-primary);
  }


  .mk-timeline-date{
    margin-top:0;
    font-size: 12px;
    opacity:.68;
  }

  .mk-timeline-logo{
    width:100%;
    height:50px;
    object-fit:contain;
    object-position:center center;
    display:block;
    margin:0 auto 10px auto;
  }

  .mk-timeline-card-box--left .mk-timeline-logo,
  .mk-timeline-card-box--right .mk-timeline-logo{
    margin-left:auto;
    margin-right:auto;
    object-position:center center;
  }

  /* =========================================================
     11. OPTIONAL: TEMPORARILY HIDE COMPANY NAMES IN TIMELINE
     Turn this on/off as needed
     ========================================================= */
  .mk-timeline-title{
    display:none;
  }

  /* =========================================================
     12. NOTES
     ========================================================= */
  .mk-apu-notes{
    display:grid;
    gap:12px;
  }

  .mk-apu-note{
    display:grid;
    grid-template-columns:18px minmax(0, 1fr);
    gap:10px;
    align-items:flex-start;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
  }

  .mk-apu-note .material-icons-outlined{
    font-size:16px;
    margin-top:2px;
    opacity:.85;
  }

  /* =========================================================
     13. ACTIONS / HERO LINKS
     ========================================================= */
  .mk-apu-hero-actions{
    display:grid;
    gap:14px;
    margin-top:12px;
  }

  .mk-apu-utility-links{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    justify-content:flex-start;
    margin-top:14px;
    width:100%;
  }

  .mk-apu-actions-col .mk-apu-actions{
    display:grid;
    gap:12px;
  }

  .mk-apu-actions-col .mk-apu-actions .btn,
  .mk-apu-actions-col .mk-apu-actions .pill-link{
    width:100%;
    justify-content:center;
  }

  .mk-apu-action.is-disabled{
    opacity:.5;
    pointer-events:none;
  }

  /* =========================================================
     14. TABLET / SMALL DESKTOP
     ========================================================= */
  

  /* =========================================================
     15. MOBILE
     ========================================================= */
  


/* ----------------------------------------------------------------------
   HERO: SHARED PAGE HERO VARIANTS
   Used by: home, about, partners, apu services, insights
   ---------------------------------------------------------------------- */



.mk-hero--page .mk-copy__actions,
.mk-hero--home .mk-copy__actions,
.mk-hero--insights .mk-copy__actions{
  margin-top: 18px;
}

.mk-hero--page .mk-hero__meta,
.mk-hero--home .mk-hero__meta,
.mk-hero--insights .mk-hero__meta{
  margin-top: 16px;
}

.mk-hero--page .mk-asset-pill,
.mk-hero--home .mk-asset-pill,
.mk-hero--insights .mk-asset-pill{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.mk-hero--page .mk-hero__meta-icon,
.mk-hero--home .mk-hero__meta-icon,
.mk-hero--insights .mk-hero__meta-icon{
  font-size: 14px;
  margin-right: 6px;
}

.mk-hero--page .mk-hero__meta-copy,
.mk-hero--home .mk-hero__meta-copy,
.mk-hero--insights .mk-hero__meta-copy{
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

/* Shared responsive 16:9 video wrapper */
.mk-hero--page .mk-media__box--hero-video,
.mk-hero--home .mk-media__box--hero-video,
.mk-hero--insights .mk-media__box--hero-video{
  width: 100%;
  max-width: 700px;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  overflow: hidden;
  border-radius: 8px;
}

/* Partners keeps its wider max width */
.mk-hero--partners .mk-media__box--hero-video{
  max-width: 760px;
}

/* Poster / play state */
.mk-hero--page .mk-video-embed--hero-video,
.mk-hero--home .mk-video-embed--hero-video,
.mk-hero--insights .mk-video-embed--hero-video{
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Loaded iframe video */
.mk-hero--page .mk-video-embed--hero-video iframe.mk-video,
.mk-hero--home .mk-video-embed--hero-video iframe.mk-video,
.mk-hero--insights .mk-video-embed--hero-video iframe.mk-video{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

/* Page-specific hero thumbnails */
.mk-hero--partners .mk-video-embed--hero-video,
.mk-hero--services .mk-video-embed--hero-video,
.mk-hero--about .mk-video-embed--hero-video{
  background-image: url('https://img.youtube.com/vi/eWwIRfSniOw/maxresdefault.jpg');
}

.mk-hero--insights .mk-video-embed--hero-video,
.mk-hero--home .mk-video-embed--hero-video{
  background-image: url('https://img.youtube.com/vi/2Fg6W8VDquw/maxresdefault.jpg');
}

/* Mobile */


/* Align hero video column to the top */
.mk-hero--page .mk-hero__inner,
.mk-hero--home .mk-hero__inner,
.mk-hero--insights .mk-hero__inner{
  align-items: start;
}

.mk-hero--page .mk-hero__visual,
.mk-hero--home .mk-hero__visual,
.mk-hero--insights .mk-hero__visual{
  align-items: flex-start;
}

.mk-hero--page .mk-media__box--hero-video,
.mk-hero--home .mk-media__box--hero-video,
.mk-hero--insights .mk-media__box--hero-video{
  align-self: flex-start;
}

.mk-hero-media-image{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

.mk-hero-media-image__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------
   SHARED HERO BACKGROUND IMAGE
   Works for page heroes and the contact hero
--------------------------------------------------------- */
.mk-hero--page,
.mk-contact-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mk-hero--page::before,
.mk-contact-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20,20,20,0.58), rgba(20,20,20,0.58)),
    var(--mk-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.mk-hero--page > .mk-container,
.mk-contact-hero > .mk-container{
  position: relative;
  z-index: 2;
}

/* old contact hero background layer must not cover the new image */
.mk-contact-hero .mk-hero__bg--intelligence{
  display: none;
}

/* =========================================================
   SHARED TWO-COLUMN MEDIA BLOCK
   Both image areas use the exact same height
   ========================================================= */

.mk-stand-rentals__grid,
.mk-split--image-left{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:80px;
  align-items:stretch;
}

.mk-insights__lead{

color: var(--clr-text);

}

/* Copy / media columns */
.mk-stand-rentals__copy,
.mk-stand-rentals__media,
.mk-split--image-left .mk-copy,
.mk-split--image-left .mk-media{
  min-width:0;
}

/* Keep image on the left for the split variant */
.mk-split--image-left .mk-media{ order:1; }
.mk-split--image-left .mk-copy{ order:2; }

/* Media columns */
.mk-stand-rentals__media,
.mk-split--image-left .mk-media{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

/* BOTH wrappers get the same exact height */
.mk-stand-rentals__media,
.mk-split--image-left .mk-media__box{
  width:100%;
  height:420px;
  min-height:420px;
  max-height:420px;
  border-radius:10px;
  overflow:hidden;
  background:transparent;
}

/* Images fill wrapper exactly */
.mk-stand-rentals__image,
.mk-split--image-left .mk-media-image,
.mk-split--image-left .mk-video-embed{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  border-radius:10px;
  background:transparent;
}

/* Inner image / iframe also fills */
.mk-split--image-left .mk-media-image__img,
.mk-split--image-left .mk-video,
.mk-split--image-left .mk-video iframe{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Existing stand cards */
.mk-stand-rentals{
  background:linear-gradient(90deg, #171717 0%, #1c1c1c 100%);
}

.mk-stand-rentals .mk-container{
  position:relative;
  padding: 60px 0;
}

.mk-stand-rentals__cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:14px;
}

.mk-stand-rentals__card{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
box-shadow: var(--card-shadow);
  padding:var(--sp-6);
  display:flex;
  align-items:stretch;
}

.mk-stand-rentals__card-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.mk-stand-rentals__icon{
  font-size:32px;
  line-height:1;
  color:#ff00b8;
  margin:0 0 18px;
}

.mk-stand-rentals__card-title{
  color:var(--clr-text);
  font-size:var(--fs-400);
  line-height:1.22;
  font-weight:700;
  margin:0 0 14px;
}

.mk-stand-rentals__card-sub{
  color:rgba(255,255,255,0.88);
  font-size:14px;
  line-height:1.45;
  max-width:180px;
}

/* Responsive */


/* =========================================================
   LEGAL PAGES - LIGHT THEME
   ========================================================= */

.mk-legal-page{
  background:#fff;
  color:var(--clr-text-dark);
}

.mk-legal{
  padding:48px 0 72px;
  background:#fff;
}

.mk-legal__body{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:56px;
  align-items:start;
}

.mk-legal__nav{
  position:sticky;
  top:110px;
  align-self:start;
}

.mk-legal__nav-title{
  margin:0 0 16px;
  font-family:var(--ff-heading);
  font-size:var(--fs-500);
  color:var(--clr-text-dark);
}

.mk-legal__nav-links{
  display:grid;
  gap:2px;
}

.mk-legal__nav-links a{
  display:block;
  text-decoration:none;
  color:var(--clr-text-dark);
  font-size:var(--fs-300);
  line-height:1.45;
  padding:8px 0;
  transition:color 0.2s ease;
}

.mk-legal__nav-links a:hover{
  color:var(--clr-primary);
}

.mk-legal__content{
  min-width:0;
    border-left:1px solid rgba(0,0,0,0.08);
    padding: 0 0 0 90px;
}

.mk-legal__content-head{
  margin:0 0 34px;
}

.mk-legal__title{
  margin-bottom:20px;
  color:var(--clr-text-dark);
}

.mk-legal__meta{
  margin:0 0 14px;
  color:rgba(17,24,39,0.62);
  font-size:var(--fs-400);
  font-style: italic;
}

.mk-legal__intro{
  margin:0;
  max-width:78ch;
  color:var(--clr-text-dark);
  font-size:16px;
  line-height:1.7;
}

.mk-legal__section + .mk-legal__section{
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid rgba(0,0,0,0.08);
}

.mk-legal__content h2{
  margin:0 0 12px;
  color:var(--clr-text-dark);
}

.mk-legal__content h3{
  margin:22px 0 10px;
  color:var(--clr-text-dark);
}

.mk-legal__content p,
.mk-legal__content li{
  color:var(--clr-text-dark);
  font-size:var(--fs-300);
  line-height:1.8;
}

.mk-legal__content p{
  margin:0 0 14px;
}

.mk-legal__content ul,
.mk-legal__content ol{
  margin:0 0 14px 20px;
  padding:0;
}

.mk-legal__content li + li{
  margin-top:8px;
}

.mk-legal__content a{
  color:var(--clr-primary);
  text-decoration:underline;
  text-underline-offset:2px;
}


.mk-legal__content ul,
.mk-legal__content ol{
  margin:0 0 14px 20px;
  padding:0;
}

.mk-legal__content ul{
  list-style: disc;
}

.mk-legal__content ol{
  list-style: decimal;
}

.mk-legal__content ul li::marker,
.mk-legal__content ol li::marker{
  color: var(--clr-primary);
}


/* ----------------------------------------------------------------------
   COOKIE CONSENT MODAL
   ---------------------------------------------------------------------- */

#cookieConsentModal .mk-modal__backdrop{
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
}

.mk-cookie-consent{
  width: min(100% - 24px, 460px);
  max-width: 460px;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
    var(--clr-surface);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--card-shadow);
}

.mk-cookie-consent__inner{
  padding: 34px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mk-cookie-consent__brand{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.mk-cookie-consent__brand-logo{
  display: block;

  width: 210px;
  margin-bottom: 16px;
  object-fit: contain;
}

@media (max-width: 640px){
  .mk-cookie-consent__brand-logo{

    max-width: 210px;
  }
}

.mk-cookie-consent__icon-wrap{
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: #222222;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.mk-cookie-consent__icon{
  font-size: 38px;
  line-height: 1;
  color: var(--clr-primary);
}

.mk-cookie-consent__title{
  margin: 0 0 10px;
  font-family: var(--ff-heading);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  color: var(--clr-text);
}

.mk-cookie-consent__text{
  margin: 0;
  max-width: 80%;
  font-size: var(--fs-300);
  color: var(--clr-text-muted);
}

.mk-cookie-consent__actions{
  width: 100%;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mk-cookie-consent__actions .btn{
  min-width: 250px;
  justify-content: center;
}

.mk-cookie-consent__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-text-muted);
  text-decoration: underline;
  transition: color .2s ease, opacity .2s ease;
}

.mk-cookie-consent__link:hover,
.mk-cookie-consent__link:focus-visible{
  color: var(--clr-primary);
  text-decoration: underline;
}

.mk-cookie-consent__link.is-disabled,
.mk-cookie-consent__actions .btn[aria-disabled="true"]{
  pointer-events: none;
  opacity: 0.65;
}

@media (max-width: 640px){
  .mk-cookie-consent{
    width: min(100% - 20px, 420px);
    border-radius: 18px;
  }

  .mk-cookie-consent__inner{
    padding: 28px 20px 22px;
  }

  .mk-cookie-consent__text{
    font-size: 16px;
  }

  .mk-cookie-consent__actions .btn{
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   MOBILE - MARKETPLACE VALUE PROPS BLOCK
   Uses existing block classes only
   ========================================================= */


/* =========================================================
   MOBILE - LISTINGS BLOCK / CAROUSEL
   Uses existing block classes only
   ========================================================= */