#view-services-page .exo-service-card {
          transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
        }
        #view-services-page .exo-service-card:hover {
          border-color: rgba(181, 139, 59, .38);
          background-color: #fff;
          box-shadow: 0 18px 45px rgba(13, 34, 70, .07);
        }
        #view-services-page .exo-service-icon {
          width: 64px;
          height: 64px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: none;
          border-radius: 19px;
          color: #132c50;
          background: linear-gradient(145deg, #fff 12%, #f6edda 100%);
          border: 1px solid rgba(181, 139, 59, .3);
          box-shadow: 0 5px 15px rgba(13, 34, 70, .05);
        }
        #view-services-page .exo-service-icon svg { width: 34px; height: 34px; }
        #view-services-page .exo-service-number {
          font-size: 11px;
          letter-spacing: .09em;
          font-weight: 800;
          color: #a77720;
        }
        @media (max-width: 639px) {
          #view-services-page .exo-service-card { padding: 1.5rem; }
          #view-services-page .exo-service-icon { width: 56px; height: 56px; border-radius: 16px; }
          #view-services-page .exo-service-icon svg { width: 30px; height: 30px; }
        }
        @media (prefers-reduced-motion: reduce) {
          #view-services-page .exo-service-card { transition: none; }
        }
      

/* EXO Performance Phase — layout reservation / CLS protection */
#exo-page-view-mount {
  display: block;
  min-height: calc(100vh - 5rem);
  background: #f8fafc;
  contain: layout style paint;
}
.page-view {
  min-height: calc(100vh - 5rem);
}
/* Header logo sizing: keep the intrinsic ratio but never let the large source image
   expand at mobile/tablet widths. This fixes the oversized EXO logo on local/hosted builds. */
#exo-main-logo img {
  display: block;
  width: auto !important;
  height: 50px !important;
  max-width: 100%;
  aspect-ratio: 1575 / 900;
  object-fit: contain;
}
@media (max-width: 1279px) {
  #exo-main-logo {
    min-width: 0;
    flex: 0 0 auto;
  }
  #exo-main-logo img {
    width: auto !important;
    height: 48px !important;
    max-width: 96px;
  }
}
.exo-footer-v4-logo img {
  /* Keep the footer wordmark compact and proportional on every viewport. */
  width: 180px !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 1575 / 900;
  object-fit: contain;
}

@media (max-width: 640px) {
  .exo-footer-v4-logo img {
    width: 150px !important;
  }
}
@supports (content-visibility: auto) {
  .page-view > section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

#exo-page-view-mount[hidden] { display: none !important; min-height: 0 !important; }

/* =========================================================
   EXO SPACING AUDIT — PROFESSIONAL RHYTHM PHASE
   Scope: vertical section rhythm, large gaps and card padding only.
   No typography, routing, i18n or feature behavior is changed.
   ========================================================= */

/* Home: reduce oversized vertical whitespace while preserving hierarchy. */
#profile,
#testimonials {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

#packages {
  padding-top: 68px !important;
  padding-bottom: 72px !important;
}

#contact {
  padding-top: 64px !important;
  padding-bottom: 68px !important;
}

#tax-tools-home {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

#exo-ai {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.exo-affiliation {
  padding-top: 64px !important;
  padding-bottom: 68px !important;
}

/* Large heading blocks should not leave a full extra card-height below them. */
#testimonials > .max-w-7xl > .text-center,
#packages > .max-w-7xl > .text-center {
  margin-bottom: 36px !important;
}

/* Structure: premium but tighter than the previous 80–90px rhythm. */
#view-structure-page > section:first-child {
  padding-top: 64px !important;
  padding-bottom: 68px !important;
}

#view-structure-page > section:nth-of-type(2) {
  padding-top: 58px !important;
  padding-bottom: 68px !important;
}

/* Calculator: keep focus on the tool instead of large empty top/bottom areas. */
#view-calculator-page > section:first-child {
  padding-top: 62px !important;
  padding-bottom: 66px !important;
}

#view-calculator-page > section:nth-of-type(2) {
  padding-top: 42px !important;
  padding-bottom: 64px !important;
}

/* Standard information pages. */
#view-services-page > section:first-child {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

#view-services-page > section:nth-of-type(2) {
  padding-top: 56px !important;
  padding-bottom: 60px !important;
}

#view-tax-health-page > section:first-child {
  padding-top: 52px !important;
  padding-bottom: 54px !important;
}

#view-tax-health-page > section:nth-of-type(2) {
  padding-top: 42px !important;
  padding-bottom: 54px !important;
}

#view-account-page > section:first-child {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

#view-account-page > section:nth-of-type(2) {
  padding-top: 42px !important;
  padding-bottom: 54px !important;
}

#view-tax-admin-page > section:first-child {
  padding-top: 42px !important;
  padding-bottom: 52px !important;
}

