.metohub-hero {
      padding-top: clamp(24px, 4vw, 48px);
      padding-bottom: clamp(40px, 6vw, 80px);
    }

    .metohub-split {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(36px, 5vw, 80px);
      align-items: center;
    }

    .phone-mockup {
      position: relative;
      background: var(--paper-2);
      border: 2px solid rgba(217, 119, 6, 0.3);
      border-radius: 40px;
      padding: 18px;
      box-shadow:
        0 24px 60px -15px rgba(15, 23, 42, 0.22),
        0 0 32px 4px rgba(245, 158, 11, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
      max-width: 380px;
      margin: 0 auto;
    }

    .phone-screen {
      background: var(--paper);
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
      display: flex;
      flex-direction: column;
    }

    .phone-notch {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px 8px;
      font: 700 12px var(--mono);
      color: var(--ink-3);
      background: var(--paper);
    }

    .phone-store-bar {
      background: var(--ink);
      color: var(--leaf);
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font: 600 12px var(--mono);
    }

    .phone-store-bar span.tag {
      color: var(--sea);
      font-size: 11px;
    }

    .phone-body {
      padding: 16px;
    }

    .phone-product-card {
      background: var(--paper-2);
      border: 1px solid rgba(217, 119, 6, 0.2);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.08);
    }

    .phone-product-card img {
      width: 100%;
      height: 190px;
      object-fit: cover;
    }

    .phone-product-info {
      padding: 14px;
    }

    .phone-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
    }

    .phone-badge {
      display: inline-block;
      font: 700 10px/1 var(--mono);
      background: var(--leaf);
      color: var(--red);
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(217, 119, 6, 0.3);
      margin-bottom: 6px;
    }

    .live-order-badge {
      position: absolute;
      bottom: -16px;
      right: -16px;
      background: var(--paper);
      border: 1px solid rgba(217, 119, 6, 0.35);
      border-radius: 16px;
      padding: 12px 18px;
      box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;
      font: 600 13px var(--sans);
      animation: floatBadge 4s ease-in-out infinite;
    }

    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .store-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 28px 0;
    }

    .store-cat-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--paper-2);
      border: 1px solid rgba(15, 23, 42, 0.1);
      padding: 8px 16px;
      border-radius: 999px;
      font: 600 14px var(--sans);
      color: var(--ink);
    }

    .demo-scroll-wrapper {
      position: relative;
      margin-top: 36px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .demo-scroll-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: demoAutoScroll 42s linear infinite;
      padding-block: 16px 28px;
    }

    .demo-scroll-wrapper:hover .demo-scroll-track {
      animation-play-state: paused;
    }

    @keyframes demoAutoScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .demo-store-card {
      flex: 0 0 clamp(300px, 30vw, 360px);
      background: var(--paper-2);
      border: 1px solid rgba(217, 119, 6, 0.2);
      border-radius: 20px;
      overflow: hidden;
      box-shadow:
        0 12px 28px -8px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
      transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
    }

    .demo-store-card:hover {
      transform: translateY(-8px);
      border-color: var(--red);
      box-shadow:
        0 24px 48px -12px rgba(217, 119, 6, 0.25),
        0 0 20px 2px rgba(245, 158, 11, 0.15);
    }

    .demo-store-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      object-position: top;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      transition: transform 0.5s var(--ease);
    }

    .demo-store-card:hover img {
      transform: scale(1.03);
    }

    .demo-store-content {
      padding: 22px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
    }

    .demo-store-tag {
      font: 700 11px/1 var(--mono);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 8px;
    }

    .demo-store-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .demo-store-theme {
      font: 500 13px var(--mono);
      color: var(--ink-3);
      margin-bottom: 12px;
    }

    .pricing-toggle-wrap {
      display: flex;
      justify-content: center;
      margin: 36px 0 48px;
    }

    .pricing-pill-toggle {
      display: inline-flex;
      background: var(--paper-2);
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
    }

    .pricing-pill-btn {
      border: 0;
      background: transparent;
      padding: 10px 24px;
      border-radius: 999px;
      font: 700 14px var(--sans);
      color: var(--ink);
      cursor: pointer;
      transition: all 0.25s;
    }

    .pricing-pill-btn.active {
      background: var(--ink);
      color: var(--paper);
    }

    .pricing-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3vw, 36px);
      align-items: stretch;
    }

    .pricing-card-luxury {
      background: var(--paper-2);
      border: 1px solid rgba(217, 119, 6, 0.22);
      border-radius: 24px;
      padding: clamp(32px, 3.5vw, 44px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow:
        0 12px 28px -6px rgba(15, 23, 42, 0.1),
        0 20px 40px -10px rgba(217, 119, 6, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
      position: relative;
    }

    .pricing-card-luxury.featured {
      border-color: var(--red);
      background:
        radial-gradient(rgba(15, 23, 42, 0.08) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
        linear-gradient(175deg, #FFFDF8 0%, #F7F3EB 100%);
      box-shadow:
        0 18px 45px -8px rgba(146, 64, 14, 0.25),
        0 28px 60px -12px rgba(217, 119, 6, 0.3),
        0 0 0 1px rgba(217, 119, 6, 0.4) inset;
      transform: scale(1.02);
    }

    .pricing-top-tag {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ink);
      color: var(--wood-1);
      border: 1px solid var(--red);
      font: 700 11px/1 var(--mono);
      letter-spacing: 0.1em;
      padding: 6px 16px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .price-value {
      font: 800 clamp(44px, 4.5vw, 60px)/1 var(--display);
      color: var(--ink);
      margin: 18px 0 6px;
    }

    .price-value small {
      font-size: 16px;
      font-family: var(--sans);
      font-weight: 500;
      color: var(--ink-2);
    }

    /* Seller Testimonials / Creator Stories Slider */
    .stories-scroll-wrapper {
      position: relative;
      margin-top: 48px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
      mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    }

    .stories-scroll-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: storiesAutoScroll 45s linear infinite;
      padding-block: 16px 28px;
    }

    .stories-scroll-wrapper:hover .stories-scroll-track {
      animation-play-state: paused;
    }

    @keyframes storiesAutoScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .story-card-luxury {
      flex: 0 0 clamp(320px, 32vw, 420px);
      background: var(--paper-2);
      border: 1px solid rgba(217, 119, 6, 0.18);
      border-radius: 20px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow:
        0 12px 28px -8px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
      transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
      position: relative;
    }

    .story-card-luxury:hover {
      transform: translateY(-6px);
      border-color: var(--red);
      box-shadow:
        0 24px 44px -12px rgba(217, 119, 6, 0.22),
        0 0 16px 2px rgba(245, 158, 11, 0.12);
    }

    .story-stars {
      display: flex;
      gap: 4px;
      color: #F59E0B;
      font-size: 14px;
      margin-bottom: 16px;
    }

    .story-quote {
      font-size: 16px;
      line-height: 1.65;
      color: var(--ink);
      font-style: italic;
      margin: 0 0 24px 0;
      flex-grow: 1;
    }

    .story-author {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 18px;
      border-top: 1px dashed rgba(15, 23, 42, 0.12);
    }

    .story-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--red), var(--ink));
      color: #FFFDF8;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 17px;
      font-family: var(--display);
      box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
    }

    .story-meta h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
    }

    .story-meta p {
      margin: 2px 0 0;
      font-size: 13px;
      color: var(--red);
      font-weight: 600;
      font-family: var(--mono);
    }

    /* FAQ Exact 2-Column Editorial Styling (matching screenshot) */
    .faq-split-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: clamp(36px, 5vw, 84px);
      align-items: start;
    }

    .faq-left-col {
      position: sticky;
      top: calc(var(--nav-h) + 32px);
    }

    .faq-still-card {
      margin-top: 36px;
      background: var(--paper-2);
      border: 1px solid rgba(217, 119, 6, 0.22);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    }

    .faq-chat-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--paper-3);
      border: 1px solid rgba(217, 119, 6, 0.25);
      display: grid;
      place-items: center;
      color: var(--red);
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
      margin-bottom: 16px;
    }

    .faq-right-list {
      border-top: 1px solid rgba(15, 23, 42, 0.12);
    }

    .faq-line-item {
      border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    }

    .faq-line-summary {
      padding: 24px 0;
      font-size: clamp(17px, 1.5vw, 19px);
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      list-style: none;
      user-select: none;
      transition: color 0.2s;
    }

    .faq-line-summary:hover {
      color: var(--red);
    }

    .faq-line-summary::-webkit-details-marker {
      display: none;
    }

    .faq-chevron {
      color: var(--ink-3);
      font-size: 15px;
      transition: transform 0.25s var(--ease), color 0.2s;
    }

    .faq-line-item[open] .faq-chevron {
      transform: rotate(180deg);
      color: var(--red);
    }

    .faq-line-body {
      padding-bottom: 24px;
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
      max-width: 44em;
    }
    /* ==========================================================================
       Shared Marketing Header & Footer — Metora Luxury Enhancements
       ========================================================================== */
    header[data-marketing-header] {
      background: rgba(253, 251, 247, 0.9) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
      position: sticky;
      top: 0;
      z-index: 50;
      transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
    }

    header[data-marketing-header] .container-page {
      max-width: calc(var(--max, 1280px) + var(--gutter, 48px) * 2);
      padding-inline: var(--gutter, 24px);
    }

    header[data-marketing-header] a {
      text-decoration: none;
    }

    header[data-marketing-header] .text-foreground {
      color: var(--ink, #0F172A) !important;
    }

    header[data-marketing-header] .text-muted-foreground {
      color: var(--ink-2, #334155) !important;
      font-weight: 600;
    }

    header[data-marketing-header] nav a {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-2, #334155);
      transition: color 0.2s var(--ease);
      position: relative;
      padding: 6px 0;
    }

    header[data-marketing-header] nav a:hover {
      color: var(--red, #D97706) !important;
    }

    header[data-marketing-header] .bg-primary {
      background: var(--red, #D97706) !important;
      color: var(--paper, #FDFBF7) !important;
      font-family: var(--display) !important;
      font-weight: 800 !important;
      font-style: italic !important;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
    }

    header[data-marketing-header] .btn-primary {
      background: var(--red, #D97706) !important;
      color: var(--paper, #FDFBF7) !important;
      border-radius: 999px !important;
      font-family: var(--sans) !important;
      font-weight: 700 !important;
      padding: 10px 22px !important;
      box-shadow: 0 4px 0 var(--red-deep, #92400E) !important;
      transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
    }

    header[data-marketing-header] .btn-primary:hover {
      translate: 0 -1px !important;
      box-shadow: 0 5px 0 var(--red-deep, #92400E) !important;
    }

    header[data-marketing-header] .btn-primary:active {
      translate: 0 2px !important;
      box-shadow: 0 2px 0 var(--red-deep, #92400E) !important;
    }

    footer[data-marketing-footer] {
      background: var(--paper-2, #F7F3EB) !important;
      border-top: 1px solid rgba(217, 119, 6, 0.2) !important;
      color: var(--ink, #0F172A) !important;
      font-family: var(--sans);
    }

    footer[data-marketing-footer] .container-page {
      max-width: calc(var(--max, 1280px) + var(--gutter, 48px) * 2);
      padding-inline: var(--gutter, 24px);
    }

    footer[data-marketing-footer] .bg-primary {
      background: var(--red, #D97706) !important;
      color: var(--paper, #FDFBF7) !important;
      font-family: var(--display) !important;
      font-weight: 800 !important;
      font-style: italic !important;
    }

    footer[data-marketing-footer] a {
      text-decoration: none;
      transition: color 0.2s var(--ease);
    }

    footer[data-marketing-footer] nav a {
      color: var(--ink-2, #334155);
      font-weight: 500;
    }

    footer[data-marketing-footer] nav a:hover {
      color: var(--red, #D97706) !important;
    }

    footer[data-marketing-footer] .text-muted-foreground {
      color: var(--ink-2, #334155) !important;
    }

    footer[data-marketing-footer] .home-footer-contact {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 14px;
      font-size: 13px;
      color: var(--ink-3, #64748B);
      font-style: normal;
    }

    footer[data-marketing-footer] .home-footer-contact a {
      color: var(--ink, #0F172A);
      font-weight: 600;
    }

    footer[data-marketing-footer] .home-footer-contact a:hover {
      color: var(--red, #D97706);
    }

    footer[data-marketing-footer] .home-footer-legal {
      border-top: 1px solid rgba(217, 119, 6, 0.15) !important;
      color: var(--ink-3, #64748B) !important;
    }

    footer[data-marketing-footer] .home-footer-legal a:hover {
      color: var(--red, #D97706) !important;
    }

    /* FAQ Section Robust Enhancements */
    .faq-split-layout {
      display: grid !important;
      grid-template-columns: 1fr 1.6fr !important;
      gap: clamp(36px, 5vw, 84px) !important;
      align-items: start !important;
    }

    .faq-left-col {
      position: sticky !important;
      top: calc(var(--nav-h, 72px) + 32px) !important;
      align-self: start !important;
      z-index: 2 !important;
    }

    .faq-left-col h2 {
      font-size: clamp(38px, 4.4vw, 60px) !important;
      font-family: var(--display) !important;
      line-height: 1.1 !important;
      margin: 0 0 18px !important;
      color: var(--ink, #0F172A) !important;
      font-weight: 700 !important;
    }

    .faq-left-col h2 em {
      color: var(--red, #D97706) !important;
      font-style: italic !important;
      font-weight: 600 !important;
    }

    .faq-left-col p.lede,
    .faq-left-col > p {
      font-size: 16px !important;
      color: var(--ink-2, #334155) !important;
      line-height: 1.65 !important;
      max-width: 360px !important;
      margin: 0 !important;
    }

    .faq-still-card {
      margin-top: 36px !important;
      background: var(--paper-2, #F7F3EB) !important;
      border: 1px solid rgba(217, 119, 6, 0.22) !important;
      border-radius: 18px !important;
      padding: 24px !important;
      box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
    }

    .faq-chat-icon {
      width: 40px !important;
      height: 40px !important;
      border-radius: 10px !important;
      background: var(--paper-3, #EFE6D5) !important;
      border: 1px solid rgba(217, 119, 6, 0.25) !important;
      display: grid !important;
      place-items: center !important;
      color: var(--red, #D97706) !important;
      font-size: 17px !important;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12) !important;
      margin-bottom: 16px !important;
    }

    .faq-still-card h4 {
      font-size: 17px !important;
      font-weight: 700 !important;
      color: var(--ink, #0F172A) !important;
      margin: 0 0 6px !important;
      font-family: var(--sans) !important;
    }

    .faq-still-card p {
      font-size: 14px !important;
      color: var(--ink-2, #334155) !important;
      line-height: 1.5 !important;
      margin: 0 0 16px !important;
      font-family: var(--sans) !important;
    }

    .faq-still-card a {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      color: var(--red, #D97706) !important;
      text-decoration: none !important;
      transition: transform 0.2s var(--ease) !important;
    }

    .faq-still-card a:hover {
      transform: translateX(3px) !important;
    }

    @media (max-width: 959px) {
      .metohub-split { grid-template-columns: 1fr !important; }
      .demo-stores-grid { grid-template-columns: 1fr !important; }
      .pricing-cards-grid { grid-template-columns: 1fr !important; }
      .pricing-card-luxury.featured { transform: none !important; }
      .faq-split-layout { grid-template-columns: 1fr !important; }
      .faq-left-col { position: static !important; }
    }