/*
Theme Name: Mängupank
Theme URI: https://mangupank.ee/
Author: Mängupank
Author URI: https://mangupank.ee/
Description: Mängupanga modernne müügileht ja SEO blogi WordPressi teema.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mangupank
*/

.mp-clean,
    .mp-clean * {
      box-sizing: border-box;
    }

    .mp-clean {
      --bg: #fbf6ed;
      --bg-2: #f4ecdf;
      --text: #161514;
      --muted: #68625b;
      --line: rgba(22, 21, 20, .12);
      --card: #fffdf8;
      --dark: #151513;
      --orange: #ef6530;
      --orange-dark: #cf4c1c;
      --green: #1a8f69;
      --blue: #3157d5;
      --yellow: #f3b33d;
      --shadow: 0 24px 70px rgba(34, 24, 12, .14);
      --soft-shadow: 0 14px 40px rgba(34, 24, 12, .09);
      font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--bg);
      overflow: hidden;
      isolation: isolate;
    }

    .mp-clean a {
      color: inherit;
      text-decoration: none;
    }

    .mp-wrap {
      width: min(1160px, calc(100% - 36px));
      margin: 0 auto;
    }

    .mp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.02em;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      white-space: nowrap;
    }

    .mp-btn:hover {
      transform: translateY(-2px);
    }

    .mp-btn-primary {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 14px 32px rgba(239, 101, 48, .28);
    }

    .mp-btn-primary:hover {
      background: var(--orange-dark);
      color: #fff;
    }

    .mp-btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, .55);
      background: rgba(255, 255, 255, .10);
      backdrop-filter: blur(12px);
    }

    .mp-btn-ghost:hover {
      background: rgba(255, 255, 255, .18);
      color: #fff;
    }

    .mp-btn-dark {
      background: var(--dark);
      color: #fff;
    }

    .mp-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .92);
      color: #28231d;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    }

    .mp-hero {
      position: relative;
      min-height: 860px;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(13, 12, 10, .82) 0%, rgba(13, 12, 10, .58) 48%, rgba(13, 12, 10, .36) 100%),
        linear-gradient(0deg, rgba(13, 12, 10, .84) 0%, rgba(13, 12, 10, .08) 54%),
        url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2400&q=82') center/cover;
      overflow: hidden;
    }

    .mp-hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 130px;
      background: linear-gradient(180deg, rgba(251, 246, 237, 0), var(--bg) 88%);
      pointer-events: none;
    }

    .mp-header {
      position: absolute;
      z-index: 20;
      top: 18px;
      left: 0;
      right: 0;
    }

    .mp-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 70px;
      padding: 12px 14px 12px 18px;
      border-radius: 999px;
      color: var(--text);
      background: rgba(255, 253, 248, .94);
      border: 1px solid rgba(255, 255, 255, .72);
      box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
      backdrop-filter: blur(18px);
    }

    .mp-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      font-weight: 900;
      letter-spacing: -.045em;
      font-size: 21px;
    }


    /* Logo rida korda */
      .mangupank-landing .mp-logo,
      .mp-logo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-decoration: none !important;
        color: #111827 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }

      /* Logo tekst täringu kõrvale */
      .mangupank-landing .mp-logo strong,
      .mp-logo strong {
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        letter-spacing: -0.04em !important;
        color: #111827 !important;
        margin: 0 !important;
        line-height: 1 !important;
      }

      /* Oranž täringu ikoon */
      .mangupank-landing .mp-dice-icon,
      .mp-dice-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #ff5a1f 0%, #ffb800 55%, #ffd166 100%) !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        padding: 8px !important;
        gap: 3px !important;
        box-shadow: 0 14px 30px rgba(255, 122, 26, 0.32) !important;
        transform: rotate(-4deg);
      }

      /* Täringu täpid */
      .mangupank-landing .mp-dice-icon span,
      .mp-dice-icon span {
        width: 7px !important;
        height: 7px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        display: block !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
      }

      /* Täppide asetus: number 5 */
      .mangupank-landing .mp-dice-icon span:nth-child(1),
      .mp-dice-icon span:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
      }

      .mangupank-landing .mp-dice-icon span:nth-child(2),
      .mp-dice-icon span:nth-child(2) {
        grid-column: 3 !important;
        grid-row: 1 !important;
      }

      .mangupank-landing .mp-dice-icon span:nth-child(3),
      .mp-dice-icon span:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
      }

      .mangupank-landing .mp-dice-icon span:nth-child(4),
      .mp-dice-icon span:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
      }

      .mangupank-landing .mp-dice-icon span:nth-child(5),
      .mp-dice-icon span:nth-child(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
      }

      /* Headeri joondus */
      .mangupank-landing .mp-nav,
      .mp-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 20px !important;
      }

    .mp-brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 16px;
      color: #fff;
      background: var(--orange);
      box-shadow: 0 14px 28px rgba(239, 101, 48, .28);
      font-size: 20px;
    }

    .mp-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: #403b35;
      font-size: 14px;
      font-weight: 750;
    }

    .mp-links a {
      opacity: .88;
    }

    .mp-links a:hover {
      opacity: 1;
      color: var(--orange-dark);
    }

    .mp-nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mp-nav .mp-btn {
      min-height: 46px;
      padding: 0 18px;
      font-size: 14px;
    }

    .mp-menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--text);
      font-size: 21px;
      cursor: pointer;
    }

    .mp-mobile-panel {
      display: none;
      margin-top: 10px;
      padding: 12px;
      border-radius: 24px;
      background: rgba(255, 253, 248, .98);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, .70);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .16);
    }

    .mp-mobile-panel a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 46px;
      padding: 0 8px;
      border-bottom: 1px solid rgba(22, 21, 20, .08);
      color: #332f2a;
      font-weight: 800;
      font-size: 15px;
    }

    .mp-mobile-panel a:last-of-type {
      border-bottom: 0;
    }

    .mp-mobile-panel .mp-btn {
      width: 100%;
      margin-top: 12px;
      justify-content: center;
      color: #fff;
    }

    .mp-clean.is-open .mp-mobile-panel {
      display: block;
    }

    .mp-hero-content {
      position: relative;
      z-index: 5;
      min-height: 860px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
      gap: clamp(34px, 6vw, 76px);
      align-items: center;
      padding: 150px 0 104px;
    }

    .mp-hero-inner {
      width: 100%;
      max-width: 740px;
    }

    .mp-eyebrow {
      margin-bottom: 24px;
    }

    .mp-hero h1 {
      margin: 0;
      font-size: clamp(50px, 7.4vw, 94px);
      line-height: .92;
      letter-spacing: -.075em;
      max-width: 820px;
      text-wrap: balance;
    }

    .mp-hero h1 em {
      font-family: "Instrument Serif", Georgia, serif;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -.045em;
      color: #ffd49b;
    }

    .mp-hero-lead {
      margin: 26px 0 0;
      max-width: 640px;
      color: rgba(255, 255, 255, .90);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.55;
      letter-spacing: -.025em;
    }

    .mp-hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

    .mp-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
    }

    .mp-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      color: rgba(255, 255, 255, .88);
      font-size: 13px;
      font-weight: 800;
      backdrop-filter: blur(10px);
    }

    .mp-hero-aside {
      position: relative;
      z-index: 6;
      width: 100%;
      display: grid;
      gap: 14px;
    }

    .mp-video-card {
      position: relative;
      min-height: 430px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
      padding: 22px;
      border-radius: 36px;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(180deg, rgba(10, 9, 8, .08), rgba(10, 9, 8, .82)),
        url('https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=1400&q=84') center/cover;
      box-shadow: 0 28px 74px rgba(0, 0, 0, .30);
      border: 1px solid rgba(255, 255, 255, .22);
      isolation: isolate;
    }

    .mp-video-card::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 26px;
      pointer-events: none;
      z-index: -1;
    }

    .mp-video-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .mp-video-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      color: #201a14;
      background: rgba(255, 255, 255, .92);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .mp-video-time {
      color: rgba(255, 255, 255, .86);
      font-size: 13px;
      font-weight: 850;
      text-shadow: 0 1px 12px rgba(0,0,0,.3);
    }

    .mp-video-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }

    .mp-video-card b {
      display: block;
      max-width: 320px;
      font-size: clamp(25px, 3vw, 34px);
      line-height: 1.02;
      letter-spacing: -.06em;
    }

    .mp-video-card span span,
    .mp-video-card p {
      display: block;
      margin: 8px 0 0;
      color: rgba(255, 255, 255, .82);
      font-size: 14px;
      font-weight: 750;
      line-height: 1.5;
    }

    .mp-play {
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      color: var(--text);
      background: #fff;
      font-size: 28px;
      box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
    }

    .mp-video-bar {
      position: relative;
      display: block;
      width: 100%;
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, .25);
    }

    .mp-video-bar i {
      display: block;
      width: 38%;
      height: 100%;
      border-radius: inherit;
      background: #fff;
    }

    .mp-event-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: center;
      background: rgba(255, 253, 248, .96);
      color: var(--text);
      border-radius: 26px;
      padding: 16px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, .20);
      border: 1px solid rgba(255, 255, 255, .58);
    }

    .mp-event-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: #f7e8d5;
      color: var(--orange-dark);
      font-size: 23px;
    }

    .mp-event-card small {
      display: block;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 4px;
    }

    .mp-event-card h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.12;
      letter-spacing: -.045em;
    }

    .mp-event-card ul {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 2px 0 0;
    }

    .mp-event-card li {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(26, 143, 105, .10);
      color: #39342e;
      font-size: 12px;
      font-weight: 800;
    }

    .mp-event-card i {
      color: var(--green);
      font-size: 15px;
    }

    .mp-section {
      padding: 92px 0;
      position: relative;
    }

    .mp-section-tight {
      padding: 62px 0;
    }

    .mp-section-head {
      max-width: 760px;
      margin-bottom: 34px;
    }

    .mp-section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .mp-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px;
      color: var(--orange-dark);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .mp-section h2 {
      margin: 0;
      color: var(--text);
      line-height: .98;
      letter-spacing: -.07em;
      text-wrap: balance;
    }

    .mp-section h2 em {
      font-family: "Instrument Serif", Georgia, serif;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -.035em;
      color: var(--orange-dark);
    }

    .mp-section-head p {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.65;
      letter-spacing: -.025em;
    }

    .mp-split {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 36px;
      align-items: stretch;
    }

    .mp-photo-panel {
      min-height: 520px;
      border-radius: 36px;
      background:
        linear-gradient(180deg, rgba(12, 11, 9, .05), rgba(12, 11, 9, .58)),
        url('https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=1200&q=82') center/cover;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 24px;
      color: #fff;
    }

    .mp-photo-panel strong {
      display: block;
      max-width: 320px;
      font-size: 28px;
      line-height: 1.08;
      letter-spacing: -.055em;
    }

    .mp-photo-panel span {
      display: block;
      margin-top: 8px;
      color: rgba(255, 255, 255, .80);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }

    .mp-problem-list {
      display: grid;
      gap: 14px;
    }

    .mp-problem-item {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 14px;
      align-items: start;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255, 253, 248, .82);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
    }

    .mp-problem-item i {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: var(--dark);
      font-size: 20px;
    }

    .mp-problem-item b {
      display: block;
      font-size: 18px;
      letter-spacing: -.035em;
      margin-bottom: 4px;
    }

    .mp-problem-item span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
      font-weight: 600;
    }

    .mp-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .mp-step {
      position: relative;
      min-height: 250px;
      padding: 24px;
      border-radius: 32px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    .mp-step::after {
      content: attr(data-step);
      position: absolute;
      right: 20px;
      bottom: -12px;
      color: rgba(22, 21, 20, .07);
      font-size: 120px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.1em;
    }

    .mp-step i {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      color: #fff;
      background: var(--orange);
      font-size: 23px;
      margin-bottom: 22px;
    }

    .mp-step h3,
    .mp-card h3,
    .mp-price h3 {
      margin: 0;
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: -.055em;
    }

    .mp-step p,
    .mp-card p,
    .mp-price p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
      font-weight: 600;
    }

    .mp-categories {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .mp-card {
      min-height: 220px;
      padding: 20px;
      border-radius: 28px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .mp-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }

    .mp-card i {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: #fff;
      background: var(--dark);
      font-size: 21px;
      margin-bottom: 20px;
    }

    .mp-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 16px;
    }

    .mp-chip-row span {
      padding: 7px 9px;
      border-radius: 999px;
      background: #f1e8da;
      color: #433d35;
      font-size: 11px;
      font-weight: 850;
    }

    .mp-showcase {
      position: relative;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(14, 13, 12, .86), rgba(14, 13, 12, .56)),
        url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2200&q=82') center/cover fixed;
    }

    .mp-showcase .mp-kicker,
    .mp-showcase h2,
    .mp-showcase p {
      color: #fff;
    }

    .mp-showcase p {
      color: rgba(255, 255, 255, .78);
    }

    .mp-games {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .mp-game {
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      border-radius: 30px;
      background: rgba(255, 255, 255, .94);
      color: var(--text);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
    }

    .mp-game-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .mp-game h3 {
      margin: 0;
      font-size: 25px;
      line-height: 1.08;
      letter-spacing: -.055em;
    }

    .mp-game p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      font-weight: 650;
    }

    .mp-level {
      padding: 7px 9px;
      border-radius: 999px;
      background: #f2eadf;
      color: #413b35;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .mp-game-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .mp-game-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #3f3933;
      font-size: 12px;
      font-weight: 800;
      padding: 8px 10px;
      border-radius: 999px;
      background: #f6efe5;
    }

    .mp-included {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: start;
    }

    .mp-detail-card {
      padding: 26px;
      border-radius: 34px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .mp-detail-card h3 {
      margin: 0 0 18px;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: -.06em;
    }

    .mp-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .mp-detail-grid div {
      padding: 13px;
      border-radius: 18px;
      background: #f6efe5;
      color: #39342e;
      font-size: 13px;
      font-weight: 800;
    }

    .mp-detail-grid i {
      color: var(--orange-dark);
      margin-right: 7px;
    }

    .mp-content-list {
      display: grid;
      gap: 12px;
    }

    .mp-content-list div {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255, 253, 248, .86);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
      font-weight: 750;
      line-height: 1.45;
    }

    .mp-content-list i {
      color: var(--green);
      font-size: 20px;
      flex: 0 0 auto;
    }

    .mp-pricing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .mp-price {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 24px;
      border-radius: 32px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
    }

    .mp-price.featured {
      background: var(--dark);
      color: #fff;
      transform: translateY(-10px);
      box-shadow: 0 30px 80px rgba(21, 21, 19, .28);
    }

    .mp-price.featured p,
    .mp-price.featured li {
      color: rgba(255, 255, 255, .76);
    }

    .mp-badge {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 14px;
      padding: 8px 10px;
      border-radius: 999px;
      background: #ffd49b;
      color: #2f2116;
      font-size: 12px;
      font-weight: 900;
    }

    .mp-price-value {
      margin: 22px 0 16px;
      font-size: 44px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.075em;
    }

    .mp-price-value span {
      font-size: 14px;
      color: var(--muted);
      letter-spacing: -.02em;
    }

    .mp-price.featured .mp-price-value span {
      color: rgba(255, 255, 255, .65);
    }

    .mp-price ul {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      display: grid;
      gap: 10px;
    }

    .mp-price li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #403b35;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.45;
    }

    .mp-price li i {
      color: var(--green);
      flex: 0 0 auto;
      margin-top: 1px;
    }

    .mp-price .mp-btn {
      margin-top: auto;
      width: 100%;
    }

    .mp-testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .mp-quote {
      padding: 22px;
      border-radius: 30px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
    }

    .mp-quote p {
      margin: 0;
      color: #2f2b27;
      font-size: 16px;
      line-height: 1.65;
      font-weight: 650;
    }

    .mp-quote b {
      display: block;
      margin-top: 18px;
      font-size: 14px;
      color: var(--orange-dark);
    }

    .mp-faq {
      display: grid;
      gap: 10px;
      margin: 0 auto;
    }

    .mp-faq-item {
      border-radius: 22px;
      background: var(--card);
      border: 1px solid var(--line);
      overflow: hidden;
      box-shadow: 0 12px 30px rgba(34, 24, 12, .06);
    }

    .mp-faq-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 68px;
      padding: 0 20px;
      border: 0;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      text-align: left;
      font: inherit;
      font-weight: 850;
      letter-spacing: -.025em;
    }

    .mp-faq-btn i {
      transition: transform .18s ease;
    }

    .mp-faq-answer {
      display: none;
      padding: 0 20px 20px;
      color: var(--muted);
      line-height: 1.65;
      font-weight: 600;
    }

    .mp-faq-item.open .mp-faq-answer {
      display: block;
    }

    .mp-faq-item.open .mp-faq-btn i {
      transform: rotate(180deg);
    }

    .mp-final {
      color: #fff;
      background:
        linear-gradient(90deg, rgba(12, 11, 9, .88), rgba(12, 11, 9, .54)),
        url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2200&q=82') center/cover;
    }

    .mp-final h2,
    .mp-final p,
    .mp-final .mp-kicker {
      color: #fff;
    }

    .mp-sticky-cta {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 50;
      border-radius: 22px;
      padding: 10px;
      background: rgba(255, 253, 248, .96);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .7);
    }

    .mp-sticky-cta .mp-btn {
      width: 100%;
    }

    @media (max-width: 1080px) {
      .mp-links,
      .mp-nav-actions {
        display: none;
      }

      .mp-menu-toggle {
        display: grid;
        place-items: center;
      }

      .mp-hero-aside {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 34px;
        grid-template-columns: 1fr 1fr;
      }

      .mp-hero-content {
        padding-bottom: 72px;
      }

      .mp-split,
      .mp-included {
        grid-template-columns: 1fr;
      }

      .mp-categories,
      .mp-games {
        grid-template-columns: repeat(2, 1fr);
      }

      .mp-pricing,
      .mp-testimonials,
      .mp-steps {
        grid-template-columns: 1fr;
      }

      .mp-price.featured {
        transform: none;
      }
    }

    @media (max-width: 720px) {
      .mp-wrap {
        width: min(100% - 28px, 1160px);
      }

      .mp-hero {
        min-height: auto;
        background:
          linear-gradient(180deg, rgba(12, 11, 9, .74) 0%, rgba(12, 11, 9, .86) 58%, rgba(12, 11, 9, .91) 100%),
          url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=1200&q=82') center/cover;
      }

      .mp-header {
        top: 12px;
      }

      .mp-nav {
        min-height: 62px;
        padding: 9px 10px 9px 12px;
        border-radius: 24px;
      }

      .mp-brand {
        font-size: 19px;
      }

      .mp-brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
      }

      .mp-menu-toggle {
        width: 42px;
        height: 42px;
      }

      .mp-mobile-panel {
        border-radius: 20px;
      }

      .mp-hero-content {
        min-height: auto;
        padding: 122px 0 52px;
      }

      .mp-hero h1 {
        font-size: clamp(42px, 13vw, 58px);
        line-height: .96;
        letter-spacing: -.065em;
      }

      .mp-hero-lead {
        margin-top: 18px;
        font-size: 17px;
        line-height: 1.55;
      }

      .mp-hero-actions {
        align-items: stretch;
        margin-top: 24px;
      }

      .mp-hero-actions .mp-btn {
        width: 100%;
      }

      .mp-hero-meta {
        gap: 8px;
        margin-top: 22px;
      }

      .mp-meta-pill {
        width: 100%;
        justify-content: center;
        background: rgba(255, 255, 255, .10);
      }

      .mp-hero-aside {
        grid-template-columns: 1fr;
        margin-top: 28px;
      }

      .mp-event-card,
      .mp-video-card {
        border-radius: 24px;
      }

      .mp-video-card {
        min-height: 185px;
      }

      .mp-section {
        padding: 64px 0;
      }

      .mp-section-tight {
        padding: 48px 0;
      }

      .mp-section h2 {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.02;
      }

      .mp-section-head p {
        font-size: 16px;
      }

      .mp-photo-panel {
        min-height: 360px;
        border-radius: 28px;
      }

      .mp-categories,
      .mp-games,
      .mp-detail-grid {
        grid-template-columns: 1fr;
      }

      .mp-card,
      .mp-game,
      .mp-price,
      .mp-detail-card,
      .mp-quote {
        border-radius: 24px;
      }

      .mp-sticky-cta {
        display: block;
      }
    }

    @media (max-width: 1080px) {
      .mp-hero-content {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: auto;
        padding-top: 140px;
      }

      .mp-hero-inner {
        max-width: 820px;
      }

      .mp-hero-aside {
        max-width: 760px;
      }

      .mp-video-card {
        min-height: 360px;
      }
    }

    @media (max-width: 720px) {
      .mp-header {
        top: 10px;
      }

      .mp-nav {
        min-height: 60px;
        padding: 8px 9px 8px 11px;
        border-radius: 22px;
      }

      .mp-brand {
        font-size: 18px;
      }

      .mp-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        font-size: 18px;
      }

      .mp-menu-toggle {
        width: 42px;
        height: 42px;
      }

      .mp-hero {
        min-height: auto;
        background:
          linear-gradient(180deg, rgba(13, 12, 10, .74) 0%, rgba(13, 12, 10, .86) 58%, rgba(13, 12, 10, .92) 100%),
          url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=82') center/cover;
      }

      .mp-hero-content {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 116px 0 54px;
        gap: 26px;
      }

      .mp-hero h1 {
        font-size: clamp(40px, 12.5vw, 58px);
        line-height: .96;
        letter-spacing: -.065em;
      }

      .mp-hero-lead {
        margin-top: 18px;
        font-size: 17px;
      }

      .mp-hero-actions {
        align-items: stretch;
        margin-top: 24px;
      }

      .mp-hero-actions .mp-btn {
        width: 100%;
      }

      .mp-hero-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 22px;
      }

      .mp-meta-pill {
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
        background: rgba(255, 255, 255, .11);
      }

      .mp-video-card {
        min-height: 270px;
        border-radius: 26px;
        padding: 18px;
      }

      .mp-video-card::before {
        inset: 10px;
        border-radius: 19px;
      }

      .mp-video-content {
        align-items: flex-end;
      }

      .mp-video-card b {
        font-size: 25px;
      }

      .mp-play {
        width: 56px;
        height: 56px;
        font-size: 24px;
      }

      .mp-event-card {
        border-radius: 22px;
        padding: 14px;
      }

      .mp-event-card ul {
        display: grid;
        grid-template-columns: 1fr;
      }
    }


    /* =========================================================
   Games archive page
========================================================= */

