/* ==========================================================================
   Mọt Phim UI — content pages + footer redesign (08/2026)
   Ngôn ngữ thị giác: "phòng chiếu" — nền tối #14161E, vàng đèn chiếu #FECF59.
   Chữ ký: vệt sáng máy chiếu trên hero + dải đục lỗ film-strip ở footer.
   Prefix: .mpc- (Mọt Phim content). Footer giữ class cũ, chỉ nâng cấp.
   ========================================================================== */

:root {
  --mp-bg: #14161E;
  --mp-surface: #1B1E2A;
  --mp-surface-2: #232736;
  --mp-line: rgba(255, 255, 255, .07);
  --mp-ink: rgba(255, 255, 255, .88);
  --mp-muted: rgba(255, 255, 255, .55);
  --mp-gold: #FECF59;
  --mp-gold-deep: #E8A93D;
  --mp-gold-grad: linear-gradient(90deg, #FECF59, #FF9E2C);
  --mp-ok: #58C88A;
}

/* ---------------------------------------------------------------- hero -- */

.mpc-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mp-line);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--mp-surface-2), var(--mp-surface) 55%);
  padding: 2.6rem 2.4rem 2.4rem 3.2rem;
  margin-bottom: 2rem;
}
/* vệt sáng máy chiếu */
.mpc-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 75%;
  height: 180%;
  background: radial-gradient(ellipse at 12% 18%, rgba(254, 207, 89, .16), rgba(254, 207, 89, .05) 42%, transparent 68%);
  pointer-events: none;
}
/* dải đục lỗ film strip dọc mép trái */
.mpc-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 7px,
      rgba(254, 207, 89, .28) 7px 15px,
      transparent 15px 22px);
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent);
          mask: linear-gradient(90deg, #000 55%, transparent);
  pointer-events: none;
}
.mpc-hero > * { position: relative; }

.mpc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-gold);
  margin-bottom: .9rem;
}
.mpc-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--mp-gold-grad);
  border-radius: 2px;
}

.mpc-hero .mpc-title,
h2.mpc-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 .8rem;
  text-wrap: balance;
}
.mpc-lead {
  color: var(--mp-muted);
  font-size: 15.5px;
  line-height: 1.85;
  max-width: 68ch;
  margin: 0;
}
.mpc-lead strong, .mpc-lead b { color: var(--mp-ink); }
.mpc-lead .accent { color: var(--mp-gold); }

/* stat strip (số liệu thật từ DB) */
.mpc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}
.mpc-stat {
  min-width: 130px;
  padding: .8rem 1.1rem;
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}
.mpc-stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--mp-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.mpc-stat span {
  font-size: 12px;
  color: var(--mp-muted);
}

/* ------------------------------------------------------------- article -- */

.mpc-prose { max-width: 860px; }
.mpc-prose p,
.mpc-prose li {
  color: var(--mp-ink);
  font-size: 15px;
  line-height: 1.85;
}
.mpc-prose p { margin: 0 0 1rem; }
.mpc-prose a { color: var(--mp-gold); text-decoration: underline; text-decoration-color: rgba(254,207,89,.35); text-underline-offset: 3px; }
.mpc-prose a:hover { text-decoration-color: var(--mp-gold); color: #ffe08a; }
.mpc-prose strong { color: #fff; }

/* section: mỗi h3 mở một mạch nội dung, phân đoạn bằng nét mảnh */
.mpc-prose .heading-sm {
  position: relative;
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 2.4rem 0 .9rem;
  padding: 1.6rem 0 0 1.05rem;
  border-top: 1px solid var(--mp-line);
  text-align: left;
}
.mpc-prose .heading-sm::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.6rem + .3em);
  width: 4px;
  height: .95em;
  border-radius: 3px;
  background: var(--mp-gold-grad);
}
.mpc-prose .heading-sm:first-of-type { border-top: 0; padding-top: .4rem; }
.mpc-prose .heading-sm:first-of-type::before { top: calc(.4rem + .3em); }

.mpc-prose .v-ul { list-style: none; padding-left: .2rem; margin: 0 0 1.1rem; }
.mpc-prose .v-ul li { position: relative; padding-left: 1.15rem; }
.mpc-prose .v-ul li + li { margin-top: .55rem; }
.mpc-prose .v-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-gold);
  opacity: .8;
}

/* --------------------------------------------------------------- steps -- */

