/* MyDataScraper Services - Frontend Styles */
:root {
    --mds-b: #2563EB;
    --mds-n: #0F172A;
    --mds-c: #06B6D4;
    --mds-o: #F59E0B;
    --mds-bg: #F8FAFC;
    --mds-bg2: #F1F5F9;
    --mds-t: #475569;
    --mds-m: #64748B;
    --mds-ln: #E2E8F0;
    --mds-r: 16px;
    --mds-sh: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
}

.mds-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.mds-archive, .mds-single { background: #fff; }

.mds-section { padding: 96px 0; }
.mds-section--alt { background: var(--mds-bg); }

.mds-archive h1, .mds-single h1 {
    font-size: clamp(38px, 5.6vw, 68px);
    font-weight: 800;
    color: var(--mds-n);
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.mds-archive h2, .mds-single h2 {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    color: var(--mds-n);
    margin: 0 0 20px;
    letter-spacing: -.025em;
    line-height: 1.1;
    max-width: 24ch;
}

.mds-archive h3, .mds-single h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--mds-n);
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.mds-lead {
    font-size: 19px;
    color: var(--mds-t);
    max-width: 58ch;
    margin: 18px 0 0;
    line-height: 1.6;
}

.mds-count {
    font-size: 14px;
    color: var(--mds-m);
    margin-top: 16px;
}

.mds-eb {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--mds-b);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mds-eb::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--mds-o);
}

.mds-hero {
    padding: 72px 0 88px;
    background: linear-gradient(#fff, var(--mds-bg));
    position: relative;
    overflow: hidden;
}
.mds-hero--cat { padding: 40px 0 72px; }
.mds-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--mds-ln) 1px, transparent 1px),
                      linear-gradient(90deg, var(--mds-ln) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%);
    pointer-events: none;
}
.mds-hero .mds-container { position: relative; z-index: 1; }

.mds-gradient {
    background: linear-gradient(100deg, var(--mds-b), var(--mds-c), var(--mds-b));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mds-gm 8s ease-in-out infinite alternate;
}
@keyframes mds-gm { to { background-position: 100% 0; } }

.mds-grid { display: grid; gap: 20px; margin-top: 48px; }
.mds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mds-grid--4 { grid-template-columns: repeat(4, 1fr); }

.mds-service-card,
.mds-category-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mds-ln);
    border-radius: var(--mds-r);
    padding: 28px;
    box-shadow: var(--mds-sh);
    text-decoration: none;
    color: inherit;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mds-service-card:hover,
.mds-category-card:hover {
    transform: translateY(-4px);
    border-color: var(--mds-b);
    box-shadow: 0 16px 32px -12px rgba(37,99,235,.25);
}

.mds-service-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    color: var(--mds-b);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}
.mds-service-card__icon svg { width: 22px; height: 22px; }

.mds-service-card__title,
.mds-category-card__title {
    font-size: 19px;
    font-weight: 600;
    color: var(--mds-n);
    margin: 0;
}
.mds-category-card__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.mds-service-card__desc,
.mds-category-card__desc {
    margin-top: 10px;
    font-size: 16px;
    color: var(--mds-t);
    line-height: 1.6;
}

.mds-service-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.mds-service-card__cat {
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--mds-bg2);
    color: var(--mds-t);
}

.mds-category-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.mds-category-card__count {
    font-size: 13px;
    font-weight: 700;
    color: var(--mds-o);
}

.mds-service-card__link,
.mds-category-card__link {
    margin-top: auto;
    padding-top: 20px;
    color: var(--mds-b);
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    gap: 6px;
}
.mds-service-card__link i,
.mds-category-card__link i {
    font-style: normal;
    transition: transform .2s;
}
.mds-service-card:hover .mds-service-card__link i,
.mds-category-card:hover .mds-category-card__link i { transform: translateX(4px); }

.mds-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
    text-decoration: none;
    font-family: inherit;
}
.mds-btn--p {
    background: var(--mds-b);
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(37,99,235,.6) !important;
}
.mds-btn--p:hover { background: #1d4ed8; transform: translateY(-1px); color:#fff; }
.mds-btn--s {
    background: #fff;
    color: var(--mds-n);
    border-color: #CBD5E1;
}
.mds-btn--s:hover { border-color: var(--mds-b); color: var(--mds-b); }

.mds-cr {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0 0;
}
.mds-cta .mds-cr { justify-content: center; }

.mds-bc-wrap { padding: 20px 24px 0; }
.mds-bc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--mds-m);
}
.mds-bc li + li::before {
    content: "/";
    margin-right: 8px;
    color: #CBD5E1;
}
.mds-bc a { text-decoration: none; color: inherit; }
.mds-bc a:hover { color: var(--mds-b); }
.mds-bc [aria-current] { color: var(--mds-n); font-weight: 500; }