.mp-games-archive-page {
  --bg: #fbf6ed;
  --bg-2: #f4ecdf;
  --text: #161514;
  --muted: #68625b;
  --line: rgba(22, 21, 20, .12);
  --card: #fffdf8;
  --dark: #151513;
  --orange: #ef6530;
  --orange-dark: #cf4c1c;
  --green: #1a8f69;
  --shadow: 0 24px 70px rgba(34, 24, 12, .14);
  --soft-shadow: 0 14px 40px rgba(34, 24, 12, .09);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.mp-games-archive-hero {
  position: relative;
  min-height: 560px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 150px 0 86px;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, .86), rgba(13, 12, 10, .48)),
    linear-gradient(0deg, rgba(13, 12, 10, .82), rgba(13, 12, 10, .10)),
    url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2200&q=82') center/cover;
}

.mp-games-archive-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 105px;
  background: linear-gradient(180deg, rgba(251, 246, 237, 0), var(--bg) 88%);
  pointer-events: none;
}

.mp-games-archive-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 42px;
  align-items: end;
}

.mp-games-archive-hero .mp-kicker,
.mp-games-archive-hero h1,
.mp-games-archive-hero p {
  color: #fff;
}

.mp-games-archive-hero h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.mp-games-archive-hero p {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  letter-spacing: -.025em;
}