/* Academy / publication hero wrappers carry their padding on the inner container. */
#view-kelas-page > section:first-child > .max-w-7xl,
#view-ebook-page > section:first-child > .max-w-7xl {
  padding-top: 60px !important;
  padding-bottom: 64px !important;
  gap: 34px !important;
}

#view-kelas-page > section:nth-of-type(2),
#view-ebook-page > section:nth-of-type(2) {
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}

/* Avoid oversized separation before the final Academy callout. */
#view-kelas-page > section:nth-of-type(2) > .max-w-7xl > .mt-10,
#view-ebook-page > section:nth-of-type(2) > .max-w-7xl > .mt-10 {
  margin-top: 32px !important;
}

/* Video education: compact the 80px+ hero/library gaps and the collection break. */
.exo-video-hero {
  padding-top: 64px !important;
  padding-bottom: 68px !important;
}

.exo-video-library {
  padding-top: 56px !important;
  padding-bottom: 66px !important;
}

.exo-video-feature-grid {
  gap: clamp(34px, 4.5vw, 60px) !important;
}

.exo-library-heading {
  margin-top: 52px !important;
  margin-bottom: 22px !important;
  padding-top: 24px !important;
  gap: 22px !important;
}

/* Footer should close the page cleanly instead of adding another full section. */
#exo-footer,
.exo-footer-v4 {
  padding-top: 52px !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  #profile,
  #testimonials {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  #packages {
    padding-top: 58px !important;
    padding-bottom: 62px !important;
  }

  #contact,
  #exo-ai,
  .exo-affiliation {
    padding-top: 56px !important;
    padding-bottom: 58px !important;
  }

  #view-kelas-page > section:first-child > .max-w-7xl,
  #view-ebook-page > section:first-child > .max-w-7xl {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
    gap: 30px !important;
  }

  .exo-video-hero {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }

  .exo-video-library {
    padding-top: 50px !important;
    padding-bottom: 58px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  /* Keep the existing hero-specific layout fix, only tighten its outer rhythm. */
  #hero-section {
    padding-top: 38px !important;
    padding-bottom: 44px !important;
  }

  #hero-main-grid {
    row-gap: 26px !important;
  }

  #profile,
  #testimonials {
    padding-top: 46px !important;
    padding-bottom: 48px !important;
  }

  #packages {
    padding-top: 50px !important;
    padding-bottom: 54px !important;
  }

  #tax-tools-home {
    padding-top: 40px !important;
    padding-bottom: 42px !important;
  }

  #contact,
  #exo-ai,
  .exo-affiliation {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }

  #testimonials > .max-w-7xl > .text-center,
  #packages > .max-w-7xl > .text-center {
    margin-bottom: 28px !important;
  }

  /* Secondary page heroes: 48–52px is enough on a 400px viewport. */
  #view-structure-page > section:first-child,
  #view-calculator-page > section:first-child,
  #view-services-page > section:first-child,
  #view-tax-health-page > section:first-child {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }

  #view-account-page > section:first-child {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  #view-structure-page > section:nth-of-type(2),
  #view-calculator-page > section:nth-of-type(2),
  #view-services-page > section:nth-of-type(2),
  #view-tax-health-page > section:nth-of-type(2),
  #view-account-page > section:nth-of-type(2) {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  #view-tax-admin-page > section:first-child {
    padding-top: 36px !important;
    padding-bottom: 44px !important;
  }

  #view-kelas-page > section:first-child > .max-w-7xl,
  #view-ebook-page > section:first-child > .max-w-7xl {
    padding-top: 46px !important;
    padding-bottom: 50px !important;
    gap: 26px !important;
  }

  #view-kelas-page > section:nth-of-type(2),
  #view-ebook-page > section:nth-of-type(2) {
    padding-top: 46px !important;
    padding-bottom: 52px !important;
  }

  /* Training cards had 28–40px padding; keep them premium but less bulky. */
  #view-kelas-page article > .p-7,
  #view-kelas-page article > .sm\:p-8 {
    padding: 22px !important;
  }

  #view-kelas-page > section:nth-of-type(2) > .max-w-7xl > .mt-10,
  #view-ebook-page > section:nth-of-type(2) > .max-w-7xl > .mt-10 {
    margin-top: 26px !important;
  }

  .exo-video-hero {
    padding-top: 46px !important;
    padding-bottom: 50px !important;
  }

  .exo-video-library {
    padding-top: 42px !important;
    padding-bottom: 50px !important;
  }

  .exo-video-feature-grid {
    gap: 28px !important;
  }

  .exo-library-heading {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-top: 20px !important;
    gap: 12px !important;
  }

  #exo-footer,
  .exo-footer-v4 {
    padding-top: 42px !important;
  }
}