.mds-cta {
    padding: 96px 0;
    background: linear-gradient(135deg, #EFF6FF, #ECFEFF);
    border-top: 1px solid var(--mds-ln);
    border-bottom: 1px solid var(--mds-ln);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mds-cta .mds-container { position: relative; z-index: 1; }
.mds-cta h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.mds-cta .mds-lead { margin-left: auto; margin-right: auto; }

.mds-content {
    font-size: 17px;
    line-height: 1.6;
    color: var(--mds-t);
}
.mds-content h2, .mds-content h3 { margin-top: 1.5em; margin-bottom: .5em; }
.mds-content p { margin: 0 0 1em; }
.mds-content img { max-width: 100%; height: auto; border-radius: 12px; }
.mds-content a { color: var(--mds-b); }

.mds-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}
.mds-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--mds-ln);
    background: #fff;
    color: var(--mds-n);
    text-decoration: none;
    font-weight: 500;
    transition: .2s;
}
.mds-pagination .page-numbers:hover,
.mds-pagination .page-numbers.current {
    background: var(--mds-b);
    color: #fff;
    border-color: var(--mds-b);
}

.elementor-widget-mds_services_card .mds-service-card { height: 100%; }

@media (max-width: 1023px) {
    .mds-grid--3, .mds-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mds-section { padding: 72px 0; }
    .mds-hero { padding: 44px 0 64px; }
}
@media (max-width: 640px) {
    .mds-grid--2, .mds-grid--3, .mds-grid--4 { grid-template-columns: 1fr; }
    .mds-cr .mds-btn { width: 100%; justify-content: center; }
    .mds-service-card, .mds-category-card { padding: 22px; }
}

/* ============================================================
   ARCHIVE — additional styles for content-rich templates
   ============================================================ */

/* Breadcrumb inside hero */
.mds-hero .mds-bc {
    margin-bottom: 20px;
}
.mds-hero .mds-bc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--mds-m);
}
.mds-hero .mds-bc li + li::before {
    content: "/";
    margin-right: 8px;
    color: #CBD5E1;
}
.mds-hero .mds-bc a { color: inherit; text-decoration: none; }
.mds-hero .mds-bc a:hover { color: var(--mds-b); }

/* Trust list under hero */
.mds-trust {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mds-n);
}
.mds-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mds-trust svg {
    color: var(--mds-c);
    flex-shrink: 0;
}

/* Two-column overview */
.mds-content-wide {
    max-width: 1200px;
}
.mds-two-col {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 56px;
}
.mds-two-col h2 {
    margin: 0;
    max-width: 20ch;
}
.mds-prose p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--mds-t);
    margin: 0 0 1.25em;
}
.mds-prose p:last-child { margin-bottom: 0; }

/* Intro cards */
.mds-intro-cards {
    margin-top: 24px;
}
.mds-intro-card {
    background: #fff;
    border: 1px solid var(--mds-ln);
    border-radius: var(--mds-r);
    padding: 32px;
    box-shadow: var(--mds-sh);
    position: relative;
}
.mds-intro-card__num {
    font-size: 13px;
    font-weight: 700;
    color: var(--mds-o);
    margin-bottom: 14px;
    letter-spacing: .08em;
}
.mds-intro-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--mds-n);
    margin: 0 0 12px;
}
.mds-intro-card p {
    margin: 0;
    color: var(--mds-t);
    line-height: 1.65;
}

/* Category card icon */
.mds-category-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    color: var(--mds-b);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}
.mds-category-card__icon svg { width: 22px; height: 22px; }
.mds-category-card__icon--default {
    background: #F1F5F9;
    color: var(--mds-m);
}

/* Category meta chips */
.mds-cat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
    font-size: 14px;
    color: var(--mds-m);
}
.mds-cat-meta__item strong {
    color: var(--mds-n);
    font-weight: 700;
    margin-right: 4px;
}

/* Process steps */
.mds-process {
    list-style: none;
    padding: 0;
    margin: 52px 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.mds-process__step {
    background: #fff;
    border: 1px solid var(--mds-ln);
    border-radius: var(--mds-r);
    padding: 24px;
    box-shadow: var(--mds-sh);
    position: relative;
}
.mds-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    right: -20px;
    width: 20px;
    height: 2px;
    background: var(--mds-c);
}
.mds-process__num {
    font-size: 13px;
    font-weight: 700;
    color: var(--mds-o);
    margin-bottom: 12px;
    letter-spacing: .08em;
}
.mds-process__step h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--mds-n);
    margin: 0 0 8px;
}
.mds-process__step p {
    font-size: 14.5px;
    margin: 0;
    color: var(--mds-t);
    line-height: 1.6;
}

/* Feature cards (why section) */
.mds-card {
    background: #fff;
    border: 1px solid var(--mds-ln);
    border-radius: var(--mds-r);
    padding: 28px;
    box-shadow: var(--mds-sh);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mds-card:hover {
    transform: translateY(-4px);
    border-color: var(--mds-b);
    box-shadow: 0 16px 32px -12px rgba(37,99,235,.25);
}
.mds-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    color: var(--mds-b);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}
.mds-card__icon svg { width: 22px; height: 22px; }
.mds-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--mds-n);
    margin: 0 0 8px;
}
.mds-card p {
    font-size: 15px;
    margin: 0;
    color: var(--mds-t);
    line-height: 1.6;
}
.mds-card--delivery {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
}
.mds-card--delivery .mds-card__icon {
    margin: 0;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.mds-card--delivery .mds-card__icon svg { width: 18px; height: 18px; }
.mds-card--delivery span {
    font-weight: 600;
    color: var(--mds-n);
    font-size: 15px;
}

/* Delivery engine label */
.mds-eng {
    width: max-content;
    max-width: 100%;
    margin: 44px auto 32px;
    background: var(--mds-n);
    color: #fff;
    padding: 18px 32px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 13px;
    text-align: center;
    position: relative;
}
.mds-eng::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 32px;
    background: linear-gradient(var(--mds-c), transparent);
}