.mp-games-archive-stat {
  padding: 26px;
  border-radius: 32px;
  background: rgba(255, 253, 248, .94);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .62);
  backdrop-filter: blur(16px);
}

.mp-games-archive-stat span {
  display: block;
  font-size: 62px;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.08em;
  color: var(--orange-dark);
}

.mp-games-archive-stat b {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.05em;
}

.mp-games-archive-stat small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}

.mp-games-filter-section {
  padding-top: 70px;
}

.mp-games-filter {
  margin-bottom: 46px;
  padding: 26px;
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mp-games-filter-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.mp-games-filter-head h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.065em;
}

.mp-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-dark);
  font-weight: 900;
  white-space: nowrap;
}

.mp-games-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mp-filter-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-filter-field-wide {
  grid-column: span 2;
}

.mp-filter-field span {
  color: #3d3832;
  font-size: 13px;
  font-weight: 900;
}

.mp-filter-field input,
.mp-filter-field select {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(22, 21, 20, .14);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  padding: 0 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.mp-filter-field input:focus,
.mp-filter-field select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(239, 101, 48, .14);
}

.mp-games-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.mp-btn-light {
  background: #f3eadc;
  color: var(--text);
  border-color: rgba(22, 21, 20, .10);
}

.mp-btn-light:hover {
  background: #eadcc9;
}

.mp-games-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.mp-games-results-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.065em;
}

.mp-games-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mp-game-archive-card {
  overflow: hidden;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.mp-game-archive-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.mp-game-archive-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.mp-game-archive-thumb {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: #f1e8da;
}

.mp-game-archive-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .28s ease;
}

.mp-game-archive-card:hover .mp-game-archive-thumb img {
  transform: scale(1.04);
}

.mp-game-archive-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 90, 31, .18), rgba(255, 184, 0, .22)),
    #f6efe5;
  color: var(--orange);
  font-size: 58px;
}

.mp-game-archive-access {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .94);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
}

.mp-game-archive-body {
  padding: 22px;
}

.mp-game-archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mp-game-archive-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: #f3eadc;
  color: #403a33;
  font-size: 12px;
  font-weight: 850;
}

.mp-game-archive-card h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -.06em;
}

.mp-game-archive-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 650;
}

.mp-game-archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.mp-game-archive-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #f6efe5;
  color: #3f3933;
  font-size: 12px;
  font-weight: 850;
}

.mp-game-archive-meta i {
  color: var(--orange-dark);
}

.mp-game-archive-card .mp-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--orange-dark);
  font-weight: 900;
}

.mp-games-empty {
  text-align: center;
  margin: 0 auto;
  padding: 44px 24px;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-game-empty-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: #f6efe5;
  color: var(--orange-dark);
  font-size: 30px;
}

.mp-games-empty h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.06em;
}

.mp-games-empty p {
  margin: 12px auto 22px;
  max-width: 420px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 650;
}

@media (max-width: 1080px) {
  .mp-games-archive-hero-inner {
    grid-template-columns: 1fr;
  }

  .mp-games-archive-stat {
    max-width: 420px;
  }

  .mp-games-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-games-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mp-games-archive-hero {
    min-height: auto;
    padding: 120px 0 58px;
    background:
      linear-gradient(180deg, rgba(13, 12, 10, .74), rgba(13, 12, 10, .92)),
      url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=82') center/cover;
  }

  .mp-games-archive-hero::after {
    height: 54px;
  }

  .mp-games-archive-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
    line-height: .98;
  }

  .mp-games-archive-hero p {
    font-size: 17px;
  }

  .mp-games-archive-stat {
    border-radius: 24px;
    padding: 20px;
  }

  .mp-games-archive-stat span {
    font-size: 52px;
  }

  .mp-games-filter-section {
    padding-top: 48px !important;
  }

  .mp-games-filter {
    padding: 18px;
    border-radius: 24px;
  }

  .mp-games-filter-head {
    display: grid;
    gap: 14px;
    align-items: start;
  }

  .mp-games-filter-grid {
    grid-template-columns: 1fr;
  }

  .mp-filter-field-wide {
    grid-column: auto;
  }

  .mp-games-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mp-games-filter-actions .mp-btn {
    width: 100%;
  }

  .mp-games-results-head {
    display: block;
  }

  .mp-games-archive-grid {
    grid-template-columns: 1fr;
  }

  .mp-game-archive-card {
    border-radius: 24px;
  }

  .mp-game-archive-thumb {
    height: 210px;
  }

  .mp-game-archive-body {
    padding: 18px;
  }

  .mp-game-archive-card h2 {
    font-size: 25px;
  }
}


/* =========================================================
   MÄNGUPANK BLOG INDEX / home.php
   ========================================================= */

.mp-page-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, .88), rgba(13, 12, 10, .62), rgba(13, 12, 10, .36)),
    url("https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2200&q=82") center/cover;
  overflow: hidden;
}