/* Very small phones: prevent cards from feeling boxed-in by double padding. */
@media (max-width: 430px) {
  #hero-shell,
  #view-account-page > section > .max-w-6xl,
  #view-tax-health-page > section > .max-w-6xl,
  #view-calculator-page > section > .max-w-6xl,
  #view-services-page > section > .max-w-7xl,
  #view-structure-page > section > .max-w-7xl,
  #view-kelas-page > section > .max-w-7xl,
  #view-ebook-page > section > .max-w-7xl,
  #view-video-page > section > .max-w-7xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #hero-main-grid {
    row-gap: 22px !important;
  }

  #view-account-page #exo-account-guest,
  #view-tax-health-page #tax-health-auth-gate > div,
  #view-calculator-page [id^="calc-panel-"] > .grid > div {
    padding: 20px !important;
  }
}

/* Final spacing details found during audit. */
#packages-billing-toggle {
  margin-top: 28px !important;
}

#exo-ai .ai-layout {
  gap: clamp(40px, 4.5vw, 56px) !important;
}

#exo-footer-v4 {
  padding-top: 52px !important;
}

.exo-footer-v4-main {
  gap: clamp(38px, 4.5vw, 64px) !important;
  padding-bottom: 42px !important;
}

@media (max-width: 767px) {
  #packages-billing-toggle {
    margin-top: 24px !important;
  }

  #exo-ai .ai-layout {
    gap: 26px !important;
  }

  #exo-footer-v4 {
    padding-top: 42px !important;
  }

  .exo-footer-v4-main {
    gap: 28px !important;
    padding-bottom: 30px !important;
  }
}

/* =========================================================
   EXO PRICING — REFERENCE LOCK
   Matches the approved desktop pricing reference while keeping
   the existing mobile horizontal slider and all pricing logic.
   ========================================================= */
@media (min-width: 1280px) {
  #packages-card-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 700px !important;
    gap: 24px !important;
    align-items: start !important;
    padding-top: 30px !important;
    padding-bottom: 0 !important;
  }

  #packages-card-track > .exo-package-card {
    width: auto !important;
    height: 700px !important;
    min-height: 700px !important;
    align-self: start !important;
    padding: 28px !important;
    border-radius: 28px !important;
  }

  /* Featured card floats slightly, exactly like the reference. */
  #packages-card-track > .exo-package-card:nth-child(2) {
    transform: translateY(-6px) !important;
  }

  #packages-card-track > .exo-package-card:nth-child(2):hover {
    transform: translateY(-9px) !important;
  }

  /* Price block: currency on the first row, amount below, period at top-right. */
  #packages-card-track .exo-package-card div.flex.items-baseline.gap-1 {
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #packages-card-track .exo-package-card [id$="-price"] {
    display: block !important;
    max-width: 166px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.05 !important;
  }

  #packages-card-track .exo-package-card [id$="-price"] + [id$="-period"] {
    align-self: flex-start !important;
    flex: none !important;
    padding-top: 4px !important;
    white-space: nowrap !important;
  }

  /* Custom card keeps Flexible + /by inquiry on one baseline. */
  #packages-card-track > .exo-package-card:nth-child(4) div.flex.items-baseline.gap-1 {
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  /* The ornament must not participate in flex flow or push Custom content down. */
  #packages-card-track > .exo-package-card:nth-child(4) > div.absolute {
    position: absolute !important;
    z-index: 0 !important;
    width: 96px !important;
    height: 96px !important;
    top: -30px !important;
    right: -28px !important;
    left: auto !important;
    flex: none !important;
    filter: none !important;
    background: rgba(203, 162, 56, .17) !important;
    border-radius: 9999px !important;
    pointer-events: none !important;
  }

  #packages-card-track > .exo-package-card:nth-child(4) > div:nth-of-type(2) {
    position: relative !important;
    z-index: 1 !important;
  }

  .exo-package-popular-badge {
	min-height: 32px !important;
	padding: 7px 16px !important;
	top: 0 !important;
	right: 24px !important;
	left: auto !important;
	transform: translateY(-50%) !important;
}
}

/* Keep the featured badge legible and floating in the swipe layout too. */
@media (max-width: 1279px) {
  .exo-package-popular-badge {
    top: 0 !important;
    right: 20px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  /* Do not let the Custom ornament consume vertical space on tablet/mobile. */
  #packages-card-track > .exo-package-card:nth-child(4) > div.absolute {
    position: absolute !important;
    z-index: 0 !important;
    top: -28px !important;
    right: -26px !important;
    left: auto !important;
    width: 90px !important;
    height: 90px !important;
    flex: none !important;
    filter: none !important;
    background: rgba(203, 162, 56, .16) !important;
    border-radius: 9999px !important;
    pointer-events: none !important;
  }
}

  /* Do not let the Custom ornament consume vertical space on tablet/mobile. */
  #packages-card-track > .exo-package-card:nth-child(4) > div.absolute {
    position: absolute !important;
    z-index: 0 !important;
    top: -28px !important;
    right: -26px !important;
    left: auto !important;
    width: 90px !important;
    height: 90px !important;
    flex: none !important;
    filter: none !important;
    background: rgba(203, 162, 56, .16) !important;
    border-radius: 9999px !important;
    pointer-events: none !important;
  }
}