/* Chips */
.mds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}
.mds-chip {
    background: #fff;
    border: 1px solid var(--mds-ln);
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 500;
    color: var(--mds-n);
    font-size: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.mds-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mds-c);
}

/* FAQ */
.mds-faq {
    max-width: 820px;
    margin-top: 40px;
}
.mds-faq__item {
    background: #fff;
    border: 1px solid var(--mds-ln);
    border-radius: 14px;
    padding: 0 24px;
    margin-bottom: 12px;
    transition: border-color .2s;
}
.mds-faq__item[open] {
    border-color: var(--mds-b);
}
.mds-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 0;
    font-weight: 600;
    color: var(--mds-n);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.mds-faq__item summary::-webkit-details-marker { display: none; }
.mds-faq__item summary::after {
    content: "+";
    color: var(--mds-b);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.mds-faq__item[open] summary::after {
    content: "–";
}
.mds-faq__item p {
    padding-bottom: 20px;
    max-width: 70ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mds-t);
}

/* Pagination wrap */
.mds-pagination-wrap {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

/* Row centered buttons */
.mds-row-center {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Empty state */
.mds-empty-state {
    text-align: center;
    max-width: 640px;
    margin: 40px auto;
    padding: 40px 24px;
    background: var(--mds-bg);
    border-radius: var(--mds-r);
}
.mds-empty-state h2 {
    margin-bottom: 12px;
}
.mds-empty-state .mds-cr {
    justify-content: center;
}

/* Responsive */
@media (max-width: 1023px) {
    .mds-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .mds-process {
        grid-template-columns: 1fr;
    }
    .mds-process__step:not(:last-child)::after {
        display: none;
    }
    .mds-trust {
        gap: 10px 20px;
    }
}
@media (max-width: 640px) {
    .mds-process__step {
        padding: 20px;
    }
    .mds-cat-meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .mds-faq__item {
        padding: 0 18px;
    }
}

/* ============================================================
   DATA SAMPLE TABLE SECTION
   ============================================================ */
/* ============================================================
   DOWNLOAD SAMPLE POPUP — COMPLETE CSS
   ============================================================ */

/* -------- Overlay (hidden by default) -------- */
#mds-popup{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;                        /* hidden by default */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* -------- Open state (added by your JS) -------- */
#mds-popup.is-open{
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Alternative: if your JS uses style.display directly */
#mds-popup[style*="display: block"],
#mds-popup[style*="display:block"],
#mds-popup[style*="display: flex"],
#mds-popup[style*="display:flex"]{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* -------- Modal card -------- */
#mds-popup .mds-popup-content{
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 18px;
  padding: 36px 32px 32px;
  border: 1px solid #E2E8F0;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 25px 50px -12px rgba(15, 23, 42, .35);
  transform: translateY(20px) scale(.98);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

#mds-popup.is-open .mds-popup-content,
#mds-popup[style*="display: block"] .mds-popup-content,
#mds-popup[style*="display:block"] .mds-popup-content,
#mds-popup[style*="display: flex"] .mds-popup-content,
#mds-popup[style*="display:flex"] .mds-popup-content{
  transform: translateY(0) scale(1);
}

/* Gradient accent bar on top */
#mds-popup .mds-popup-content::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563EB, #06B6D4, #2563EB);
  background-size: 200% 100%;
  animation: mds-accent 6s linear infinite;
}

@keyframes mds-accent{
  to { background-position: -200% 0; }
}

/* -------- Heading -------- */
#mds-popup .mds-popup-content h3{
  margin: 4px 0 24px;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -.02em;
  line-height: 1.25;
  font-family: inherit;
}

/* -------- Close button -------- */
#mds-popup .mds-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: #64748B;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  user-select: none;
  z-index: 2;
}

#mds-popup .mds-close:hover{
  background: #F1F5F9;
  color: #0F172A;
  border-color: #E2E8F0;
}

#mds-popup .mds-close:active{
  transform: scale(.94);
}

/* -------- Form layout -------- */
#mds-popup form{
  display: grid;
  gap: 12px;
}

/* -------- Inputs -------- */
#mds-popup input[type="text"],
#mds-popup input[type="email"],
#mds-popup input[type="tel"]{
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

#mds-popup input[type="text"]::placeholder,
#mds-popup input[type="email"]::placeholder,
#mds-popup input[type="tel"]::placeholder{
  color: #94A3B8;
}

#mds-popup input[type="text"]:focus,
#mds-popup input[type="email"]:focus,
#mds-popup input[type="tel"]:focus{
  border-color: #2563EB;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* Invalid state after typing */
#mds-popup input:invalid:not(:placeholder-shown){
  border-color: #FCA5A5;
  background: #FEF2F2;
}

/* -------- Submit button -------- */
#mds-popup #mds-submit-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #2563EB;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -.01em;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6);
  transition: background .2s, transform .2s, box-shadow .2s, opacity .2s;
}

#mds-popup #mds-submit-btn:hover:not(:disabled){
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .7);
}