.mp-page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  background: linear-gradient(180deg, rgba(251, 246, 237, 0), var(--bg) 88%);
  pointer-events: none;
}

.mp-blog-hero {
  background:
    linear-gradient(90deg, rgba(13, 12, 10, .88), rgba(13, 12, 10, .58), rgba(13, 12, 10, .34)),
    url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=2200&q=82") center/cover;
}

.mp-page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 150px 0 92px;
}

.mp-page-hero .mp-kicker {
  color: #ffd49b;
  margin-bottom: 18px;
}

.mp-page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 7vw, 84px);
  line-height: .95;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.mp-page-hero p {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.62;
  letter-spacing: -.025em;
}

/* Blog search */

.mp-blog-search {
  max-width: 620px;
  margin-top: 30px;
}

.mp-blog-search .search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .52);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px);
}

.mp-blog-search label {
  flex: 1;
  min-width: 0;
}

.mp-blog-search .screen-reader-text {
  position: absolute;
  left: -9999px;
}

.mp-blog-search .search-field {
  width: 100%;
  min-height: 52px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.mp-blog-search .search-field::placeholder {
  color: rgba(22, 21, 20, .52);
}

.mp-blog-search .search-submit {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(239, 101, 48, .28);
}

.mp-blog-search .search-submit:hover {
  background: var(--orange-dark);
}

/* Blog post grid */

.mp-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mp-post-card {
  position: relative;
  min-width: 0;
  border-radius: 32px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mp-post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(239, 101, 48, .24);
}

.mp-post-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.mp-post-thumb {
  position: relative;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #eadfce;
}

.mp-post-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .35s ease;
}

.mp-post-card:hover .mp-post-thumb img {
  transform: scale(1.07);
}

.mp-post-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 12, 10, 0), rgba(13, 12, 10, .18));
  pointer-events: none;
}

.mp-post-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 184, 0, .35), transparent 32%),
    radial-gradient(circle at 75% 80%, rgba(239, 101, 48, .32), transparent 34%),
    linear-gradient(135deg, #151513, #30251d);
  color: #fff;
  font-size: 54px;
}

.mp-post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.mp-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mp-post-meta span,
.mp-post-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1e8da;
  color: #4a433b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.mp-post-meta i {
  color: var(--orange-dark);
}

.mp-post-card h2,
.mp-post-card h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.mp-post-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 650;
}

.mp-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  padding-top: 20px;
  color: var(--orange-dark);
  font-size: 14px;
  font-weight: 950;
}

.mp-read-more i {
  transition: transform .18s ease;
}

.mp-post-card:hover .mp-read-more i {
  transform: translateX(4px);
}

/* Pagination */

.mp-pagination {
  margin-top: 36px;
}

.mp-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mp-pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(34, 24, 12, .06);
}

.mp-pagination .page-numbers.current {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.mp-pagination a.page-numbers:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Empty blog state */

.mp-empty {
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}

.mp-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -.065em;
}

.mp-empty p {
  max-width: 560px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 650;
}

/* Responsive */

@media (max-width: 1080px) {
  .mp-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mp-page-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(13, 12, 10, .72), rgba(13, 12, 10, .9)),
      url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1200&q=82") center/cover;
  }

  .mp-page-hero::after {
    height: 62px;
  }

  .mp-page-hero-inner {
    padding: 118px 0 58px;
  }

  .mp-page-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
    line-height: 1;
    letter-spacing: -.065em;
  }

  .mp-page-hero p {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.58;
  }

  .mp-blog-search {
    margin-top: 24px;
  }

  .mp-blog-search .search-form {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 24px;
    padding: 10px;
  }

  .mp-blog-search .search-field,
  .mp-blog-search .search-submit {
    width: 100%;
    min-height: 54px;
  }

  .mp-post-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mp-post-card {
    border-radius: 26px;
  }

  .mp-post-card-body {
    padding: 18px;
  }

  .mp-post-card h2,
  .mp-post-card h3 {
    font-size: 25px;
  }

  .mp-post-card p {
    font-size: 15px;
  }

  .mp-pagination .nav-links {
    justify-content: flex-start;
  }

  .mp-pagination .page-numbers {
    min-width: 42px;
    min-height: 42px;
    font-size: 13px;
  }

  .mp-empty {
    border-radius: 26px;
    padding: 26px 20px;
    text-align: left;
  }
}

/* ===== Single article: stronger marketing layout ===== */

.mp-single-article {
  background: var(--bg);
}

.mp-article-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(13,12,10,.88), rgba(13,12,10,.62), rgba(13,12,10,.35)),
    url("https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2200&q=82") center/cover;
  overflow: hidden;
}

.mp-article-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 110px;
  background: linear-gradient(180deg, rgba(251, 246, 237, 0), var(--bg) 88%);
  pointer-events: none;
}

.mp-article-hero-inner {
  position: relative;
  z-index: 2;
  padding: 150px 0 96px;
}

.mp-article-label {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.mp-article-label span,
.mp-article-label a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: #211b15;
  background: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 900;
}

.mp-article-hero h1 {
  max-width: 920px;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 7vw, 86px);
  line-height: .95;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.mp-article-lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.58;
  letter-spacing: -.025em;
}

.mp-article-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.mp-article-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.mp-article-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.mp-article-trust i {
  color: #ffd49b;
}

.mp-article-content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}

.mp-article-main {
  min-width: 0;
}

.mp-article-intro-box {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-article-intro-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: var(--orange);
  font-size: 24px;
  box-shadow: 0 16px 34px rgba(239,101,48,.24);
}

.mp-article-intro-box h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.mp-article-intro-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 650;
}

.mp-article-content {
  padding: clamp(22px, 4vw, 42px);
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mp-article-content > *:first-child {
  margin-top: 0;
}

.mp-article-content > *:last-child {
  margin-bottom: 0;
}

.mp-article-content p,
.mp-article-content li {
  color: #342f2a;
  font-size: 18px;
  line-height: 1.82;
}

.mp-article-content p {
  margin: 0 0 1.2em;
}

.mp-article-content h2,
.mp-article-content h3,
.mp-article-content h4 {
  color: var(--text);
  letter-spacing: -.055em;
  line-height: 1.08;
}

.mp-article-content h2 {
  margin: 1.45em 0 .55em;
  font-size: clamp(30px, 4vw, 44px);
}

.mp-article-content h3 {
  margin: 1.35em 0 .5em;
  font-size: clamp(24px, 3vw, 32px);
}

.mp-article-content ul,
.mp-article-content ol {
  margin: 0 0 1.35em;
  padding-left: 1.25em;
}

.mp-article-content a {
  color: var(--orange-dark);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.mp-article-content blockquote {
  margin: 1.7em 0;
  padding: 22px 24px;
  border-left: 6px solid var(--orange);
  border-radius: 22px;
  background: #f6efe5;
  color: var(--text);
  font-size: 21px;
  line-height: 1.5;
  font-weight: 800;
}

.mp-inline-cta {
  margin: 28px 0;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 36px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(21,21,19,.92), rgba(21,21,19,.74)),
    url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1800&q=82") center/cover;
  box-shadow: 0 28px 74px rgba(21,21,19,.24);
  overflow: hidden;
}

.mp-inline-cta .mp-kicker,
.mp-inline-cta h2,
.mp-inline-cta p {
  color: #fff;
}

.mp-inline-cta h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -.07em;
}

.mp-inline-cta p {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 18px;
  line-height: 1.65;
}

.mp-inline-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.mp-inline-cta .mp-btn-dark {
  background: rgba(255,255,255,.13);
  color: #fff !important;
  border-color: rgba(255,255,255,.3);
}

.mp-sidebar {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 16px;
}

.mp-side-card {
  padding: 22px;
  border-radius: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-side-card h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.mp-side-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 650;
}

.mp-side-card .mp-btn {
  width: 100%;
  color: #fff !important;
}

.mp-side-card-lead {
  background:
    linear-gradient(180deg, rgba(255,253,248,.94), rgba(255,253,248,.98)),
    url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=900&q=82") center/cover;
}

.mp-side-card-dark {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(21,21,19,.94), rgba(21,21,19,.88)),
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=900&q=82") center/cover;
  border-color: rgba(255,255,255,.12);
}

.mp-side-card-dark h3,
.mp-side-card-dark p {
  color: #fff;
}

.mp-side-card-dark p {
  color: rgba(255,255,255,.76);
}

.mp-side-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #ffd49b;
  color: #2f2116;
  font-size: 12px;
  font-weight: 950;
}

.mp-side-checks {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.mp-side-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3d3832;
  font-size: 14px;
  font-weight: 800;
}

.mp-side-checks i {
  color: var(--green);
}

.mp-side-list,
.mp-side-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-side-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-side-list li {
  margin: 0;
}

.mp-side-list a {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: #f1e8da;
  color: #433d35;
  font-size: 13px;
  font-weight: 850;
}

.mp-side-list a:hover {
  background: var(--orange);
  color: #fff;
}

.mp-side-posts {
  display: grid;
  gap: 10px;
}

.mp-side-posts a {
  display: grid;
  gap: 4px;
  padding: 13px;
  border-radius: 18px;
  background: #f6efe5;
}

.mp-side-posts span {
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 900;
}

.mp-side-posts strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.mp-related-posts {
  margin-top: 38px;
}

.mp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.mp-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.mp-post-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 900;
  box-shadow: var(--soft-shadow);
}

.mp-post-nav div:last-child a {
  background: var(--dark);
  color: #fff;
}

