/* ==========================================================================
   MaxCool Batam — Mobile-Only UI/UX Override
   Palette: Navy #0A2540 · White #FFFFFF · Orange #F58220
   Only applies to viewports <= 767px. Desktop/tablet view is untouched.
   ========================================================================== */

@media (max-width: 767px) {

  :root {
    --mc-navy: #0A2540;
    --mc-navy-2: #123456;
    --mc-navy-3: #1E3A5F;
    --mc-navy-soft: #E5EBF2;
    --mc-ink: #0A2540;
    --mc-muted: #4A5E7A;
    --mc-line: #DCE3EC;
    --mc-white: #FFFFFF;
    --mc-off: #F5F8FC;
    --mc-orange: #F58220;
    --mc-orange-2: #FFA04D;
    --mc-orange-dark: #C2661A;
  }

  /* ---------- Global base ---------- */
  html, body {
    background: var(--mc-white) !important;
    color: var(--mc-ink) !important;
  }

  body > #root,
  main {
    background: var(--mc-white) !important;
  }

  /* Remove dark section backgrounds */
  section,
  .bg-\[\#050B14\],
  .bg-\[\#030812\],
  .bg-\[\#0A1424\],
  [class*="bg-gradient-to-b"] {
    background: var(--mc-white) !important;
  }

  /* Neutralize dark overlays / noise filters */
  section > div[aria-hidden="true"],
  section > div.absolute.inset-0 {
    opacity: 0.35 !important;
  }

  /* ---------- Typography ---------- */
  h1, h2, h3, h4, .font-display {
    color: var(--mc-navy) !important;
    letter-spacing: -0.02em !important;
  }

  h1 {
    font-weight: 900 !important;
    line-height: 0.95 !important;
  }

  h2 {
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  p, span, li {
    color: var(--mc-muted);
  }

  .text-white { color: var(--mc-navy) !important; }
  .text-slate-300 { color: #5A6F8C !important; }
  .text-slate-400 { color: #6B7F98 !important; }
  .text-slate-500 { color: #7A8CA5 !important; }
  .text-\[\#0a0a0a\] { color: var(--mc-navy) !important; }

  /* Orange accent stays orange */
  .text-\[\#F58220\], .text-\[\#FFA04D\] {
    color: var(--mc-orange) !important;
  }

  /* ---------- Header / Nav ---------- */
  header.fixed {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--mc-line) !important;
    box-shadow: 0 2px 14px rgba(10, 37, 64, 0.06);
  }

  header .text-white,
  header button,
  header a {
    color: var(--mc-navy) !important;
  }

  header button[class*="border-[#1A2F45]"] {
    border: 2px solid var(--mc-navy) !important;
    background: var(--mc-white) !important;
    color: var(--mc-navy) !important;
  }

  /* ---------- Hero ---------- */
  #hero {
    background:
      radial-gradient(1200px 420px at 120% -10%, rgba(245,130,32,0.10), transparent 60%),
      radial-gradient(900px 380px at -20% 120%, rgba(10,37,64,0.07), transparent 60%),
      var(--mc-white) !important;
    min-height: auto !important;
    padding: 100px 0 40px !important;
    border-bottom: 4px solid var(--mc-navy) !important;
    position: relative;
    overflow: hidden !important;
  }

  /* Diagonal orange accent bars (from reference style) */
  #hero::before {
    content: "";
    position: absolute;
    right: -40px;
    top: 90px;
    width: 170px;
    height: 8px;
    background: var(--mc-orange);
    transform: rotate(-18deg);
    box-shadow: 0 18px 0 var(--mc-navy), 0 36px 0 var(--mc-orange);
    z-index: 1;
    pointer-events: none;
  }

  #hero::after {
    content: "";
    position: absolute;
    left: -30px;
    bottom: 40px;
    width: 140px;
    height: 6px;
    background: var(--mc-navy);
    transform: rotate(-18deg);
    box-shadow: 0 -14px 0 var(--mc-orange);
    z-index: 1;
    pointer-events: none;
  }

  #hero h1 {
    font-size: 46px !important;
    line-height: 0.96 !important;
    font-weight: 900 !important;
    color: var(--mc-navy) !important;
    letter-spacing: -0.035em !important;
  }

  /* Orange highlighted words keep orange */
  #hero h1 span,
  #hero h1 .text-\[\#F58220\] {
    color: var(--mc-orange) !important;
  }

  #hero p {
    color: var(--mc-muted) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Rating pill (the outer container only, not the avatar circles) */
  #hero .inline-flex.rounded-full,
  #hero > div > div > div.inline-flex.rounded-full,
  #hero .rounded-full.border.border-\[\#1A2F45\] {
    background: var(--mc-white) !important;
    border: 2px solid var(--mc-navy) !important;
    color: var(--mc-navy) !important;
    box-shadow: 4px 4px 0 var(--mc-navy);
  }

  #hero .inline-flex.rounded-full span,
  #hero .inline-flex.rounded-full p {
    color: var(--mc-navy) !important;
  }

  /* ---------- Section headers ---------- */
  section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    border-top: none !important;
    position: relative;
  }

  /* Orange label ("— MENGAPA MAXCOOL") */
  section .text-\[\#F58220\].font-mono {
    color: var(--mc-orange) !important;
    background: rgba(245, 130, 32, 0.10);
    padding: 6px 12px !important;
    border-radius: 4px;
    border-left: 4px solid var(--mc-orange);
    font-weight: 800 !important;
  }

  /* Decorative navy bar under each section heading */
  section h2 {
    font-size: 32px !important;
    color: var(--mc-navy) !important;
    position: relative;
  }

  /* ---------- Cards ---------- */
  [class*="bg-[#0A1424]"],
  article[class*="border-[#1A2F45]"],
  div[class*="border-[#1A2F45]"][class*="rounded"] {
    background: var(--mc-white) !important;
    border: 2px solid var(--mc-navy) !important;
    border-radius: 18px !important;
    box-shadow: 6px 6px 0 var(--mc-orange) !important;
    transition: transform 0.25s ease !important;
    color: var(--mc-navy) !important;
  }

  [class*="bg-[#0A1424]"] h3,
  [class*="bg-[#0A1424]"] p,
  [class*="border-[#1A2F45]"] h3,
  [class*="border-[#1A2F45]"] p {
    color: var(--mc-navy) !important;
  }

  [class*="bg-[#0A1424]"] p {
    color: var(--mc-muted) !important;
  }

  /* Generic dark borders -> light navy line */
  [class*="border-[#1A2F45]"] {
    border-color: var(--mc-line) !important;
  }

  /* ---------- Layanan filter chips ---------- */
  #layanan button {
    border: 2px solid var(--mc-navy) !important;
    background: var(--mc-white) !important;
    color: var(--mc-navy) !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
  }

  #layanan button.bg-\[\#F58220\] {
    background: var(--mc-orange) !important;
    color: var(--mc-white) !important;
    border-color: var(--mc-orange) !important;
    box-shadow: 3px 3px 0 var(--mc-navy) !important;
  }

  /* ---------- Buttons: btn-copper & CTAs ---------- */
  .btn-copper,
  a.btn-copper,
  button.btn-copper {
    background: var(--mc-orange) !important;
    color: var(--mc-white) !important;
    box-shadow: 5px 5px 0 var(--mc-navy) !important;
    border: 2px solid var(--mc-navy) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    border-radius: 10px !important;
  }

  .btn-copper:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--mc-navy) !important;
  }

  /* Remove any gradient from copper button */
  .btn-copper::before,
  .btn-copper::after {
    display: none !important;
  }

  /* "PESAN" style links */
  a.text-\[\#F58220\],
  button.text-\[\#F58220\] {
    color: var(--mc-orange) !important;
    font-weight: 800 !important;
  }

  /* ---------- Sticky bottom CTA ---------- */
  .mc-sticky-cta,
  #mc-sticky-cta {
    background: var(--mc-navy) !important;
    border-top: 4px solid var(--mc-orange) !important;
    box-shadow: 0 -8px 20px rgba(10, 37, 64, 0.15) !important;
    padding: 10px 12px !important;
  }

  .mc-sticky-cta a,
  #mc-sticky-cta a {
    border-radius: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    border: 2px solid var(--mc-white) !important;
  }

  .mc-sticky-cta a[href*="wa.me"] {
    background: #25D366 !important;
    color: var(--mc-white) !important;
  }

  .mc-sticky-cta a[href*="tel:"] {
    background: var(--mc-orange) !important;
    color: var(--mc-white) !important;
    border-color: var(--mc-white) !important;
  }

  /* ---------- Footer ---------- */
  footer {
    background: var(--mc-navy) !important;
    border-top: 6px solid var(--mc-orange) !important;
    color: var(--mc-white) !important;
  }

  footer * {
    color: inherit !important;
  }

  footer h3, footer h4, footer .font-display,
  footer .text-white {
    color: var(--mc-white) !important;
  }

  footer p, footer span, footer li, footer a {
    color: #CBD6E6 !important;
  }

  footer a:hover { color: var(--mc-orange) !important; }

  footer [class*="border-[#1A2F45]"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* ---------- Strong bottom CTA block ("BUTUH BANTUAN SEKARANG?") ---------- */
  section[class*="bg-[#F58220]"],
  section:has(h2.text-\[\#0a0a0a\]) {
    background: var(--mc-orange) !important;
    border-top: 6px solid var(--mc-navy) !important;
    border-bottom: 6px solid var(--mc-navy) !important;
  }

  section:has(h2.text-\[\#0a0a0a\]) h2 {
    color: var(--mc-navy) !important;
  }

  /* ---------- Mobile menu drawer ---------- */
  div[class*="fixed"][class*="inset-0"][class*="z-50"],
  div[role="dialog"] {
    background: var(--mc-white) !important;
  }

  div[role="dialog"] a,
  div[role="dialog"] button {
    color: var(--mc-navy) !important;
  }

  /* ---------- Blog cards / images ---------- */
  img {
    border-radius: 14px;
  }

  /* ---------- Bottom spacing to avoid sticky CTA overlap ---------- */
  footer {
    padding-bottom: 12px !important;
  }

  /* ============================================================
     REFINEMENT v2 — Layout, spacing, scroll & usability fixes
     ============================================================ */

  /* 11. GLOBAL: prevent horizontal overflow, keep scroll free */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Ensure scroll-reveal animations that get stuck do not leave content invisible */
  [style*="opacity: 0"][style*="translateY"],
  [style*="opacity:0"][style*="translateY"] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 1. NAVBAR: stacked layout (logo center, hamburger below) */
  header.fixed,
  header.fixed > div,
  header.fixed a,
  header.fixed a[data-testid="nav-logo"] {
    overflow: visible !important;
  }

  header.fixed > div {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 130px !important;
    padding-top: 24px !important;
    padding-bottom: 14px !important;
    gap: 8px !important;
  }

  /* Logo tidak kepotong */
  header.fixed a[data-testid="nav-logo"],
  header.fixed > div > a:first-child {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
  }

  header.fixed img,
  header.fixed a img {
    height: 64px !important;
    max-height: 64px !important;
    min-height: 64px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    overflow: visible !important;
  }

  header.fixed a[data-testid="nav-logo"] {
    margin: 0 auto !important;
  }

  header.fixed nav.hidden { display: none !important; }

  header.fixed button.lg\:hidden,
  header.fixed > div > button:last-child {
    margin: 0 auto !important;
    width: 38px !important;
    height: 38px !important;
  }

  /* Push hero down a bit to clear the taller stacked navbar */
  #hero {
    padding-top: 120px !important;
  }

  /* 2A. HERO: tight gap between rating pill and heading */
  #hero .inline-flex.rounded-full {
    margin-bottom: 12px !important;
  }

  #hero h1 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    line-height: 1.1 !important;
    font-size: 40px !important;
    letter-spacing: -0.03em !important;
  }

  #hero h1 br { display: none; }

  /* 2B. HERO description tighter spacing */
  #hero p { margin-top: 0 !important; }

  /* 3. STRIPE DECORATION: horizontal full-width */
  #hero::before {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: 100px !important;
    height: 5px !important;
    box-shadow: 0 12px 0 var(--mc-navy), 0 24px 0 var(--mc-orange) !important;
  }

  #hero::after {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    bottom: 24px !important;
    height: 4px !important;
    box-shadow: 0 -10px 0 var(--mc-orange) !important;
  }

  /* 4. CARA KERJA (#proses): horizontal scroll cards */
  #proses .lg\:col-span-7 > div.space-y-6,
  #proses [class*="space-y-"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 4px 4px 18px !important;
    margin: 0 -6px !important;
    -webkit-overflow-scrolling: touch;
  }

  #proses .lg\:col-span-7 > div.space-y-6 > *,
  #proses [class*="space-y-"] > * {
    flex: 0 0 82% !important;
    scroll-snap-align: start !important;
    min-width: 82% !important;
    max-width: 82% !important;
    margin: 0 !important;
  }

  /* Hide the vertical connector line on mobile (designed for vertical layout) */
  #proses .absolute.left-\[27px\],
  #proses [class*="absolute"][class*="bg-gradient"][class*="w-px"] {
    display: none !important;
  }

  /* 5. AREA section: background image covers, no white gap */
  #area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  #area > div.absolute.inset-0 {
    opacity: 0.18 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #area > div.relative,
  #area .max-w-7xl {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 6. AREA KAMI: horizontal scroll pills */
  #area .grid:not(.lg\:grid-cols-12) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 14px !important;
    scroll-snap-type: x mandatory !important;
  }

  #area .grid:not(.lg\:grid-cols-12) > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  /* "& lainnya" / disabled pills — same card style as others */
  #area .opacity-50,
  #area [class*="opacity-"] {
    opacity: 0.85 !important;
    background: var(--mc-white) !important;
    border: 2px solid var(--mc-navy) !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--mc-orange) !important;
    color: var(--mc-navy) !important;
  }

  /* 7. WORKSHOP SECTION (#lokasi): ensure it's visible */
  #lokasi {
    overflow: visible !important;
    padding: 48px 0 !important;
    display: block !important;
  }

  #lokasi > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #lokasi .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  #lokasi h2 {
    font-size: 28px !important;
  }

  #lokasi p, #lokasi span:not(.font-mono) {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #lokasi .space-y-4 > div,
  #lokasi [class*="rounded-2xl"] {
    width: 100% !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  /* 8. BLOG (#blog): horizontal scroll article cards */
  #blog > div > div.grid,
  #blog .grid:not(:first-child) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory !important;
    padding: 4px 4px 18px !important;
    margin: 0 -6px !important;
  }

  #blog .grid:not(:first-child) > * {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start !important;
  }

  /* 9. CTA "BUTUH BANTUAN SEKARANG" — tighter card + force visible */
  section:has(h2.text-\[\#0a0a0a\]) > div {
    padding: 24px 16px !important;
  }

  section:has(h2.text-\[\#0a0a0a\]) .rounded-3xl,
  section:has(h2.text-\[\#0a0a0a\]) [style*="opacity: 0"] {
    padding: 24px 20px !important;
    border-radius: 22px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Force readable text inside "Butuh Bantuan" orange card */
  section:has(h2.text-\[\#0a0a0a\]) h2,
  section:has(h2.text-\[\#0a0a0a\]) p,
  section:has(h2.text-\[\#0a0a0a\]) span {
    color: var(--mc-orange) !important;
    -webkit-text-fill-color: var(--mc-orange) !important;
    background: none !important;
    background-image: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
  }

  /* Keep the small "— BUTUH BANTUAN SEKARANG?" label navy for readability */
  section:has(h2.text-\[\#0a0a0a\]) .font-mono,
  section:has(h2.text-\[\#0a0a0a\]) [class*="font-mono"] {
    color: var(--mc-navy) !important;
  }

  section:has(h2.text-\[\#0a0a0a\]) h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  section:has(h2.text-\[\#0a0a0a\]) p {
    font-size: 14px !important;
  }

  /* 10. FOOTER: single-column, consistent spacing, full-width CTA */
  footer > div.relative {
    padding: 24px 20px 16px !important;
  }

  footer .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  footer .grid > div {
    margin-bottom: 12px;
  }

  footer a[href*="wa.me"],
  footer a[href*="tel:"] {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
  }

  footer a[href*="wa.me"] {
    background: #25D366 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  footer a[href*="tel:"] {
    background: var(--mc-orange) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  footer ul { padding-left: 0 !important; }
  footer ul li { margin-bottom: 8px !important; }

  /* ============================================================
     REFINEMENT v3 — Strict fixes
     ============================================================ */

  /* v3 menu block removed — replaced by v27 dropdown */

  /* Backdrop behind menu — blurred gradient transparan */
  body > div.fixed.inset-0:has(+ *),
  body > div.fixed.inset-0:not(:has(a[href*="wa.me"]):not(:has(> div > a[href*="wa.me"]))) {
    background: linear-gradient(to bottom, rgba(10,37,64,0.35), rgba(10,37,64,0.05)) !important;
    backdrop-filter: blur(3px) !important;
  }

  /* Make all inner nav containers flex column */
  body > div.fixed nav,
  body > div.fixed ul,
  body > div.fixed > div,
  body > div.fixed > div > div,
  aside.fixed nav,
  aside.fixed ul,
  aside.fixed > div,
  div[role="dialog"] nav,
  div[role="dialog"] ul,
  div[role="dialog"] > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    align-items: stretch !important;
  }

  /* Menu items */
  body > div.fixed:not(header) a,
  body > div.fixed:not(header) li > a,
  aside.fixed a,
  div[role="dialog"] a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    color: var(--mc-navy) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--mc-line) !important;
    background: transparent !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  /* Close (X) button — kembali ke posisi di pojok panel */
  body > div.fixed:not(header) button[aria-label*="close" i],
  body > div.fixed:not(header) button[aria-label*="tutup" i],
  aside.fixed button[aria-label*="close" i],
  div[role="dialog"] button[aria-label*="close" i] {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 2px solid var(--mc-navy) !important;
    border-radius: 8px !important;
    background: var(--mc-white) !important;
    color: var(--mc-navy) !important;
    z-index: 80 !important;
    transform: none !important;
  }

  /* 3. HERO: reorder -> HEADING, PILL, SUBTEXT */
  #hero div:has(> h1) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #hero h1 { order: 1 !important; margin-bottom: 4px !important; }
  #hero .inline-flex.rounded-full { order: 2 !important; margin: 4px 0 !important; align-self: flex-start !important; }
  #hero p { order: 3 !important; }
  #hero div:has(> h1) > .flex,
  #hero div:has(> h1) > a.btn-copper { order: 4 !important; }

  /* 4. CTA "BUTUH BANTUAN": extra compact */
  section:has(h2.text-\[\#0a0a0a\]) {
    padding: 24px 0 !important;
  }
  section:has(h2.text-\[\#0a0a0a\]) > div {
    padding: 16px !important;
  }
  section:has(h2.text-\[\#0a0a0a\]) .rounded-3xl {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  section:has(h2.text-\[\#0a0a0a\]) .rounded-3xl > * {
    margin-bottom: 10px !important;
  }

  /* 5. FOOTER KONTAK: box-style full-width — keep social media SVG icons visible */
  footer svg { display: inline-block !important; }
  footer a[href*="wa.me"] svg,
  footer a[href*="tel:"] svg,
  footer a[href^="mailto:"] svg { display: none !important; }

  footer a[href*="wa.me"],
  footer a[href*="tel:"],
  footer a[href^="mailto:"],
  footer .flex:has(a[href*="wa.me"]),
  footer .flex:has(a[href*="tel:"]),
  footer .flex:has(a[href^="mailto:"]) {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
  }

  footer a[href^="mailto:"] {
    background: var(--mc-white) !important;
    color: var(--mc-navy) !important;
    border: 2px solid var(--mc-white) !important;
  }

  /* 6. CARA KERJA: padding 16px, min-width 85% */
  #proses .lg\:col-span-7 > div.space-y-6,
  #proses [class*="space-y-"] {
    padding: 4px 16px 18px !important;
    margin: 0 -16px !important;
  }

  #proses .lg\:col-span-7 > div.space-y-6 > *,
  #proses [class*="space-y-"] > * {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;
    margin-right: 0 !important;
  }

  /* 8. GLOBAL section spacing */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section .max-w-7xl,
  section [class*="max-w-"][class*="mx-auto"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 10. AREA COVERAGE: scroll isolation — header stays, track scrolls */
  #area { padding: 40px 0 !important; overflow: hidden !important; }

  #area > div.relative,
  #area .max-w-7xl {
    padding: 0 !important;
  }

  /* Header (left column) always visible, no overflow */
  #area .lg\:col-span-5 {
    padding: 0 16px 16px !important;
  }

  /* Right column (the city list) becomes horizontal scroll track */
  #area .lg\:col-span-7 {
    padding: 0 !important;
    overflow: hidden !important;
  }

  #area .lg\:col-span-7 > *,
  #area .lg\:col-span-7 .grid,
  #area .lg\:col-span-7 [class*="grid-cols"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 8px 16px 16px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }

  #area .lg\:col-span-7 > * > *,
  #area .lg\:col-span-7 .grid > *,
  #area .lg\:col-span-7 [class*="grid-cols"] > * {
    flex: 0 0 80% !important;
    min-width: 80% !important;
    scroll-snap-align: start !important;
    background: var(--mc-white) !important;
    border: 2px solid var(--mc-navy) !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--mc-orange) !important;
    padding: 14px !important;
    color: var(--mc-navy) !important;
    opacity: 1 !important;
  }

  /* ============================================================
     REFINEMENT v4 — Per-user feedback
     ============================================================ */

  /* 1. CTA "Butuh Bantuan" — deskripsi warna oren */
  section:has(h2.text-\[\#0a0a0a\]) p,
  section:has(h2.text-\[\#0a0a0a\]) .rounded-3xl p,
  section:has(h2.text-\[\#0a0a0a\]) .rounded-3xl span:not(.inline-flex):not([class*="bg-"]) {
    color: var(--mc-orange) !important;
    font-weight: 700 !important;
  }

  /* 4. CARA KERJA — card style mirip "Layanan Kami" */
  #proses .lg\:col-span-7 > div.space-y-6 > *,
  #proses [class*="space-y-"] > * {
    background: var(--mc-white) !important;
    border: 2px solid var(--mc-navy) !important;
    border-radius: 18px !important;
    box-shadow: 6px 6px 0 var(--mc-orange) !important;
    padding: 18px !important;
    color: var(--mc-navy) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #proses .lg\:col-span-7 > div.space-y-6 > * h3,
  #proses [class*="space-y-"] > * h3,
  #proses [class*="space-y-"] > * [class*="font-display"] {
    color: var(--mc-navy) !important;
    font-weight: 900 !important;
  }

  #proses [class*="space-y-"] > * p {
    color: var(--mc-muted) !important;
  }

  /* Step number chip stays orange */
  #proses [class*="space-y-"] > * .w-14,
  #proses [class*="space-y-"] > * [class*="rounded-2xl"][class*="bg-"] {
    background: var(--mc-orange) !important;
    border: 2px solid var(--mc-navy) !important;
    color: var(--mc-white) !important;
    box-shadow: 3px 3px 0 var(--mc-navy) !important;
  }

  /* 5. FOOTER kontak — 3 kotak sama ukuran, gap rapat, email navy-white */
  footer .grid > div:has(a[href*="wa.me"]),
  footer .grid > div:has(a[href*="tel:"]),
  footer .grid > div:has(a[href^="mailto:"]),
  footer div:has(> a[href*="wa.me"]),
  footer div:has(> a[href*="tel:"]),
  footer div:has(> a[href^="mailto:"]) {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  footer a[href*="wa.me"],
  footer a[href*="tel:"],
  footer a[href^="mailto:"] {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box !important;
    min-height: 54px !important;
  }

  footer a[href*="wa.me"] {
    background: #25D366 !important;
    color: #fff !important;
    border: none !important;
  }

  footer a[href*="tel:"] {
    background: var(--mc-orange) !important;
    color: #fff !important;
    border: none !important;
  }

  footer a[href^="mailto:"] {
    background: var(--mc-navy) !important;
    color: #fff !important;
    border: none !important;
    word-break: break-all !important;
    font-size: 13px !important;
  }

  /* Remove the default navy-letter email text styling above */
  footer p:has(a[href^="mailto:"]),
  footer div:has(> a[href^="mailto:"]) {
    background: transparent !important;
  }

  /* ============================================================
     REFINEMENT v5 — Per-user feedback
     ============================================================ */

  /* 1. CTA "Butuh Bantuan" — force oren text (higher specificity) */
  section .rounded-3xl p,
  section .rounded-3xl > div > p,
  section[class*="overflow-hidden"] p {
    color: var(--mc-orange) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  /* 2. HAPUS KOLOM KONTAK di footer (yg berisi kotak WA 24/7, nomor, email besar) */
  footer .grid > div:has(a[href*="wa.me"]),
  footer .grid > div:has(a[href*="tel:"]),
  footer .grid > div:has(a[href^="mailto:"]),
  footer .grid > div:has(> a[href*="wa.me"]),
  footer div:has(> a[href*="wa.me"].inline-flex) {
    display: none !important;
  }

  /* Also hide standalone big WA/tel/email buttons if rendered outside grid */
  footer > div > div > a[href*="wa.me"],
  footer > div > div > a[href*="tel:"],
  footer > div > div > a[href^="mailto:"] {
    display: none !important;
  }

  /* 3. CARA KERJA: card tidak kepotong — padding scroll cukup, card lebih kecil */
  #proses {
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #proses .lg\:col-span-7,
  #proses > div > div > .lg\:col-span-7 {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #proses .lg\:col-span-7 > div.space-y-6,
  #proses [class*="space-y-"] {
    padding: 6px 16px 22px !important;
    margin: 0 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  #proses .lg\:col-span-7 > div.space-y-6 > *,
  #proses [class*="space-y-"] > * {
    flex: 0 0 calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
  }

  /* Also fix sticky left column padding */
  #proses .lg\:col-span-5 {
    padding: 0 16px 16px !important;
  }

    /* v8 block removed per user spec — replaced by clean v28 horizontal row */

/* ============================================================
     REFINEMENT v10 — Footer & layout sanity (mobile only)
     ============================================================ */

  /* 1. Sticky footer via flex column */
  html, body {
    min-height: 100vh !important;
  }
  body {
    display: flex !important;
    flex-direction: column !important;
  }
  body > #root {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;
    min-height: 100vh !important;
  }
  body > #root > * {
    flex-shrink: 0;
  }
  body > #root > main,
  body > #root > div:not(footer):not(header) {
    flex: 1 0 auto !important;
  }
  footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }

  /* 2. Bottom CTA spacing — reserve just enough room (CTA ~70px tall) */
  body {
    padding-bottom: 76px !important;
  }
  footer {
    padding-bottom: 12px !important;
  }
  .mc-sticky-cta,
  #mc-sticky-cta {
    z-index: 60 !important;
  }

  /* 3. Remove forced 100vh / huge empty space on sections */
  section,
  section > div,
  [class*="min-h-screen"],
  [class*="h-screen"] {
    min-height: 0 !important;
    height: auto !important;
  }
  #hero {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Trim default section padding a touch on mobile */
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* 4. Clean background — kill grid/dot/noise patterns on mobile */
  body,
  #root,
  main,
  section {
    background-image: none !important;
  }
  [class*="bg-grid"],
  [class*="grid-pattern"],
  [class*="bg-dots"],
  [class*="dot-pattern"],
  [style*="background-image"][style*="grid"],
  [style*="background-image"][style*="linear-gradient"][style*="repeating"],
  svg[class*="grid"],
  div[aria-hidden="true"][class*="grid"],
  div[aria-hidden="true"][style*="grid"] {
    background-image: none !important;
    display: none !important;
  }

  /* 5. Footer readability */
  footer {
    text-align: center !important;
    padding: 24px 16px 24px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  footer p,
  footer span,
  footer li,
  footer a {
    font-size: 13px !important;
    color: #6b7a8c !important;
  }
  footer h3, footer h4 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }
  footer .grid > div {
    text-align: center !important;
  }
  footer ul {
    text-align: center !important;
    list-style: none !important;
  }
  footer ul li {
    margin-bottom: 6px !important;
  }
}



@media (max-width: 767px) {
  /* ============================================================
     v27 — MOBILE MENU AS ABSOLUTE DROPDOWN UNDER HEADER
     Spec: position:absolute relative to header, animate via
     max-height + opacity, no transform / no fixed.
     ============================================================ */
  header.fixed { position: fixed !important; }
  header.fixed > div { position: relative !important; }

  /* The mobile menu dropdown — react-rendered .lg:hidden (NOT the button)
     and our normalized .mc-mobile-menu class */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    background: #ffffff !important;
    border-top: 1px solid #eee !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 10px 24px rgba(10, 37, 64, 0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 1 !important;
    z-index: 40 !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    animation: mcSlideDown 0.32s ease both !important;
    max-height: calc(100vh - 160px) !important;
  }

  @keyframes mcSlideDown {
    from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
    to   { max-height: 600px; opacity: 1; }
  }

  /* Links inside the dropdown — clean stack */
  header.fixed .lg\:hidden:not(button) a,
  header.fixed .mc-mobile-menu a {
    display: block !important;
    width: 100% !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    color: #0A2540 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    background: transparent !important;
    border-radius: 8px !important;
    border-bottom: 1px solid #ECEFF3 !important;
    transition: color 0.15s ease, background 0.15s ease !important;
  }
  header.fixed .lg\:hidden:not(button) a:last-child,
  header.fixed .mc-mobile-menu a:last-child {
    border-bottom: none !important;
  }
  header.fixed .lg\:hidden:not(button) a:hover,
  header.fixed .mc-mobile-menu a:hover {
    background: #F6F8FB !important;
    color: #F58220 !important;
  }

  /* Kill any inner wrapper transforms / max-heights that React may add */
  header.fixed .lg\:hidden:not(button) > *,
  header.fixed .mc-mobile-menu > * {
    transform: none !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Remove the old ::after “tap to close” overlay that the previous fix added */
  header.fixed .lg\:hidden::after,
  header.fixed .mc-mobile-menu::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v28 — HAMBURGER ANCHORED TOP-RIGHT (Horizontal Row)
     Override prior column-stack rules. Reset hamburger position.
     ============================================================ */
  header.fixed,
  header.fixed > div {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 8px 14px !important;
    gap: 12px !important;
  }

  /* Hamburger reset — no fixed/absolute/transform anywhere */
  header.fixed button[data-testid="nav-mobile-toggle"],
  header.fixed button.lg\:hidden,
  header.fixed > div > button:last-child,
  header.fixed > div > div > button {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo image stays compact, height aligned with hamburger */
  header.fixed [data-testid="nav-logo"] img,
  header.fixed a img {
    height: 44px !important;
    max-height: 44px !important;
    min-height: 0 !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Hero clears the (now compact) navbar */
  #hero {
    padding-top: 80px !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v30 — DROPDOWN OVERLAYS CONTENT (Solid, opaque, top z-index)
     ============================================================ */

  /* STEP 1: Solid white background, full opacity, NO blur/transparency */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu,
  .mc-mobile-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* STEP 2: z-index — menu on TOP of everything */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu,
  .mc-mobile-menu {
    z-index: 9999 !important;
  }
  header.fixed,
  header[data-testid="site-navbar"] {
    position: fixed !important;
    z-index: 9998 !important;
  }

  /* STEP 3: Prevent parent interference — kill transforms/overflow on
     ancestors that create new stacking contexts and trap the menu */
  html, body, #root, #root > div,
  header.fixed, header.fixed > div {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }
  /* Restore the body horizontal-overflow guard without clipping vertically */
  html, body { overflow-x: hidden !important; }

  /* STEP 4: Full width coverage as absolute dropdown under header */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu,
  .mc-mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    inset: auto !important;
    transform: none !important;
  }

  /* STEP 5: Visual separation depth */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu,
  .mc-mobile-menu {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid #ECEFF3 !important;
  }

  /* Children of the menu must also be solid (kill any inner translucent layer) */
  header.fixed .lg\:hidden:not(button) > *,
  header.fixed .mc-mobile-menu > * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v31 — DROPDOWN FILLS FULL VIEWPORT BELOW HEADER
     The menu must COVER all content below, not just its own height.
     ============================================================ */
  header.fixed .lg\:hidden:not(button),
  header.fixed .mc-mobile-menu,
  .mc-mobile-menu {
    height: calc(100vh - 64px) !important;
    min-height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    border-radius: 0 !important;
    border-top: 1px solid #ECEFF3 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    /* Solid opaque layer */
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    /* Full width, anchored under header */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v32 — Fix CTA button alignment inside mobile menu
     "HUBUNGI 081170065656" must sit centered inside its rounded box.
     ============================================================ */
  header.fixed .lg\:hidden:not(button) a[href*="wa.me"],
  header.fixed .lg\:hidden:not(button) a[href*="tel:"],
  header.fixed .mc-mobile-menu a[href*="wa.me"],
  header.fixed .mc-mobile-menu a[href*="tel:"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: calc(100% - 8px) !important;
    margin: 12px 4px 4px !important;
    padding: 14px 18px !important;
    border: 2px solid #0A2540 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    color: #0A2540 !important;
    font-weight: 800 !important;
    box-shadow: 3px 3px 0 #F58220 !important;
    box-sizing: border-box !important;
  }
  header.fixed .lg\:hidden:not(button) a[href*="wa.me"] svg,
  header.fixed .lg\:hidden:not(button) a[href*="tel:"] svg,
  header.fixed .mc-mobile-menu a[href*="wa.me"] svg,
  header.fixed .mc-mobile-menu a[href*="tel:"] svg {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v33 — /layanan page fixes
     1) Banner / hero image full edge-to-edge (no side padding)
     2) "LAYANAN KAMI" eyebrow box fills full width, no circle overlap
     ============================================================ */

  /* 1. Banner / hero image at top — full bleed left to right */
  body[data-page="layanan"] section:first-of-type,
  main > section:first-of-type,
  section:has(> div > img[alt*="MAXCOOL" i]),
  section:has(> div > img[alt*="layanan" i]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section:has(> div > img[alt*="MAXCOOL" i]) > div,
  section:has(> div > img[alt*="layanan" i]) > div,
  section img[alt*="MAXCOOL" i],
  section img[alt*="layanan" i] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* Generic catch: any large rounded card with an image inside the first section */
  main > section:first-of-type [class*="rounded"] {
    border-radius: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 2. Eyebrow tag "LAYANAN KAMI" — make the pill/box full width,
        remove the orange circle that overlaps to its left */
  section [class*="rounded-full"]:has(> span),
  section span[class*="uppercase"][class*="tracking"] {
    width: auto !important;
  }

  /* The decorative circle next to the eyebrow tag */
  section .rounded-full.bg-\[\#F58220\],
  section [class*="rounded-full"][class*="bg-[#F58220]"]:not(button):not(a),
  section .relative > .absolute.rounded-full,
  section [aria-hidden="true"][class*="rounded-full"][class*="bg-"] {
    display: none !important;
  }

  /* Make eyebrow container a clean full-width pill aligned left */
  section > div > div:has(> span[class*="uppercase"]),
  section .inline-flex:has(> span[class*="uppercase"][class*="tracking"]) {
    display: flex !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: #FFE8D5 !important;
    color: #F58220 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v34 — /layanan banner full top→bottom + remove dot indicators
     ============================================================ */

  /* Banner section: kill all top/bottom padding so image fills from
     under the header right down to the "Semua Layanan ..." caption */
  main > section:first-of-type,
  body > div > section:first-of-type {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  main > section:first-of-type > div,
  body > div > section:first-of-type > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  main > section:first-of-type img,
  body > div > section:first-of-type img {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Remove the small orange + blue indicator dots under the banner */
  main > section:first-of-type [class*="rounded-full"][class*="bg-[#F58220]"],
  main > section:first-of-type [class*="rounded-full"][class*="bg-[#1E8FD5]"],
  main > section:first-of-type .w-2.h-2,
  main > section:first-of-type .w-1\.5.h-1\.5,
  main > section:first-of-type .w-3.h-3,
  main > section:first-of-type [aria-hidden="true"][class*="rounded-full"]:not(button):not(a),
  main > section:first-of-type div[class*="flex"][class*="gap"]:has(> .rounded-full) {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     v35 — kill the orange/blue indicator dots more aggressively
     ============================================================ */
  /* Any small rounded element with brand colors used as a dot */
  [class*="rounded-full"][class*="bg-[#F58220]"]:not(button):not(a):not(.mc-mobile-menu *),
  [class*="rounded-full"][class*="bg-[#1E8FD5]"]:not(button):not(a):not(.mc-mobile-menu *),
  [class*="rounded-full"][style*="F58220"]:not(button):not(a),
  [class*="rounded-full"][style*="1E8FD5"]:not(button):not(a),
  [class*="rounded-full"][style*="245, 130, 32"]:not(button):not(a),
  [class*="rounded-full"][style*="30, 143, 213"]:not(button):not(a) {
    display: none !important;
  }
  /* Tailwind w/h utility dots */
  .w-1.h-1.rounded-full,
  .w-1\.5.h-1\.5.rounded-full,
  .w-2.h-2.rounded-full,
  .w-2\.5.h-2\.5.rounded-full,
  .w-3.h-3.rounded-full {
    display: none !important;
  }
  /* Any tiny absolute dot decoration in the page body */
  main .rounded-full[class*="absolute"]:not(.mc-mobile-menu *),
  body .rounded-full[class*="animate-"]:not(button):not(a):not(.mc-mobile-menu *) {
    display: none !important;
  }
  /* Container that ONLY holds dots (gap+rounded children only) */
  div.flex.items-center.justify-center.gap-2:has(> .rounded-full):not(:has(> :not(.rounded-full))),
  div.flex.gap-2:has(> .rounded-full):not(:has(> :not(.rounded-full))),
  div.flex.gap-1:has(> .rounded-full):not(:has(> :not(.rounded-full))) {
    display: none !important;
  }
}