#mds-popup #mds-submit-btn:active:not(:disabled){
  transform: translateY(0);
}

#mds-popup #mds-submit-btn:disabled{
  opacity: .7;
  cursor: not-allowed;
}

/* -------- Loader spinner -------- */
#mds-popup .mds-loader{
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mds-spin .7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}

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

/* -------- Loading message -------- */
#mds-popup #mds-loading-msg{
  font-size: 12.5px;
  color: #64748B;
  text-align: center;
  margin-top: 4px;
  line-height: 1.5;
}

/* -------- Responsive -------- */
@media (max-width: 640px){
  #mds-popup{
    padding: 16px;
    align-items: flex-start;
    padding-top: 60px;
  }
  #mds-popup .mds-popup-content{
    padding: 28px 22px 24px;
    border-radius: 16px;
    max-width: 100%;
  }
  #mds-popup .mds-popup-content h3{
    font-size: 20px;
    margin-bottom: 20px;
  }
  #mds-popup input[type="text"],
  #mds-popup input[type="email"],
  #mds-popup input[type="tel"]{
    padding: 12px 14px;
    font-size: 15px;
  }
  #mds-popup #mds-submit-btn{
    padding: 13px 20px;
    font-size: 15px;
  }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce){
  #mds-popup,
  #mds-popup .mds-popup-content,
  #mds-popup .mds-popup-content::before,
  #mds-popup .mds-loader{
    animation: none !important;
    transition: none !important;
  }
}

/* -------- Lock body scroll when open -------- */
body.mds-popup-open{
  overflow: hidden;
}

.data-sample.sec{
  padding: 0;
  background: #fff;
  padding-bottom: 14px;
}

.data-sample .wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -------- Table wrapper card -------- */
.data-sample .tbl-wrap{
  position: relative;
  background: #fff;
  border: 1px solid var(--mds-ln, #E2E8F0);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
  overflow: hidden;
}

/* -------- Header bar -------- */
.data-sample .tbl-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--mds-ln, #E2E8F0);
  flex-wrap: wrap;
}

.data-sample .tbl-hdr-title{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--mds-n, #0F172A);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-sample .tbl-hdr-title::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06B6D4;
  box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}

.data-sample .tbl-hdr-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mds-m, #64748B);
  background: #fff;
  border: 1px solid var(--mds-ln, #E2E8F0);
  padding: 6px 12px;
  border-radius: 999px;
}

.data-sample .tbl-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  flex-shrink: 0;
  animation: mds-pulse 2s ease-in-out infinite;
}

@keyframes mds-pulse{
  0%,100%{ opacity: 1; }
  50%    { opacity: .55; }
}