.mp-comments {
  margin-top: 30px;
  padding: 24px;
  border-radius: 30px;
  background: var(--card);
  border: 1px solid var(--line);
}

.mp-side-card .search-form,
.mp-blog-search .search-form {
  display: flex;
  gap: 8px;
}

.mp-side-card .search-field,
.mp-blog-search .search-field {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font: inherit;
}

.mp-side-card .search-submit,
.mp-blog-search .search-submit {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--dark);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 980px) {
  .mp-article-content-wrap {
    grid-template-columns: 1fr;
  }

  .mp-sidebar {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .mp-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mp-article-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(13,12,10,.72), rgba(13,12,10,.9)),
      url("https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=82") center/cover;
  }

  .mp-article-hero-inner {
    padding: 118px 0 58px;
  }

  .mp-article-label {
    gap: 8px;
  }

  .mp-article-label span,
  .mp-article-label a {
    min-height: 34px;
    font-size: 12px;
  }

  .mp-article-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
    line-height: 1;
  }

  .mp-article-lead {
    font-size: 17px;
  }

  .mp-article-hero-actions,
  .mp-inline-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mp-article-hero-actions .mp-btn,
  .mp-inline-cta-actions .mp-btn {
    width: 100%;
  }

  .mp-article-trust {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mp-article-intro-box {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 24px;
  }

  .mp-article-content {
    padding: 20px;
    border-radius: 24px;
  }

  .mp-article-content p,
  .mp-article-content li {
    font-size: 16.5px;
    line-height: 1.75;
  }

  .mp-inline-cta {
    border-radius: 26px;
    padding: 24px 20px;
  }

  .mp-sidebar {
    grid-template-columns: 1fr;
  }

  .mp-side-card {
    border-radius: 24px;
    padding: 18px;
  }

  .mp-post-nav {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   MÄNGUPANK SINGLE.PHP COMMENTS / kommentaarid
   ========================================================= */

.mp-comments {
  margin-top: 34px;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mp-comments #comments,
.mp-comments .comments-area {
  margin: 0;
}

.mp-comments .comments-title,
.mp-comments .comment-reply-title {
  margin: 0 0 20px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -.06em;
}

.mp-comments .comment-reply-title small {
  display: inline-flex;
  margin-left: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.mp-comments .comment-reply-title small a {
  color: var(--orange-dark);
  font-weight: 900;
  text-decoration: none;
}

.mp-comments .comment-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.mp-comments .comment-list .children {
  list-style: none;
  margin: 16px 0 0 34px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mp-comments .comment-body {
  position: relative;
  padding: 20px;
  border-radius: 26px;
  background: #f6efe5;
  border: 1px solid rgba(22, 21, 20, .09);
}

.mp-comments .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-comments .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 900;
}

.mp-comments .comment-author .avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(34, 24, 12, .12);
}

.mp-comments .comment-author .fn {
  font-style: normal;
}

.mp-comments .comment-author .says {
  display: none;
}

.mp-comments .comment-metadata,
.mp-comments .comment-metadata a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.mp-comments .comment-content {
  color: #342f2a;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
}

.mp-comments .comment-content p {
  margin: 0 0 1em;
}

.mp-comments .comment-content p:last-child {
  margin-bottom: 0;
}

.mp-comments .reply {
  margin-top: 14px;
}

.mp-comments .comment-reply-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.mp-comments .comment-reply-link:hover {
  background: var(--orange);
  color: #fff !important;
}

.mp-comments .comment-respond {
  margin-top: 28px;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 184, 0, .18), transparent 34%),
    radial-gradient(circle at 95% 100%, rgba(239, 101, 48, .16), transparent 34%),
    #fffdf8;
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-comments .comment-form {
  display: grid;
  gap: 16px;
}

.mp-comments .comment-form p {
  margin: 0;
}

.mp-comments .comment-notes,
.mp-comments .logged-in-as {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}

.mp-comments .logged-in-as a,
.mp-comments .comment-notes a {
  color: var(--orange-dark);
  font-weight: 900;
  text-decoration: none;
}

.mp-comments .comment-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.mp-comments .comment-form input[type="text"],
.mp-comments .comment-form input[type="email"],
.mp-comments .comment-form input[type="url"],
.mp-comments .comment-form textarea {
  width: 100%;
  border: 1px solid rgba(22, 21, 20, .14);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.mp-comments .comment-form input[type="text"],
.mp-comments .comment-form input[type="email"],
.mp-comments .comment-form input[type="url"] {
  min-height: 54px;
  padding: 0 16px;
}

.mp-comments .comment-form textarea {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

.mp-comments .comment-form input:focus,
.mp-comments .comment-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(239, 101, 48, .14);
}

.mp-comments .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}

.mp-comments .comment-form-cookies-consent input {
  margin-top: 4px;
  accent-color: var(--orange);
}

.mp-comments .comment-form-cookies-consent label {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.mp-comments .form-submit {
  margin-top: 4px;
}

.mp-comments .submit {
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(239, 101, 48, .28);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.mp-comments .submit:hover {
  transform: translateY(-2px);
  background: var(--orange-dark);
  color: #fff !important;
}

.mp-comments .no-comments {
  margin: 0;
  padding: 18px;
  border-radius: 20px;
  background: #f6efe5;
  color: var(--muted);
  font-weight: 750;
}

.mp-comments .comment-navigation,
.mp-comments .comments-pagination {
  margin: 24px 0;
}

.mp-comments .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.mp-comments .nav-links a,
.mp-comments .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f6efe5;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.mp-comments .page-numbers.current {
  background: var(--dark);
  color: #fff;
}

/* Kommentaari vorm kahe veeruga desktopis */
@media (min-width: 780px) {
  .mp-comments .comment-form-author,
  .mp-comments .comment-form-email,
  .mp-comments .comment-form-url {
    width: 100%;
  }

  .mp-comments .comment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-comments .comment-notes,
  .mp-comments .logged-in-as,
  .mp-comments .comment-form-comment,
  .mp-comments .comment-form-cookies-consent,
  .mp-comments .form-submit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .mp-comments {
    margin-top: 28px;
    padding: 20px;
    border-radius: 26px;
  }

  .mp-comments .comments-title,
  .mp-comments .comment-reply-title {
    font-size: 30px;
  }

  .mp-comments .comment-list .children {
    margin-left: 14px;
  }

  .mp-comments .comment-body {
    padding: 16px;
    border-radius: 22px;
  }

  .mp-comments .comment-author .avatar {
    width: 38px;
    height: 38px;
  }

  .mp-comments .comment-content {
    font-size: 15.5px;
  }

  .mp-comments .comment-respond {
    padding: 18px;
    border-radius: 24px;
  }

  .mp-comments .submit {
    width: 100%;
  }

  .mp-comments .nav-links {
    flex-direction: column;
  }
}



/* =========================================================
   Single game page
========================================================= */

.mp-game-page {
  --bg: #fbf6ed;
  --bg-2: #f4ecdf;
  --text: #161514;
  --muted: #68625b;
  --line: rgba(22, 21, 20, .12);
  --card: #fffdf8;
  --dark: #151513;
  --orange: #ef6530;
  --orange-dark: #cf4c1c;
  --green: #1a8f69;
  --shadow: 0 24px 70px rgba(34, 24, 12, .14);
  --soft-shadow: 0 14px 40px rgba(34, 24, 12, .09);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.mp-game-single-hero {
  position: relative;
  min-height: 720px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, .86), rgba(13, 12, 10, .56)),
    linear-gradient(0deg, rgba(13, 12, 10, .88), rgba(13, 12, 10, .08)),
    var(--mp-game-hero-img) center/cover;
  display: flex;
  align-items: center;
  padding: 150px 0 82px;
}

.mp-game-single-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 110px;
  background: linear-gradient(180deg, rgba(251, 246, 237, 0), var(--bg) 88%);
  pointer-events: none;
}

.mp-game-single-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 48px;
  align-items: end;
}

.mp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .88);
  font-weight: 850;
}

.mp-back-link:hover {
  color: #fff;
}

.mp-game-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}

.mp-game-labels span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.mp-game-labels .mp-game-access {
  background: rgba(239, 101, 48, .92);
  border-color: rgba(239, 101, 48, .95);
  color: #fff;
}

.mp-game-single-copy h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.mp-game-lead {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  letter-spacing: -.025em;
}

.mp-game-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.mp-print-btn {
  color: #fff !important;
}

.mp-game-quick-card {
  background: rgba(255, 253, 248, .96);
  color: var(--text);
  border-radius: 34px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .65);
  backdrop-filter: blur(16px);
}

.mp-game-quick-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.mp-game-dice {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff5a1f, #ffb800);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 14px 30px rgba(255, 122, 26, .28);
}

.mp-game-quick-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-weight: 850;
}

.mp-game-quick-head strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.045em;
}

.mp-game-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mp-game-facts div {
  min-height: 98px;
  padding: 14px;
  border-radius: 20px;
  background: #f6efe5;
}

.mp-game-facts i {
  color: var(--orange-dark);
  font-size: 19px;
}

.mp-game-facts span {
  display: block;
  margin: 9px 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.mp-game-facts b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.mp-game-event-tags {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mp-game-event-tags small {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 850;
}

.mp-game-event-tags div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-game-event-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(26, 143, 105, .11);
  color: #245343;
  font-size: 12px;
  font-weight: 850;
}

.mp-game-content-section {
  padding-top: 70px;
}

.mp-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}

.mp-game-main {
  display: grid;
  gap: 16px;
}

.mp-game-block {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-game-block-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--dark);
  color: #fff;
  font-size: 24px;
}

.mp-game-goal .mp-game-block-icon {
  background: var(--orange);
}

