/* ==========================================================
   X2 WEB — TABLET / DESKTOP HOMEPAGE V1
   Scope: min-width 781px only.
   Mobile composition (<=780px) remains unchanged.
   ========================================================== */

.desktop-footer-simple {
  display: none;
}

@media (min-width: 781px) {
  html {
    color-scheme: light;
  }

  :root {
    --x2-navy: #11172f;
    --x2-navy-soft: #18213e;
    --x2-text: #171a21;
    --x2-muted: #747b87;
    --x2-bg: #f6f7f9;
    --x2-surface: #ffffff;
    --x2-border: #dde1e6;
    --x2-border-soft: #eceef1;
    --x2-hover: #fafafa;
    --x2-pressed: #f1f2f4;
  }

  body {
    background: var(--x2-bg) !important;
    color: var(--x2-text) !important;
    font-weight: 400 !important;
  }

  .site-header {
    min-height: 66px !important;
    height: 66px !important;
    padding: 0 clamp(28px, 3.6vw, 58px) !important;
    grid-template-columns: auto 1fr auto !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--x2-border) !important;
    box-shadow: none !important;
  }

  .brand {
    gap: 0 !important;
    color: var(--x2-navy) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .brand > span:not(.brand-mark) {
    display: none !important;
  }

  .brand-mark {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    color: var(--x2-navy) !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .login-link {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    color: var(--x2-text) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  .header-actions .button,
  .header-actions .button-small,
  .header-actions .button-light {
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--x2-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--x2-text) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  .header-actions .button:hover {
    background: var(--x2-hover) !important;
    border-color: #c8cdd4 !important;
    box-shadow: 0 3px 10px rgba(17,23,47,.045) !important;
    transform: none !important;
  }

  .hero.hero-minimal {
    min-height: 0 !important;
    padding: clamp(26px, 3vw, 46px) clamp(28px, 3.6vw, 58px) clamp(34px, 3.8vw, 58px) !important;
    display: block !important;
    background: var(--x2-bg) !important;
    border-bottom: 0 !important;
  }

  .hero.hero-minimal .hero-content {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
  }

  .hero.hero-minimal .hero-eyebrow,
  .hero.hero-minimal h1,
  .hero.hero-minimal .hero-copy,
  .hero.hero-minimal .hero-actions,
  .hero.hero-minimal .development-inline,
  .hero.hero-minimal .home-auth {
    display: none !important;
  }

  .hero.hero-minimal .mobile-showcase-frame {
    position: relative !important;
    width: 100% !important;
    height: clamp(360px, 39vw, 620px) !important;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--x2-border) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(17,23,47,.015)),
      #eef1f4 !important;
    box-shadow: none !important;
  }

  .hero.hero-minimal .mobile-showcase-frame::before {
    content: "IMAGE SHOWCASE";
    position: absolute;
    left: 18px;
    bottom: 17px;
    z-index: 1;
    color: var(--x2-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .08em;
  }

  .hero.hero-minimal .mobile-showcase-frame::after {
    content: "Artists · Releases · Events · Concerts";
    position: absolute;
    right: 18px;
    bottom: 17px;
    z-index: 1;
    color: var(--x2-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
  }

  .pricing-section {
    display: block !important;
    padding: 0 clamp(28px, 3.6vw, 58px) clamp(66px, 6vw, 92px) !important;
    color: var(--x2-text) !important;
    background: var(--x2-bg) !important;
    border: 0 !important;
  }

  .pricing-section > * {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-intro,
  .pricing-intro-minimal {
    display: none !important;
  }

  .pricing-group {
    scroll-margin-top: 78px !important;
  }

  .pricing-group + .pricing-group {
    margin-top: clamp(58px, 5vw, 78px) !important;
  }

  .pricing-group-head {
    min-height: 46px !important;
    margin: 0 0 13px !important;
    padding: 0 1px 11px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;
    border-bottom: 1px solid var(--x2-border) !important;
  }

  .pricing-group-head > div {
    display: block !important;
  }

  .pricing-group-head span {
    color: var(--x2-navy) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: .09em !important;
  }

  .pricing-group-head h3 {
    display: none !important;
  }

  .pricing-group-head p {
    margin: 0 !important;
    color: var(--x2-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  .pricing-grid {
    gap: 12px !important;
    align-items: stretch !important;
  }

  .pricing-card,
  .pricing-card-dark,
  .pricing-card.featured {
    min-height: 404px !important;
    padding: 21px !important;
    border: 1px solid var(--x2-border) !important;
    border-radius: 10px !important;
    background: var(--x2-surface) !important;
    color: var(--x2-text) !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
      border-color .14s ease,
      background .14s ease,
      box-shadow .14s ease,
      transform .08s ease !important;
  }

  .pricing-card:hover,
  .pricing-card-dark:hover,
  .pricing-card.featured:hover {
    border-color: #c8cdd4 !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(17,23,47,.035) !important;
    transform: translateY(-1px) !important;
  }

  .plan-title h4 {
    margin: 0 !important;
    color: var(--x2-text) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
  }

  .plan-description {
    min-height: 66px !important;
    margin: 24px 0 18px !important;
    color: var(--x2-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .plan-price,
  .plan-availability {
    margin: 0 0 22px !important;
  }

  .plan-price strong,
  .plan-availability strong {
    display: block !important;
    color: var(--x2-text) !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
  }

  .plan-price span,
  .plan-availability span {
    display: block !important;
    margin-top: 6px !important;
    color: var(--x2-muted) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  .plan-details {
    margin-top: auto !important;
    border-top: 1px solid var(--x2-border-soft) !important;
    border-bottom: 1px solid var(--x2-border-soft) !important;
  }

  .plan-details summary {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--x2-text) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }

  .plan-details summary span {
    font-size: 15px !important;
    font-weight: 400 !important;
  }

  .plan-details ul {
    padding: 0 0 13px 17px !important;
    margin: 0 !important;
    color: var(--x2-muted) !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .plan-action,
  .plan-action-disabled {
    min-height: 38px !important;
    margin-top: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--x2-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--x2-muted) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  .site-footer {
    padding: 25px clamp(28px, 3.6vw, 58px) 22px !important;
    background: #fff !important;
    color: var(--x2-text) !important;
    border-top: 1px solid var(--x2-border) !important;
  }

  .site-footer .footer-columns,
  .site-footer .footer-social {
    display: none !important;
  }

  .desktop-footer-simple {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 17px;
  }

  .desktop-footer-simple a {
    color: var(--x2-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
    transition: color .14s ease;
  }

  .desktop-footer-simple a:hover {
    color: var(--x2-navy);
  }

  .footer-base {
    max-width: 1480px !important;
    margin: 17px auto 0 !important;
    padding-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid var(--x2-border-soft) !important;
    color: #9aa0aa !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  .footer-base .locale-controls {
    display: none !important;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  .site-header {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .hero.hero-minimal {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .hero.hero-minimal .mobile-showcase-frame {
    height: clamp(350px, 49vw, 500px) !important;
  }

  .pricing-section {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .pricing-grid-five,
  .pricing-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pricing-card,
  .pricing-card-dark,
  .pricing-card.featured {
    min-height: 360px !important;
  }

  .site-footer {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}

@media (min-width: 781px){
  .hero.hero-minimal .mobile-showcase-frame::before,
  .hero.hero-minimal .mobile-showcase-frame::after{
    content:none!important;
    display:none!important;
  }
}

@media (min-width: 781px){
  .brand{gap:7px!important;}
  .brand-mark{border:0!important;border-right:0!important;padding:0!important;margin:0!important;color:#11172f!important;}
  .brand-mark::after{content:none!important;display:none!important;}
  .brand > span:not(.brand-mark){display:inline!important;color:#11172f!important;font-size:13px!important;font-weight:500!important;letter-spacing:.04em!important;}
  .site-footer{background:#11172f!important;color:#fff!important;border-top-color:rgba(255,255,255,.08)!important;}
  .desktop-footer-simple a{color:rgba(255,255,255,.68)!important;}
  .desktop-footer-simple a:hover{color:#fff!important;}
  .footer-base{border-top-color:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.45)!important;}
}