.mpc-steps {
  counter-reset: mpstep;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.2rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.mpc-steps li {
  counter-increment: mpstep;
  position: relative;
  padding: 2.6rem 1.2rem 1.2rem;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
  font-size: 14.5px;
  line-height: 1.7;
}
.mpc-steps li::before {
  content: counter(mpstep, decimal-leading-zero);
  position: absolute;
  top: .85rem;
  left: 1.2rem;
  font-size: .95rem;
  font-weight: 900;
  color: var(--mp-gold);
  letter-spacing: .06em;
}
.mpc-steps li strong { display: block; color: #fff; margin-bottom: .2rem; }

/* ----------------------------------------------------------------- faq -- */

/* chip index đầu trang */
.mpc-faq-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .9rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
}
.mpc-faq-index li { margin: 0; padding: 0; }
.mpc-faq-index a {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  padding: .35rem .5rem;
  border-radius: 8px;
  color: var(--mp-muted);
  text-decoration: none;
}
.mpc-faq-index a:hover { color: var(--mp-gold); background: rgba(254, 207, 89, .07); }

/* accordion */
details.mpc-faq {
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  background: var(--mp-surface);
  margin-bottom: .7rem;
  overflow: hidden;
  scroll-margin-top: 110px;
}
details.mpc-faq summary {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  cursor: pointer;
  list-style: none;
  padding: .95rem 2.6rem .95rem 1.1rem;
  position: relative;
  font-weight: 600;
  color: var(--mp-ink);
  font-size: 14.5px;
  line-height: 1.55;
}
details.mpc-faq summary::-webkit-details-marker { display: none; }
details.mpc-faq summary .num {
  flex: none;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--mp-gold);
  border: 1px solid rgba(254, 207, 89, .4);
  border-radius: 6px;
  padding: .1rem .4rem;
  font-variant-numeric: tabular-nums;
}
details.mpc-faq summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--mp-muted);
  transition: transform .2s ease;
}
details.mpc-faq[open] summary::after { content: "−"; color: var(--mp-gold); }
details.mpc-faq[open] { border-color: rgba(254, 207, 89, .35); }
details.mpc-faq[open] summary { color: #fff; }
details.mpc-faq .mpc-faq-a {
  padding: 0 1.15rem 1.1rem 1.15rem;
  border-top: 1px dashed var(--mp-line);
  margin: 0 0 0;
}
details.mpc-faq .mpc-faq-a p { margin: .9rem 0 0; color: var(--mp-muted); font-size: 14.5px; line-height: 1.8; }
details.mpc-faq .mpc-faq-a strong { color: var(--mp-ink); }
details.mpc-faq .mpc-faq-a a { color: var(--mp-gold); }

/* --------------------------------------------------------------- cards -- */

.mpc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.4rem 0;
}
.mpc-card {
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
  padding: 1.25rem 1.3rem;
}
.mpc-card .mpc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(254, 207, 89, .1);
  color: var(--mp-gold);
  font-size: 15px;
  margin-bottom: .75rem;
}
.mpc-card h4 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
}
.mpc-card p { font-size: 13.5px; color: var(--mp-muted); line-height: 1.7; margin: 0 0 .6rem; }
.mpc-card a.mpc-card-link { color: var(--mp-gold); font-weight: 600; font-size: 14px; text-decoration: none; }
.mpc-card a.mpc-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mpc-card .mpc-soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-muted);
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 99px;
  padding: .15rem .6rem;
}

/* ----------------------------------------------------------------- toc -- */

.mpc-toc {
  border: 1px solid var(--mp-line);
  border-left: 3px solid var(--mp-gold);
  border-radius: 12px;
  background: var(--mp-surface);
  padding: 1.1rem 1.3rem;
  margin: 0 0 2rem;
}
.mpc-toc .mpc-toc-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mp-gold);
  margin: 0 0 .6rem;
}
.mpc-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2.5rem;
}
.mpc-toc li { font-size: 13.5px; line-height: 1.6; margin: 0 0 .35rem; break-inside: avoid; }
.mpc-toc a { color: var(--mp-muted); text-decoration: none; }
.mpc-toc a:hover { color: var(--mp-gold); }
.mpc-prose .heading-sm[id] { scroll-margin-top: 110px; }

/* ------------------------------------------------------------ timeline -- */