.mp-game-tips .mp-game-block-icon {
  background: var(--green);
}

.mp-game-warning {
  background: #fff8ed;
  border-color: rgba(239, 101, 48, .22);
}

.mp-game-warning .mp-game-block-icon {
  background: #b45309;
}

.mp-game-block h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -.065em;
}

.mp-game-block p,
.mp-game-text p,
.mp-game-prose p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 600;
}

.mp-game-text p:last-child,
.mp-game-prose p:last-child,
.mp-game-block p:last-child {
  margin-bottom: 0;
}

.mp-game-prose ul,
.mp-game-prose ol {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
}

.mp-game-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
}

.mp-game-side-card {
  padding: 22px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.mp-game-side-card h3 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.mp-game-side-card h3 i {
  color: var(--orange-dark);
}

.mp-game-side-card p,
.mp-game-side-text p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 650;
}

.mp-game-side-card p:last-child,
.mp-game-side-text p:last-child {
  margin-bottom: 0;
}

.mp-game-cta-card {
  background: var(--dark);
  color: #fff;
}

.mp-game-cta-card h3 {
  color: #fff;
}

.mp-game-cta-card p {
  color: rgba(255, 255, 255, .72);
}

.mp-game-cta-card .mp-btn {
  width: 100%;
  margin-top: 16px;
}

.mp-game-mini-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ffd49b;
  color: #2f2116;
  font-size: 12px;
  font-weight: 900;
}

.mp-game-related-section {
  background: var(--bg-2);
}

@media (max-width: 980px) {
  .mp-game-single-hero-inner,
  .mp-game-layout {
    grid-template-columns: 1fr;
  }

  .mp-game-quick-card {
    max-width: 620px;
  }

  .mp-game-sidebar {
    position: static;
  }
}

@media (max-width: 720px) {
  .mp-game-single-hero {
    min-height: auto;
    padding: 118px 0 54px;
    background:
      linear-gradient(180deg, rgba(13, 12, 10, .72), rgba(13, 12, 10, .92)),
      var(--mp-game-hero-img) center/cover;
  }

  .mp-game-single-hero::after {
    height: 54px;
  }

  .mp-back-link {
    margin-bottom: 16px;
    font-size: 14px;
  }

  .mp-game-labels {
    gap: 7px;
    margin-bottom: 16px;
  }

  .mp-game-labels span {
    padding: 8px 10px;
    font-size: 12px;
  }

  .mp-game-single-copy h1 {
    font-size: clamp(40px, 12vw, 56px);
    line-height: .98;
  }

  .mp-game-lead {
    margin-top: 18px;
    font-size: 17px;
  }

  .mp-game-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .mp-game-hero-actions .mp-btn {
    width: 100%;
  }

  .mp-game-quick-card {
    border-radius: 24px;
    padding: 18px;
  }

  .mp-game-facts {
    grid-template-columns: 1fr;
  }

  .mp-game-facts div {
    min-height: auto;
  }

  .mp-game-content-section {
    padding-top: 48px !important;
  }

  .mp-game-block {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
  }

  .mp-game-block-icon {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    font-size: 21px;
  }

  .mp-game-block h2 {
    font-size: 30px;
  }

  .mp-game-block p,
  .mp-game-text p,
  .mp-game-prose p,
  .mp-game-prose ul,
  .mp-game-prose ol {
    font-size: 16px;
  }

  .mp-game-side-card {
    border-radius: 24px;
    padding: 18px;
  }
}

@media print {
  .mp-header,
  .mp-footer,
  .mp-game-hero-actions,
  .mp-game-sidebar,
  .mp-game-related-section,
  .mp-sticky-cta,
  .mp-popup-floating-btn,
  .mp-popup-backdrop {
    display: none !important;
  }

  .mp-game-single-hero {
    min-height: auto;
    padding: 30px 0;
    color: #111;
    background: #fff !important;
  }

  .mp-game-single-hero::after {
    display: none;
  }

  .mp-game-single-hero-inner,
  .mp-game-layout {
    display: block;
  }

  .mp-game-labels span {
    color: #111;
    border: 1px solid #ddd;
    background: #fff;
  }

  .mp-game-lead {
    color: #333;
  }

  .mp-game-quick-card,
  .mp-game-block {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}


    /* ===== MOBILE-FIRST PARANDUS: ei skaleeri desktopi pisikeseks ===== */
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    .mp-clean {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }

    .mp-clean img,
    .mp-clean video,
    .mp-clean iframe {
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      .mp-clean {
        overflow-x: clip;
      }

      .mp-wrap {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
      }

      .mp-header {
        top: 10px !important;
      }

      .mp-nav {
        min-height: 58px !important;
        padding: 8px 9px 8px 10px !important;
        border-radius: 18px !important;
        gap: 8px !important;
      }

      .mp-brand {
        gap: 9px !important;
        font-size: 18px !important;
        letter-spacing: -.035em !important;
      }

      .mp-brand-mark {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 17px !important;
      }

      .mp-menu-toggle {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 auto !important;
      }

      .mp-links,
      .mp-nav-actions {
        display: none !important;
      }

      .mp-mobile-panel {
        border-radius: 18px !important;
        padding: 10px !important;
      }

      .mp-mobile-panel a {
        min-height: 48px !important;
        font-size: 16px !important;
      }

      .mp-hero {
        min-height: auto !important;
        background:
          linear-gradient(180deg, rgba(13, 12, 10, .70) 0%, rgba(13, 12, 10, .86) 52%, rgba(13, 12, 10, .94) 100%),
          url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=82') center/cover !important;
      }

      .mp-hero::after {
        height: 56px !important;
      }

      .mp-hero-content {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: auto !important;
        gap: 22px !important;
        padding: 104px 0 46px !important;
      }

      .mp-hero-inner {
        max-width: none !important;
      }

      .mp-eyebrow {
        margin-bottom: 15px !important;
      }

      .mp-tag {
        max-width: 100% !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
      }

      .mp-hero h1 {
        max-width: 100% !important;
        font-size: clamp(42px, 12.8vw, 58px) !important;
        line-height: 1 !important;
        letter-spacing: -.058em !important;
      }

      .mp-hero-lead {
        max-width: 100% !important;
        margin-top: 16px !important;
        font-size: 18px !important;
        line-height: 1.56 !important;
        color: rgba(255, 255, 255, .92) !important;
      }

      .mp-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 22px !important;
      }

      .mp-hero-actions .mp-btn,
      .mp-final .mp-hero-actions .mp-btn {
        width: 100% !important;
        min-height: 54px !important;
        padding: 0 18px !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
      }

      .mp-hero .mp-btn-ghost,
      .mp-final .mp-btn-ghost {
        color: #fff !important;
        background: rgba(255, 255, 255, .13) !important;
        border-color: rgba(255, 255, 255, .38) !important;
      }

      .mp-hero-meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 20px !important;
      }

      .mp-meta-pill {
        width: auto !important;
        justify-content: center !important;
        min-height: 42px !important;
        padding: 9px 7px !important;
        font-size: 12px !important;
        line-height: 1.18 !important;
        text-align: center !important;
        background: rgba(255, 255, 255, .12) !important;
      }

      .mp-hero-aside {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
      }

      .mp-video-card {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 11 !important;
        padding: 16px !important;
        border-radius: 22px !important;
        gap: 16px !important;
      }

      .mp-video-card::before {
        inset: 9px !important;
        border-radius: 16px !important;
      }

      .mp-video-label {
        padding: 7px 9px !important;
        font-size: 10px !important;
        letter-spacing: .05em !important;
      }

      .mp-video-time {
        font-size: 12px !important;
      }

      .mp-video-content {
        align-items: flex-end !important;
        gap: 12px !important;
      }

      .mp-video-card b {
        max-width: 240px !important;
        font-size: 24px !important;
        line-height: 1.06 !important;
        letter-spacing: -.045em !important;
      }

      .mp-video-card span span,
      .mp-video-card p {
        margin-top: 6px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
      }

      .mp-play {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
      }

      .mp-video-bar {
        height: 6px !important;
      }

      .mp-event-card {
        display: none !important;
      }

      .mp-section {
        padding: 58px 0 !important;
      }

      .mp-section-tight {
        padding: 46px 0 !important;
      }

      .mp-section-head {
        margin-bottom: 24px !important;
      }

      .mp-kicker {
        font-size: 11px !important;
      }

      .mp-section h2 {
        font-size: clamp(32px, 10vw, 44px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.055em !important;
      }

      .mp-section-head p {
        margin-top: 13px !important;
        font-size: 16px !important;
        line-height: 1.62 !important;
      }

      .mp-split,
      .mp-included,
      .mp-steps,
      .mp-categories,
      .mp-games,
      .mp-pricing,
      .mp-testimonials,
      .mp-detail-grid {
        grid-template-columns: 1fr !important;
      }

      .mp-split,
      .mp-included {
        gap: 22px !important;
      }

      .mp-photo-panel {
        min-height: 280px !important;
        border-radius: 24px !important;
        padding: 18px !important;
      }

      .mp-photo-panel strong {
        font-size: 23px !important;
      }

      .mp-problem-item {
        grid-template-columns: 42px 1fr !important;
        gap: 12px !important;
        padding: 15px !important;
        border-radius: 20px !important;
      }

      .mp-problem-item i {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
      }

      .mp-step,
      .mp-card,
      .mp-game,
      .mp-price,
      .mp-detail-card,
      .mp-quote {
        min-height: auto !important;
        border-radius: 22px !important;
        padding: 18px !important;
      }

      .mp-step::after {
        font-size: 86px !important;
        right: 14px !important;
        bottom: -8px !important;
      }

      .mp-step h3,
      .mp-card h3,
      .mp-price h3,
      .mp-game h3 {
        font-size: 23px !important;
        line-height: 1.12 !important;
      }

      .mp-detail-card h3 {
        font-size: 28px !important;
      }

      .mp-game-top {
        gap: 10px !important;
      }

      .mp-price.featured {
        transform: none !important;
      }

      .mp-price-value {
        font-size: 40px !important;
      }

      .mp-faq-btn {
        min-height: 62px !important;
        padding: 0 16px !important;
        font-size: 16px !important;
      }

      .mp-faq-answer {
        padding: 0 16px 16px !important;
        font-size: 15px !important;
      }

      .mp-sticky-cta {
        display: block !important;
      }
    }

    @media (max-width: 420px) {
      .mp-wrap {
        width: calc(100% - 24px) !important;
      }

      .mp-hero-content {
        padding-top: 98px !important;
      }

      .mp-brand {
        font-size: 17px !important;
      }

      .mp-hero h1 {
        font-size: clamp(38px, 12.2vw, 48px) !important;
      }

      .mp-hero-lead {
        font-size: 16.5px !important;
      }

      .mp-hero-meta {
        grid-template-columns: 1fr !important;
      }

      .mp-video-card {
        aspect-ratio: 4 / 3 !important;
      }

      .mp-video-card b {
        font-size: 22px !important;
      }

      .mp-play {
        width: 48px !important;
        height: 48px !important;
      }

      .mp-section h2 {
        font-size: clamp(30px, 10vw, 39px) !important;
      }
    }


    @media (prefers-reduced-motion: reduce) {
      .mp-clean *,
      .mp-clean *::before,
      .mp-clean *::after {
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }



    /* Lead magnet popup */
.mp-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 15, 28, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.mp-popup-backdrop.is-visible {
  display: flex;
}

.mp-popup {
  width: min(920px, 100%);
  background: #fffaf3;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.mp-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12);
}

.mp-popup-close:hover {
  background: #111827;
  color: #ffffff;
}

.mp-popup-media {
  min-height: 470px;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.82)),
    url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1200&q=80");
  background-size: cover;
  background-position: center;
}