/* -------- Table container -------- */
.data-sample .dtable-container{
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Subtle scrollbar */
.data-sample .dtable-container::-webkit-scrollbar{
  height: 10px;
}
.data-sample .dtable-container::-webkit-scrollbar-track{
  background: #F1F5F9;
}
.data-sample .dtable-container::-webkit-scrollbar-thumb{
  background: #CBD5E1;
  border-radius: 8px;
  border: 2px solid #F1F5F9;
}
.data-sample .dtable-container::-webkit-scrollbar-thumb:hover{
  background: #94A3B8;
}

/* -------- Table -------- */
.data-sample .dtable{
  border-collapse: collapse;
  width: 100%;
  min-width: 1100px;
  font-size: 13.5px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.data-sample .dtable th{
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mds-m, #64748B);
  background: #F8FAFC;
  border-bottom: 1px solid var(--mds-ln, #E2E8F0);
  padding: 14px 18px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-sample .dtable td{
  padding: 14px 18px;
  border-bottom: 1px solid #F1F5F9;
  color: var(--mds-n, #0F172A);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

.data-sample .dtable tbody tr:last-child td{
  border-bottom: 0;
}

.data-sample .dtable tbody tr{
  transition: background-color .15s ease;
}

.data-sample .dtable tbody tr:hover{
  background: #F8FAFC;
}

/* -------- Column-specific widths & styles -------- */

/* link column */
.data-sample .dtable td:nth-child(1){
  max-width: 240px;
  color: var(--mds-m, #64748B);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  direction: rtl;              /* keeps "..." on the left for truncated URLs */
  text-align: left;
  unicode-bidi: plaintext;
}

/* image column */
.data-sample .dtable td:nth-child(2){
  max-width: 160px;
  color: var(--mds-m, #64748B);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  direction: rtl;
  text-align: left;
  unicode-bidi: plaintext;
}

/* price column */
.data-sample .dtable td:nth-child(3){
  font-weight: 600;
  color: #047857;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* title column */
.data-sample .dtable td:nth-child(4){
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* review links column */
.data-sample .dtable td:nth-child(5){
  max-width: 220px;
  color: var(--mds-m, #64748B);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  direction: rtl;
  text-align: left;
  unicode-bidi: plaintext;
}

/* ratings column */
.data-sample .dtable td:nth-child(6){
  color: #B45309;
  font-weight: 500;
  white-space: nowrap;
}

/* old price column */
.data-sample .dtable td:nth-child(7){
  color: var(--mds-m, #64748B);
  text-decoration: line-through;
  text-decoration-color: rgba(100,116,139,.4);
  font-variant-numeric: tabular-nums;
}

/* price status column — pill */
.data-sample .dtable td:nth-child(8){
  white-space: nowrap;
}

.data-sample .dtable td:nth-child(8):not(:empty){
  font-weight: 500;
  font-size: 12px;
}

/* price change % */
.data-sample .dtable td:nth-child(9){
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mds-n, #0F172A);
}

/* price note column */
.data-sample .dtable td:nth-child(10){
  color: var(--mds-m, #64748B);
  font-size: 12.5px;
}

/* -------- Blurred rows (preview teaser) -------- */
/* .data-sample .dtable tr.row-blur td{
  position: relative;
  color: transparent;
  user-select: none;
  pointer-events: none;
} */

/* .data-sample .dtable tr.row-blur td::after{
  content: "";
  position: absolute;
  inset: 8px 12px;
  background: linear-gradient(
    90deg,
    rgba(226,232,240,.6) 0%,
    rgba(226,232,240,.9) 50%,
    rgba(226,232,240,.6) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: mds-shimmer 1.8s ease-in-out infinite;
} */

@keyframes mds-shimmer{
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* -------- Footer bar -------- */
.data-sample .tbl-ftr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: #F8FAFC;
  border-top: 1px solid var(--mds-ln, #E2E8F0);
  flex-wrap: wrap;
}

.data-sample .tbl-ftr-stats{
  font-size: 13.5px;
  color: var(--mds-m, #64748B);
}

.data-sample .tbl-ftr-stats strong{
  color: var(--mds-n, #0F172A);
  font-weight: 600;
}

/* Download button */
.data-sample .tbl-dl-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  background: var(--mds-b, #2563EB);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.6);
  transition: transform .2s, background .2s, box-shadow .2s;
  text-decoration: none;
}

.data-sample .tbl-dl-btn:hover{
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(37,99,235,.7);
  color: #fff;
}

.data-sample .tbl-dl-btn::before{
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* -------- Responsive -------- */
@media (max-width: 1023px){
  .data-sample.sec{
    padding: 72px 0;
  }
  .data-sample .dtable{
    min-width: 900px;
    font-size: 13px;
  }
  .data-sample .dtable th,
  .data-sample .dtable td{
    padding: 12px 14px;
  }
}

@media (max-width: 640px){
  .data-sample .tbl-hdr,
  .data-sample .tbl-ftr{
    padding: 14px 16px;
  }
  .data-sample .tbl-hdr-title{
    font-size: 12px;
  }
  .data-sample .tbl-hdr-badge{
    font-size: 11px;
    padding: 5px 10px;
  }
  .data-sample .tbl-ftr{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .data-sample .tbl-dl-btn{
    justify-content: center;
    width: 100%;
  }
  .data-sample .dtable{
    min-width: 800px;
    font-size: 12.5px;
  }
  .data-sample .dtable th,
  .data-sample .dtable td{
    padding: 10px 12px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .data-sample .tbl-dot,
  .data-sample .dtable tr.row-blur td::after{
    animation: none !important;
  }
}

/* common css for all pages */
/* ============================================================
   MYDATASCRAPER — SERVICE PAGE COMMON CSS
   Reuse for every service page. Prefix: .mds-*
   ============================================================ */

/* ---------- Root variables ---------- */
.mds-page{
  --mds-b:#2563EB;
  --mds-n:#0F172A;
  --mds-c:#06B6D4;
  --mds-o:#F59E0B;
  --mds-bg:#F8FAFC;
  --mds-bg2:#F1F5F9;
  --mds-t:#475569;
  --mds-m:#64748B;
  --mds-ln:#E2E8F0;
  --mds-r:16px;
  --mds-sh:0 1px 2px rgba(15,23,42,.04),0 8px 24px -8px rgba(15,23,42,.08);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--mds-t);
  background:#fff;
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.mds-page *,.mds-page *::before,.mds-page *::after{box-sizing:border-box}
.mds-page p{margin:0}
.mds-page a{color:inherit;text-decoration:none}
.mds-page h1,.mds-page h2,.mds-page h3,.mds-page h4{
  color:var(--mds-n);margin:0;letter-spacing:-.025em;line-height:1.15;font-weight:700;
}
.mds-page h1{font-size:clamp(38px,5.6vw,68px);font-weight:800}
.mds-page h2{font-size:clamp(28px,3.6vw,46px);max-width:22ch}
.mds-page h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.mds-page h4{font-size:15px;font-weight:600}

/* ---------- Layout ---------- */
.mds-w{max-width:1200px;margin:0 auto;padding:0 24px}
.mds-section{padding:96px 0}
.mds-section--alt{background:var(--mds-bg)}
.mds-lead{font-size:19px;max-width:58ch;margin-top:18px;line-height:1.6}
.mds-note{font-size:13px;color:var(--mds-m);margin-top:14px}
.mds-grid{display:grid;gap:20px}
.mds-grid--2{grid-template-columns:repeat(2,1fr);margin-top:48px}
.mds-grid--3{grid-template-columns:repeat(3,1fr);margin-top:48px}
.mds-grid--4{grid-template-columns:repeat(4,1fr);margin-top:48px}
.mds-two{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.mds-prose p{font-size:17px;line-height:1.7;color:var(--mds-t);margin:0 0 1.25em}
.mds-prose p:last-child{margin-bottom:0}

/* ---------- Typography helpers ---------- */
.mds-eb{
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--mds-b);
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.mds-eb::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--mds-o)}
.mds-gradient{
  background:linear-gradient(100deg,var(--mds-b),var(--mds-c),var(--mds-b));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mds-gm 8s ease-in-out infinite alternate;
}
@keyframes mds-gm{to{background-position:100% 0}}

/* ---------- Buttons ---------- */
.mds-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 24px;
  border-radius:12px;font-weight:600;font-size:16px;border:1px solid transparent;
  cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;
  font-family:inherit;line-height:1.2;
}
.mds-btn--p{background:var(--mds-b);color:#fff;box-shadow:0 6px 16px -6px rgba(37,99,235,.6)}
.mds-btn--p:hover{background:#1d4ed8;transform:translateY(-1px);color:#fff}
.mds-btn--s{background:#fff;color:var(--mds-n);border-color:#CBD5E1}
.mds-btn--s:hover{border-color:var(--mds-b);color:var(--mds-b)}
.mds-cr{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}

/* ---------- Breadcrumb ---------- */
.mds-bc-wrap{padding:20px 0 0;background:#fff;position:relative;z-index:2}
.mds-bc{font-size:14px;color:var(--mds-m)}
.mds-bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mds-bc li{display:inline-flex;align-items:center;gap:8px}
.mds-bc li+li::before{content:"/";color:#CBD5E1;margin-right:2px}
.mds-bc a{color:inherit;transition:color .2s}
.mds-bc a:hover{color:var(--mds-b)}
.mds-bc [aria-current]{color:var(--mds-n);font-weight:500}

/* ---------- Hero ---------- */
.mds-hero{padding:40px 0 88px;background:linear-gradient(#fff,var(--mds-bg));position:relative;overflow:hidden}
.mds-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--mds-ln) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mds-ln) 1px,transparent 1px);
  background-size:48px 48px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);
  pointer-events:none;
}
.mds-hero .mds-w{position:relative;z-index:1}
.mds-hero h1{max-width:16ch}
.mds-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}

/* ---------- Trust list ---------- */
.mds-trust{
  list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;
  gap:12px 32px;font-size:14px;font-weight:500;color:var(--mds-n);
}
.mds-trust li{display:inline-flex;align-items:center;gap:8px}
.mds-trust svg{color:var(--mds-c);flex-shrink:0}

/* ---------- Cards ---------- */
.mds-card{
  background:#fff;border:1px solid var(--mds-ln);border-radius:var(--mds-r);
  padding:28px;box-shadow:var(--mds-sh);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.mds-card--hv:hover{
  transform:translateY(-4px);border-color:var(--mds-b);
  box-shadow:0 16px 32px -12px rgba(37,99,235,.25);
}
.mds-card__icon{
  width:44px;height:44px;border-radius:12px;background:#EFF6FF;color:var(--mds-b);
  display:grid;place-items:center;margin-bottom:20px;
}
.mds-card__icon svg{width:22px;height:22px}
.mds-card p{margin-top:10px;font-size:16px;color:var(--mds-t)}

/* ---------- Spec card ---------- */
.mds-spec{background:#fff;border:1px solid var(--mds-ln);border-radius:var(--mds-r);box-shadow:var(--mds-sh);padding:8px 24px}
.mds-spec>div{padding:16px 0;border-bottom:1px solid var(--mds-bg2)}
.mds-spec>div:last-child{border:0}
.mds-spec b{display:block;font-size:12px;letter-spacing:.08em;color:var(--mds-b);margin-bottom:4px;text-transform:uppercase}
.mds-spec span{color:var(--mds-n);font-weight:500}

/* ---------- Pipeline ---------- */
.mds-pipe{max-width:620px;margin:52px auto 0;display:grid;gap:0}
.mds-pn{
  border:1px solid var(--mds-ln);background:#fff;border-radius:14px;
  padding:18px 24px;text-align:center;font-weight:600;color:var(--mds-n);
  font-size:15px;letter-spacing:.03em;box-shadow:var(--mds-sh);
}
.mds-pn small{display:block;font-weight:400;letter-spacing:0;color:var(--mds-m);font-size:14px;margin-top:2px}
.mds-pn--hl{background:#EFF6FF;border-color:var(--mds-b)}
.mds-pa{height:34px;width:2px;margin:0 auto;background:linear-gradient(var(--mds-b),var(--mds-c));position:relative}
.mds-pa::after{content:"";position:absolute;left:-4px;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--mds-c);border-bottom:0}

/* ---------- Field table (with tabs) ---------- */
.mds-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0 16px}
.mds-tab{
  padding:9px 18px;border-radius:999px;border:1px solid var(--mds-ln);
  background:#fff;font:500 15px Inter,sans-serif;color:var(--mds-t);
  cursor:pointer;transition:.2s;font-family:inherit;
}
.mds-tab[aria-selected="true"]{background:var(--mds-n);color:#fff;border-color:var(--mds-n)}
.mds-tw{position:relative;background:#fff;border:1px solid var(--mds-ln);border-radius:var(--mds-r);box-shadow:var(--mds-sh);overflow:hidden}
.mds-scroll{overflow-x:auto;padding-top:14px}
.mds-tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.mds-tw th{
  text-align:left;font-size:12px;letter-spacing:.06em;color:var(--mds-m);
  padding:14px 18px;background:var(--mds-bg);border-bottom:1px solid var(--mds-ln);
  white-space:nowrap;font-weight:600;
}
.mds-tw td{padding:14px 18px;border-bottom:1px solid var(--mds-bg2);white-space:nowrap;color:var(--mds-n)}
.mds-tw tr:last-child td{border:0}

/* ---------- Delivery engine label ---------- */
.mds-eng{
  width:max-content;max-width:100%;margin:44px auto 32px;
  background:var(--mds-n);color:#fff;padding:18px 32px;border-radius:14px;
  font-weight:700;letter-spacing:.06em;font-size:13px;text-align:center;position:relative;
}
.mds-eng::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:32px;background:linear-gradient(var(--mds-c),transparent)}
.mds-dl .mds-card{padding:20px;display:flex;gap:14px;align-items:center;font-weight:600;color:var(--mds-n);font-size:16px}
.mds-dl .mds-card__icon{margin:0;flex:none;width:36px;height:36px}
.mds-dl .mds-card__icon svg{width:18px;height:18px}

/* ---------- Sample table ---------- */
.mds-sample-wrap{position:relative;background:#fff;border:1px solid var(--mds-ln);border-radius:var(--mds-r);box-shadow:var(--mds-sh);overflow:hidden;margin-top:32px}
.mds-sample-hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--mds-bg);border-bottom:1px solid var(--mds-ln);flex-wrap:wrap}
.mds-sample-hdr-title{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;color:var(--mds-n);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.mds-sample-hdr-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mds-c);box-shadow:0 0 0 3px rgba(6,182,212,.18)}
.mds-sample-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--mds-m);background:#fff;border:1px solid var(--mds-ln);padding:6px 12px;border-radius:999px}
.mds-sample-dot{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18);flex-shrink:0;animation:mds-pulse 2s ease-in-out infinite}
@keyframes mds-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.mds-sample-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mds-sample-table-container::-webkit-scrollbar{height:10px}
.mds-sample-table-container::-webkit-scrollbar-track{background:#F1F5F9}
.mds-sample-table-container::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px;border:2px solid #F1F5F9}
.mds-sample-table{border-collapse:collapse;width:100%;min-width:1100px;font-size:13.5px;font-family:Inter,sans-serif}
.mds-sample-table th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mds-m);background:var(--mds-bg);border-bottom:1px solid var(--mds-ln);
  padding:14px 18px;white-space:nowrap;position:sticky;top:0;z-index:2;
}
.mds-sample-table td{
  padding:14px 18px;border-bottom:1px solid #F1F5F9;color:var(--mds-n);
  vertical-align:middle;white-space:nowrap;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;line-height:1.5;
}
.mds-sample-table tbody tr:last-child td{border-bottom:0}
.mds-sample-table tbody tr{transition:background-color .15s ease}
.mds-sample-table tbody tr:hover{background:var(--mds-bg)}
.mds-sample-table td.mds-url{
  color:var(--mds-m);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;direction:rtl;text-align:left;unicode-bidi:plaintext;max-width:220px;
}
.mds-sample-table td.mds-price{font-weight:600;color:#047857;font-variant-numeric:tabular-nums}
.mds-sample-table tr.row-blur td{position:relative;color:transparent;user-select:none;pointer-events:none}
.mds-sample-table tr.row-blur td::after{
  content:"";position:absolute;inset:8px 12px;
  background:linear-gradient(90deg,rgba(226,232,240,.6) 0%,rgba(226,232,240,.9) 50%,rgba(226,232,240,.6) 100%);
  background-size:200% 100%;border-radius:6px;
  animation:mds-shimmer 1.8s ease-in-out infinite;
}
@keyframes mds-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.mds-sample-ftr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--mds-bg);border-top:1px solid var(--mds-ln);flex-wrap:wrap}
.mds-sample-ftr-stats{font-size:13.5px;color:var(--mds-m)}
.mds-sample-ftr-stats strong{color:var(--mds-n);font-weight:600}
.mds-sample-dl-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;
  font-weight:600;font-size:14.5px;border:1px solid transparent;background:var(--mds-b);
  color:#fff;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6);
  transition:transform .2s,background .2s;text-decoration:none;
}
.mds-sample-dl-btn:hover{background:#1d4ed8;transform:translateY(-1px);color:#fff}
.mds-sample-dl-btn::before{
  content:"";width:14px;height:14px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;background-position:center;flex-shrink:0;
}

/* ---------- FAQ ---------- */
.mds-faq{max-width:820px;margin-top:40px}
.mds-faq details{background:#fff;border:1px solid var(--mds-ln);border-radius:14px;padding:0 24px;margin-bottom:12px;transition:border-color .2s}
.mds-faq details[open]{border-color:var(--mds-b)}
.mds-faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;color:var(--mds-n);font-size:16px;display:flex;justify-content:space-between;gap:16px}
.mds-faq summary::-webkit-details-marker{display:none}
.mds-faq summary::after{content:"+";color:var(--mds-b);font-size:22px;line-height:1;flex-shrink:0}
.mds-faq details[open] summary::after{content:"–"}
.mds-faq p{padding-bottom:20px;max-width:70ch;font-size:16px;line-height:1.65;color:var(--mds-t)}

/* ---------- CTA ---------- */
.mds-cta{
  padding:96px 0;background:linear-gradient(135deg,#EFF6FF,#ECFEFF);
  border-top:1px solid var(--mds-ln);border-bottom:1px solid var(--mds-ln);
  text-align:center;position:relative;overflow:hidden;
}
.mds-cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--mds-ln) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mds-ln) 1px,transparent 1px);
  background-size:48px 48px;opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 70%);
  pointer-events:none;
}
.mds-cta .mds-w{position:relative;z-index:1}
.mds-cta h2{margin-inline:auto;max-width:22ch}
.mds-cta .mds-lead{margin-inline:auto}
.mds-cta .mds-cr{justify-content:center}

/* ---------- POPUP (shared across all services) ---------- */
#mds-popup{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#mds-popup.is-open{display:flex;opacity:1;visibility:visible}
#mds-popup[style*="display: block"],#mds-popup[style*="display:block"],
#mds-popup[style*="display: flex"],#mds-popup[style*="display:flex"]{
  display:flex !important;opacity:1 !important;visibility:visible !important;
}
#mds-popup .mds-popup-content{
  position:relative;width:100%;max-width:440px;background:#fff;border-radius:18px;
  padding:36px 32px 32px;border:1px solid #E2E8F0;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 25px 50px -12px rgba(15,23,42,.35);
  transform:translateY(20px) scale(.98);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  overflow:hidden;max-height:calc(100vh - 48px);overflow-y:auto;
}
#mds-popup.is-open .mds-popup-content{transform:translateY(0) scale(1)}
#mds-popup .mds-popup-content::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#2563EB,#06B6D4,#2563EB);
  background-size:200% 100%;animation:mds-accent 6s linear infinite;
}
@keyframes mds-accent{to{background-position:-200% 0}}
#mds-popup .mds-popup-content h3{margin:4px 0 24px;font-size:24px;font-weight:700;color:#0F172A;letter-spacing:-.02em;line-height:1.25}
#mds-popup .mds-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-size:22px;line-height:1;color:#64748B;
  cursor:pointer;background:transparent;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .2s;user-select:none;z-index:2;
}
#mds-popup .mds-close:hover{background:#F1F5F9;color:#0F172A;border-color:#E2E8F0}
#mds-popup form{display:grid;gap:12px}
#mds-popup input[type="text"],
#mds-popup input[type="email"],
#mds-popup input[type="tel"]{
  width:100%;padding:13px 16px;border-radius:10px;border:1px solid #E2E8F0;
  background:#F8FAFC;color:#0F172A;font-size:15px;font-family:inherit;line-height:1.4;
  transition:border-color .2s,background .2s,box-shadow .2s;outline:none;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
}
#mds-popup input::placeholder{color:#94A3B8}
#mds-popup input:focus{border-color:#2563EB;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
#mds-popup #mds-submit-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 24px;margin-top:6px;border-radius:10px;border:1px solid transparent;
  background:#2563EB;color:#fff;font-size:15.5px;font-weight:600;font-family:inherit;
  cursor:pointer;letter-spacing:-.01em;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6);
  transition:background .2s,transform .2s,box-shadow .2s,opacity .2s;
}
#mds-popup #mds-submit-btn:hover:not(:disabled){background:#1d4ed8;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(37,99,235,.7)}
#mds-popup #mds-submit-btn:disabled{opacity:.7;cursor:not-allowed}
#mds-popup .mds-loader{
  display:inline-block;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:mds-spin .7s linear infinite;flex-shrink:0;
}
@keyframes mds-spin{to{transform:rotate(360deg)}}
#mds-popup #mds-loading-msg{font-size:12.5px;color:#64748B;text-align:center;margin-top:4px;line-height:1.5}
body.mds-popup-open{overflow:hidden}

/* ---------- Responsive ---------- */
@media(max-width:1023px){
  .mds-hero-grid,.mds-two{grid-template-columns:1fr;gap:32px}
  .mds-grid--3,.mds-grid--4{grid-template-columns:repeat(2,1fr)}
  .mds-section{padding:72px 0}
  .mds-hero{padding:32px 0 64px}
}
@media(max-width:640px){
  .mds-page{font-size:16px}
  .mds-grid--2,.mds-grid--3,.mds-grid--4{grid-template-columns:1fr}
  .mds-cr .mds-btn{width:100%;justify-content:center}
  .mds-card{padding:22px}
  #mds-popup{padding:16px;align-items:flex-start;padding-top:60px}
  #mds-popup .mds-popup-content{padding:28px 22px 24px;border-radius:16px;max-width:100%}
  #mds-popup .mds-popup-content h3{font-size:20px;margin-bottom:20px}
  #mds-popup #mds-submit-btn{padding:13px 20px;font-size:15px}
  .mds-sample-hdr,.mds-sample-ftr{padding:14px 16px}
  .mds-sample-ftr{flex-direction:column;align-items:stretch;gap:12px}
  .mds-sample-dl-btn{justify-content:center;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .mds-page *,.mds-page *::before,.mds-page *::after{animation:none !important;transition:none !important}
}