.mpc-timeline {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0 0 0 1.55rem;
  position: relative;
}
.mpc-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--mp-gold), rgba(254, 207, 89, .1));
  border-radius: 2px;
}
.mpc-timeline li { position: relative; padding: 0 0 1.2rem; font-size: 14.5px; line-height: 1.75; }
.mpc-timeline li::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: .48em;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--mp-bg);
  border: 2px solid var(--mp-gold);
}
.mpc-timeline .mpc-tl-year {
  display: inline-block;
  font-weight: 900;
  color: var(--mp-gold);
  font-variant-numeric: tabular-nums;
  margin-right: .45rem;
}
.mpc-timeline strong { color: #fff; }

/* ----------------------------------------------------------------- cta -- */

.mpc-cta {
  position: relative;
  overflow: hidden;
  margin: 2.4rem 0 0;
  border: 1px solid rgba(254, 207, 89, .3);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(254, 207, 89, .16), transparent 55%),
    var(--mp-surface);
  padding: 1.8rem 1.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.mpc-cta .mpc-cta-txt { max-width: 60ch; }
.mpc-cta .mpc-cta-txt strong { color: #fff; font-size: 1.05rem; display: block; margin-bottom: .25rem; }
.mpc-cta .mpc-cta-txt span { color: var(--mp-muted); font-size: 14px; line-height: 1.7; }
.mpc-cta .button-play { flex: none; }

/* ------------------------------------------------ homepage browse grid -- */

/* Khối điều hướng 6 danh mục dưới hero. Bỏ kiểu card căn giữa (khó quét mắt),
   chuyển sang thẻ căn trái có chip icon; vệt vàng mép trái trượt vào khi hover. */
.mp-browse { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.mp-browse-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.15rem;
}
.mp-browse-head b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mp-gold);
  white-space: nowrap;
}
.mp-browse-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(254, 207, 89, .3), transparent);
}

.mp-browse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}

.mp-browse-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.mp-browse-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mp-gold-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s ease;
}
.mp-browse-item:hover {
  border-color: rgba(254, 207, 89, .38);
  background: var(--mp-surface-2);
  transform: translateY(-2px);
}
.mp-browse-item:hover::before { transform: scaleY(1); }
.mp-browse-item:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; }

.mp-browse-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: .3rem;
  border-radius: 10px;
  background: rgba(254, 207, 89, .1);
  color: var(--mp-gold);
  font-size: 15px;
}
.mp-browse-item .nav-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -.01em;
}
.mp-browse-item .nav-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mp-muted);
}

/* ----------------------------------------------------- homepage article -- */

/* Bài SEO cuối trang chủ (#about) — đọc dài, cần nhịp nghỉ rõ giữa các mạch */
/* Ghi đè rule #about cũ trong main.css (font-size 1.5em + text-align justify + padding 3rem):
   justify làm giãn chữ vỡ nhịp đọc tiếng Việt, cỡ chữ 1.5em phá thang typography. */
#about.mpc-article {
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  color: var(--mp-ink);
  padding: 0;
}
/* Rule cũ `#about h2,#about h3,#about h4{color:#fecf59}` tô vàng toàn bộ heading —
   thừa vàng khi h2 đã có thanh gradient riêng. Trả heading về trắng, giữ vàng cho accent. */
#about.mpc-article h2,
#about.mpc-article h3 { color: #fff; }
#about.mpc-article > p,
#about.mpc-article li { color: var(--mp-ink); }
.mpc-article { max-width: 900px; margin: 0 auto; }
.mpc-article > p { color: var(--mp-ink); font-size: 15px; line-height: 1.85; margin: 0 0 1rem; }
.mpc-article a { color: var(--mp-gold); text-decoration: underline; text-decoration-color: rgba(254, 207, 89, .35); text-underline-offset: 3px; }
.mpc-article a:hover { color: #ffe08a; text-decoration-color: var(--mp-gold); }
.mpc-article strong { color: #fff; }

.mpc-article h2 {
  position: relative;
  font-size: clamp(1.22rem, 1.02rem + .72vw, 1.58rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.35;
  margin: 3rem 0 .9rem;
  padding-top: 1.75rem;
  text-wrap: balance;
}
.mpc-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--mp-gold-grad);
}
.mpc-article > h2:first-child { margin-top: 1rem; }
.mpc-article h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 1.7rem 0 .45rem;
}