.mp-popup-video {
  width: 100%;
  min-height: 150px;
  border-radius: 26px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #ffffff;
}

.mp-popup-play {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff6a1a, #ffb000);
  color: #ffffff;
  font-size: 34px;
  box-shadow: 0 16px 34px rgba(255, 106, 26, 0.38);
}

.mp-popup-video span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.86;
}

.mp-popup-video strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.mp-popup-content {
  padding: clamp(30px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mp-popup-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff0d7;
  color: #9a4a00;
  font-size: 13px;
  font-weight: 900;
}

.mp-popup-content h2 {
  margin: 0 0 16px;
  color: #111827;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.mp-popup-content p {
  margin: 0 0 26px;
  color: #374151;
  font-size: 17px;
  line-height: 1.55;
}

.mp-popup-form label {
  display: block;
  margin-bottom: 9px;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.mp-popup-input-row {
  display: flex;
  gap: 10px;
}

.mp-popup-input-row input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: #ffffff;
  color: #111827;
  padding: 0 18px;
  font-size: 16px;
  outline: none;
}

.mp-popup-input-row input:focus {
  border-color: #ff7a1a;
  box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.14);
}

.mp-popup-input-row button {
  height: 56px;
  border: 0;
  border-radius: 18px;
  padding: 0 22px;
  background: #111827;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.18);
}

.mp-popup-input-row button:hover {
  background: #ff6a1a;
  color: #ffffff !important;
}

.mp-popup-form small {
  display: block;
  margin-top: 12px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
}

.mp-popup-success {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
}

.mp-popup-success.is-visible {
  display: flex;
}

.mp-popup-floating-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #ff6a1a, #ffb000);
  color: #111827 !important;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(255, 106, 26, 0.32);
}

.mp-popup-floating-btn i {
  color: #111827;
}

@media (max-width: 760px) {
  .mp-popup-backdrop {
    align-items: flex-end;
    padding: 10px;
  }

  .mp-popup {
    grid-template-columns: 1fr;
    border-radius: 28px 28px 18px 18px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }

  .mp-popup-media {
    min-height: 220px;
    padding: 18px;
  }

  .mp-popup-video {
    min-height: auto;
    padding: 16px;
    border-radius: 22px;
  }

  .mp-popup-play {
    width: 54px;
    height: 54px;
    min-width: 54px;
    font-size: 30px;
  }

  .mp-popup-content {
    padding: 26px 20px 22px;
  }

  .mp-popup-content h2 {
    font-size: 38px;
  }

  .mp-popup-content p {
    font-size: 16px;
  }

  .mp-popup-input-row {
    flex-direction: column;
  }

  .mp-popup-input-row input,
  .mp-popup-input-row button {
    width: 100%;
  }

  .mp-popup-floating-btn {
    right: 14px;
    left: 14px;
    bottom: 14px;
    justify-content: center;
  }
}

/* ===== WordPress base fixes ===== */
body.admin-bar .mp-header { top: 50px; }
@media (max-width: 782px) { body.admin-bar .mp-header { top: 56px; } }
.mp-screen-reader-text,
.screen-reader-text { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.mp-clean .alignwide { max-width: 1160px; margin-left: auto; margin-right: auto; }
.mp-clean .alignfull { width: 100%; }
.mp-clean img { max-width: 100%; height: auto; }
.mp-clean .wp-caption { max-width: 100%; }
.mp-clean .wp-caption-text { color: var(--muted); font-size: 14px; }
.mp-clean .mp-btn-primary,
.mp-clean .mp-btn-dark { color: #fff !important; }
.mp-clean .mp-btn-primary:visited,
.mp-clean .mp-btn-dark:visited { color: #fff !important; }
.mp-clean .mp-btn-ghost:visited { color: #fff !important; }

/* Header: active WordPress pages */
.mp-clean .mp-links .current-menu-item > a,
.mp-clean .mp-links .current_page_item > a,
.mp-clean .mp-links a[aria-current="page"] { color: var(--orange-dark); opacity: 1; }

/* ===== Footer ===== */
.mp-footer {
  color: #fff;
  background: #151513;
  padding: 72px 0 26px;
}
.mp-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr .75fr .75fr .8fr;
  gap: 28px;
  align-items: start;
}
.mp-footer-brand { display: grid; gap: 16px; }
.mp-footer-logo { display:inline-flex; align-items:center; gap:12px; width:fit-content; color:#fff !important; }
.mp-footer-logo strong { font-size:24px; letter-spacing:-.045em; }
.mp-footer p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.65; font-weight: 600; }
.mp-footer h3 { margin: 0 0 16px; font-size: 14px; color:#fff; text-transform: uppercase; letter-spacing: .12em; }
.mp-footer-links { display:grid; gap: 10px; }
.mp-footer-links a { color: rgba(255,255,255,.72); font-weight: 700; font-size: 14px; }
.mp-footer-links a:hover { color: #ffd49b; }
.mp-footer-meta { display:grid; gap: 8px; color: rgba(255,255,255,.68); font-size:14px; font-weight:650; line-height:1.5; }
.mp-socials { display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.mp-socials a { width:42px; height:42px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12); }
.mp-socials a:hover { background: var(--orange); color:#fff; }
.mp-footer-bottom { margin-top: 42px; padding-top: 20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:rgba(255,255,255,.55); font-size:13px; font-weight:650; }

/* ===== Blog archive ===== */
.mp-blog-hero {
  position: relative;
  color: #fff;
  min-height: 560px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, .86) 0%, rgba(13, 12, 10, .62) 55%, rgba(13, 12, 10, .38) 100%),
    url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=2200&q=82') center/cover;
  overflow:hidden;
}
.mp-blog-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:96px; background:linear-gradient(180deg, rgba(251,246,237,0), var(--bg) 88%); }
.mp-blog-hero-inner { position:relative; z-index:2; padding: 140px 0 96px; }
.mp-blog-hero h1 { margin:0; font-size:clamp(48px, 7vw, 86px); line-height:.94; letter-spacing:-.075em; text-wrap:balance; }
.mp-blog-hero h1 em { font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; color:#ffd49b; letter-spacing:-.04em; }
.mp-blog-hero p { margin:22px 0 0; max-width:660px; color:rgba(255,255,255,.88); font-size:20px; line-height:1.6; letter-spacing:-.025em; }
.mp-blog-tools { display:grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 30px; max-width: 720px; }
.mp-search-form { display:flex; gap:10px; background:rgba(255,255,255,.96); padding:8px; border-radius:999px; box-shadow:0 18px 46px rgba(0,0,0,.18); }
.mp-search-form input { flex:1; min-width:0; border:0; background:transparent; color:var(--text); padding:0 14px; font-size:15px; outline:none; font-weight:700; }
.mp-search-form button { border:0; }
.mp-cat-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.mp-cat-pills a { display:inline-flex; align-items:center; min-height:38px; padding:0 13px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); font-size:13px; font-weight:850; }
.mp-cat-pills a:hover { background:#fff; color:var(--text); }
.mp-blog-layout { display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items:start; }
.mp-post-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.mp-post-card { display:flex; flex-direction:column; min-height:100%; border-radius:30px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--soft-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.mp-post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.mp-post-thumb { display:block; min-height:230px; background:#e8ddcf center/cover; position:relative; }
.mp-post-thumb img { width:100%; height:230px; object-fit:cover; display:block; }
.mp-post-thumb.placeholder { background: linear-gradient(135deg, #ef6530, #f3b33d); }
.mp-post-thumb.placeholder::after { content:""; position:absolute; inset:22px; border:1px solid rgba(255,255,255,.38); border-radius:22px; }
.mp-post-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.mp-post-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; color:var(--orange-dark); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.mp-post-card h2, .mp-post-card h3 { margin:0; font-size:26px; line-height:1.08; letter-spacing:-.055em; }
.mp-post-card p { margin:12px 0 20px; color:var(--muted); line-height:1.62; font-weight:650; }
.mp-read-more { margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--orange-dark); font-weight:900; }
.mp-sidebar { display:grid; gap:16px; position:sticky; top:120px; }
.mp-side-card { padding:22px; border-radius:28px; background:var(--card); border:1px solid var(--line); box-shadow:var(--soft-shadow); }
.mp-side-card h3 { margin:0 0 14px; font-size:22px; line-height:1.1; letter-spacing:-.05em; }
.mp-side-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.mp-side-list a { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); color:#332f2a; font-weight:800; }
.mp-side-list li:last-child a { border-bottom:0; }
.mp-side-list a:hover { color:var(--orange-dark); }
.mp-pagination { display:flex; justify-content:center; gap:8px; margin-top:30px; }
.mp-pagination .page-numbers { min-width:42px; height:42px; display:grid; place-items:center; border-radius:999px; background:var(--card); border:1px solid var(--line); font-weight:900; }
.mp-pagination .current { background:var(--dark); color:#fff; }
.mp-empty { padding:34px; border-radius:30px; background:var(--card); border:1px solid var(--line); box-shadow:var(--soft-shadow); }

/* ===== Single article ===== */
.mp-article-hero { position:relative; color:#fff; min-height:520px; display:flex; align-items:flex-end; background:linear-gradient(90deg, rgba(13,12,10,.87), rgba(13,12,10,.58)), url('https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=2200&q=82') center/cover; }
.mp-article-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:82px; background:linear-gradient(180deg, rgba(251,246,237,0), var(--bg) 88%); }
.mp-article-hero-inner { position:relative; z-index:2; padding:150px 0 96px; }
.mp-article-hero h1 { margin:14px 0 0; font-size:clamp(42px, 6vw, 76px); line-height:.98; letter-spacing:-.07em; text-wrap:balance; }
.mp-article-content-wrap { display:grid; grid-template-columns:minmax(0, 760px) 320px; gap:42px; align-items:start; }
.mp-article-content { padding:34px; border-radius:34px; background:var(--card); border:1px solid var(--line); box-shadow:var(--soft-shadow); }
.mp-article-content :where(p, li) { color:#332f2a; font-size:18px; line-height:1.78; }
.mp-article-content h2 { font-size:40px; line-height:1.06; letter-spacing:-.06em; margin:38px 0 14px; }
.mp-article-content h3 { font-size:28px; line-height:1.12; letter-spacing:-.045em; margin:30px 0 12px; }
.mp-article-content a { color:var(--orange-dark); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.mp-article-content blockquote { margin:28px 0; padding:22px; border-left:4px solid var(--orange); background:#f6efe5; border-radius:0 20px 20px 0; }
.mp-article-content blockquote p { margin:0; font-weight:800; }
.mp-post-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.mp-post-nav a { padding:18px; border-radius:22px; background:var(--card); border:1px solid var(--line); font-weight:850; }
.mp-post-nav a:hover { color:var(--orange-dark); }
.mp-comments { margin-top:30px; padding:24px; border-radius:30px; background:var(--card); border:1px solid var(--line); }

/* ===== Generic page ===== */
.mp-page-hero { position:relative; color:#fff; min-height:390px; display:flex; align-items:flex-end; background:linear-gradient(90deg, rgba(13,12,10,.86), rgba(13,12,10,.55)), url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=2200&q=82') center/cover; }
.mp-page-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:74px; background:linear-gradient(180deg, rgba(251,246,237,0), var(--bg) 88%); }
.mp-page-hero-inner { position:relative; z-index:2; padding:135px 0 82px; }
.mp-page-hero h1 { margin:0; font-size:clamp(42px, 6vw, 72px); line-height:.98; letter-spacing:-.07em; }
.mp-page-content { max-width:880px; margin:0 auto; padding:34px; border-radius:34px; background:var(--card); border:1px solid var(--line); box-shadow:var(--soft-shadow); }
.mp-page-content :where(p, li) { color:#332f2a; font-size:18px; line-height:1.75; }
.mp-page-content h2 { font-size:38px; letter-spacing:-.055em; line-height:1.08; }

@media (max-width: 980px) {
  .mp-footer-grid,
  .mp-blog-layout,
  .mp-article-content-wrap { grid-template-columns: 1fr; }
  .mp-sidebar { position: static; }
}
@media (max-width: 720px) {
  .mp-blog-hero { min-height:auto; }
  .mp-blog-hero-inner { padding: 116px 0 64px; }
  .mp-blog-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .mp-blog-hero p { font-size: 17px; }
  .mp-blog-tools, .mp-post-grid, .mp-post-nav { grid-template-columns:1fr; }
  .mp-search-form { border-radius:22px; flex-direction:column; padding:10px; }
  .mp-search-form input, .mp-search-form button { width:100%; min-height:50px; }
  .mp-post-thumb, .mp-post-thumb img { min-height:190px; height:190px; }
  .mp-article-hero-inner { padding: 122px 0 68px; }
  .mp-article-content { padding:22px; border-radius:24px; }
  .mp-article-content :where(p, li) { font-size:16.5px; }
  .mp-article-content h2 { font-size:31px; }
  .mp-footer { padding-bottom: 98px; }
  .mp-footer-bottom { display:grid; }
}

/* =========================================================
   Hero video placeholder + centered modal fix
========================================================= */
.mp-clean.mangupank-landing {
  --bg: #fbf6ed;
  --bg-2: #f4ecdf;
  --text: #161514;
  --muted: #68625b;
  --line: rgba(22, 21, 20, .12);
  --card: #fffdf8;
  --dark: #151513;
  --orange: #ef6530;
  --orange-dark: #cf4c1c;
  --green: #1a8f69;
  --yellow: #f3b33d;
}

.mp-hero .mp-hero-content {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 4vw, 46px);
  min-height: 860px;
}

.mp-hero .mp-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mp-hero .mp-hero-lead {
  margin-left: auto;
  margin-right: auto;
}

.mp-hero .mp-hero-actions,
.mp-hero .mp-hero-meta {
  justify-content: center;
}

.mp-hero .mp-hero-aside {
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  justify-items: stretch;
}

.mp-video-card.mp-video-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, .24);
  cursor: pointer;
  text-align: center;
}

.mp-video-card.mp-video-trigger:hover .mp-play,
.mp-video-card.mp-video-trigger:focus-visible .mp-play {
  transform: scale(1.06);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .32);
}

.mp-video-card.mp-video-trigger:focus-visible {
  outline: 4px solid rgba(255, 212, 155, .72);
  outline-offset: 5px;
}

.mp-video-card::before {
  z-index: 1;
}

.mp-video-card > * {
  position: relative;
  z-index: 2;
}

.mp-video-card .mp-video-top {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
}

.mp-video-card .mp-video-content {
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 46px 18px 28px;
}

.mp-video-card .mp-video-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mp-video-card b {
  max-width: 520px;
}

.mp-video-card span span,
.mp-video-card p {
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

.mp-video-card .mp-play {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.mp-video-card .mp-video-bar {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  width: auto;
}

.mp-event-card {
  text-align: left;
}

.mp-modal-open,
.mp-modal-open body {
  overflow: hidden;
}

.mp-video-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.mp-video-modal.is-open {
  display: flex;
}

.mp-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mp-video-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  border-radius: 34px;
  background: #151513;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .46);
}

.mp-video-modal-close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 5;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fffdf8;
  color: #161514;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.mp-video-modal-close:hover,
.mp-video-modal-close:focus-visible {
  background: var(--orange);
  color: #fff;
  outline: none;
}

.mp-video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 20%, rgba(239, 101, 48, .34), transparent 42%),
    #151513;
}

.mp-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mp-video-frame iframe[hidden],
.mp-video-fallback[hidden] {
  display: none !important;
}

.mp-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px;
  color: #fff;
  text-align: center;
}

.mp-video-fallback h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 58px);
  line-height: .95;
  letter-spacing: -.065em;
}

.mp-video-fallback p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 17px;
  line-height: 1.55;
}

.mp-video-fallback code {
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #ffd49b;
}

@media (max-width: 900px) {
  .mp-hero .mp-hero-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    text-align: center !important;
  }

  .mp-hero .mp-hero-inner {
    align-items: center !important;
  }

  .mp-hero .mp-hero-actions,
  .mp-hero .mp-hero-meta {
    justify-content: center !important;
  }

  .mp-video-card.mp-video-trigger {
    aspect-ratio: 16 / 10 !important;
  }

  .mp-video-card .mp-video-top {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
  }

  .mp-video-card .mp-video-content {
    padding: 44px 12px 26px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .mp-video-card .mp-video-bar {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}

@media (max-width: 560px) {
  .mp-video-card .mp-video-top {
    align-items: flex-start;
  }

  .mp-video-card .mp-video-label {
    max-width: 150px;
    white-space: normal;
    line-height: 1.2;
  }

  .mp-video-card b {
    font-size: 22px !important;
  }

  .mp-video-card span span,
  .mp-video-card p {
    display: none;
  }

  .mp-video-modal {
    padding: 12px;
  }

  .mp-video-modal-dialog,
  .mp-video-frame {
    border-radius: 22px;
  }

  .mp-video-modal-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  .mp-video-fallback {
    padding: 24px 18px;
  }

  .mp-video-fallback p {
    font-size: 15px;
  }
}