/* 6 lý do chọn Mọt Phim — enumeration, số hoá bằng counter */
.mpc-feature-grid {
  counter-reset: mpfeat;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.4rem 0 1.2rem;
}
.mpc-feature {
  counter-increment: mpfeat;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
  padding: 1.15rem 1.2rem 1.25rem;
}
.mpc-feature::before {
  content: counter(mpfeat, decimal-leading-zero);
  display: block;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--mp-gold);
  margin-bottom: .45rem;
}
.mpc-feature h3 { margin: 0 0 .4rem; font-size: 14.5px; line-height: 1.45; }
.mpc-feature p { margin: 0; font-size: 13.5px; color: var(--mp-muted); line-height: 1.7; }

/* Bảng so sánh motphim vs thế hệ cũ — cặp nhãn/giá trị */
.mpc-speclist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .9rem;
  margin: 1.2rem 0 1.4rem;
  padding: 0;
}
.mpc-speclist li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .65rem .9rem;
  border: 1px solid var(--mp-line);
  border-left: 2px solid rgba(254, 207, 89, .5);
  border-radius: 10px;
  background: rgba(0, 0, 0, .2);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mp-muted);
}
.mpc-speclist li strong { color: var(--mp-gold); font-weight: 700; flex: none; }

/* -------------------------------------------------------------- footer -- */

/* dải đục lỗ film strip ở mép trên footer */
footer {
  position: relative;
  border-top: 1px solid rgba(254, 207, 89, .18);
}
footer::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg,
    transparent 0 12px,
    rgba(254, 207, 89, .14) 12px 26px,
    transparent 26px 38px);
  pointer-events: none;
}
footer .container { position: relative; }

/* banner chủ quyền: gọn, tách khỏi grid */
footer .true .line-center {
  display: inline-flex;
  gap: .5rem;
  font-weight: 600;
}

/* heading cột đã có underline gold — tinh chỉnh khoảng thở */
/* 5 cột: Thương hiệu | Chuyên mục | Thể loại | Hỗ trợ | Thông tin */
.footer-grid { padding-top: 1.6rem; grid-template-columns: 1.7fr 1fr 1.1fr 1fr 1.4fr; gap: 2rem; }
.footer-heading { letter-spacing: .17em; }
/* Có 4 cột link — chia theo bội số của 4 để không cột nào bị rớt lẻ một mình */
@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.6rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2rem; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Icon mạng xã hội chưa có địa chỉ: hiển thị mờ, không tương tác */
.footer-social-item.is-soon {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

/* nav links */
.footer-nav a {
  display: block;
  padding: .32rem 0;
  color: var(--mp-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.footer-nav a:hover { color: var(--mp-gold); transform: translateX(3px); }

/* bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--mp-line);
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  font-size: 13px;
  color: var(--mp-muted);
}
.footer-bottom .footer-year {
  border: 1px solid var(--mp-line);
  border-radius: 99px;
  padding: .1rem .6rem;
  font-variant-numeric: tabular-nums;
}
.footer-bottom-left { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.footer-bottom-right a {
  color: var(--mp-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}
.footer-bottom-right a:hover { color: var(--mp-gold); }
.footer-bottom-right a:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; border-radius: 4px; }

/* Nút back-to-top (#totop) là position:fixed góc phải dưới và chỉ hiện từ 1280px.
   Chừa chỗ để nó không đè lên dải "Hệ sinh thái" ở thanh cuối footer. */
@media (min-width: 1280px) {
  .footer-bottom { padding-right: 76px; }
}

/* ---------------------------------------------------- focus & motion -- */

.mpc-faq-index a:focus-visible,
.mpc-toc a:focus-visible,
details.mpc-faq summary:focus-visible,
.footer-nav a:focus-visible,
.footer-ecosystem .eco-item:focus-visible,
.mpc-card a:focus-visible {
  outline: 2px solid var(--mp-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-nav a, .footer-ecosystem .eco-item, details.mpc-faq summary::after { transition: none; }
  .footer-nav a:hover { transform: none; }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  .mpc-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .mp-browse-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .mp-browse-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mpc-hero { padding: 2rem 1.4rem 1.8rem 2rem; }
  .mpc-steps { grid-template-columns: 1fr; }
  .mpc-cards { grid-template-columns: 1fr; }
  .mpc-faq-index { grid-template-columns: 1fr; }
  .mpc-toc ol { columns: 1; }
  .mpc-cta { padding: 1.4rem 1.3rem; }
  .mpc-feature-grid { grid-template-columns: 1fr; }
  .mpc-speclist { grid-template-columns: 1fr; }
  .mpc-article h2 { margin-top: 2.4rem; }
}