/* ============================================================
   DIGITUM FINAL QA REFINEMENTS
   Applied after page styles. Focus: clarity, responsiveness,
   balanced spacing and removal of decorative noise.
   ============================================================ */


/* Hero visuals use their content height. Decorative float cards are removed
   because they duplicated the message and obscured the underlying visual. */
.visual-float,
.map-float,
.account-float,
.search-float,
.browser-float,
.ops-float,
.identity-float { display: none !important; }

.system-visual,
.service-map,
.account-visual,
.search-visual,
.browser-visual,
.ops-visual,
.identity-visual {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}

.visual-frame,
.service-map-frame,
.account-frame,
.search-frame,
.browser-frame,
.ops-frame,
.identity-frame {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

/* Shared controls */
.btn { white-space: nowrap; }
.btn svg { flex: 0 0 auto; }
.footer { overflow: hidden; }
.footer-light { pointer-events: none; }

/* Keep deliberate section rhythm without oversized empty gaps. */
main > .section + .section,
main > .section-tight + .section,
main > .section + .section-tight { scroll-margin-top: 90px; }

/* Homepage: retain original message, compact the owner view on phones. */
.home-page .hero-copy h1 { text-wrap: balance; }
.home-page .hero-copy .btn-row { align-items: stretch; }

/* Contact: direct and concise. */
.methods-head h2 { max-width: 440px; }

@media (max-width: 900px) {
  /* Interactive system tabs must remain inside the viewport. */
  .system-tabs {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 9px;
  }
  .system-tab { min-width: 0; width: 100%; }
  .system-tab:nth-child(5) { grid-column: 1 / -1; }

  /* Footer keeps a clean two-column tablet layout before stacking. */
  .footer-surface { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-brand-block,
  .footer-contact-block { grid-column: 1 / -1; }
  .footer-contact-block { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .footer-contact-block > .footer-heading { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Hero actions should never wrap into awkward multi-line pills. */
  .hero .btn-row,
  .services-hero .btn-row,
  .ads-hero .btn-row,
  .seo-hero .btn-row,
  .website-hero .btn-row,
  .automation-hero .btn-row,
  .contact-hero .btn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .hero .btn-row .btn,
  .services-hero .btn-row .btn,
  .ads-hero .btn-row .btn,
  .seo-hero .btn-row .btn,
  .website-hero .btn-row .btn,
  .automation-hero .btn-row .btn,
  .contact-hero .btn-row .btn {
    width: 100%;
    min-height: 52px;
    padding-inline: 18px;
  }

  /* Hero widgets remain compact and use their natural content height. */
  .visual-frame,
  .service-map-frame,
  .account-frame,
  .search-frame,
  .browser-frame,
  .ops-frame,
  .identity-frame {
    padding: 15px !important;
    border-radius: 22px !important;
  }

  /* Compact proof/fact strips into balanced 2x2 layouts. */
  .credential-grid,
  .company-facts,
  .portfolio-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .credential,
  .company-fact,
  .portfolio-fact {
    min-height: 112px !important;
    padding: 18px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .credential:nth-child(odd),
  .company-fact:nth-child(odd),
  .portfolio-fact:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .credential:nth-last-child(-n+2),
  .company-fact:nth-last-child(-n+2),
  .portfolio-fact:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .credential strong,
  .company-fact strong,
  .portfolio-fact strong { font-size: 1.08rem !important; }
  .credential span,
  .company-fact span,
  .portfolio-fact span { font-size: .7rem !important; }

  /* Calculator result metrics stay scannable without becoming a long list. */
  .result-grid,
  .result-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .result-card,
  .breakdown-card { min-width: 0; }
  .result-card span,
  .breakdown-card span { overflow-wrap: anywhere; }

  /* Services overview: retain all information, remove nested-card noise. */
  .service-card {
    padding: 25px 22px !important;
    border-radius: 21px !important;
  }
  .service-card h3 {
    margin: 34px 0 12px !important;
    font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
  }
  .service-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 22px !important;
    border-top: 1px solid rgba(255,255,255,.075);
  }
  .service-detail {
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .service-detail:last-child { border-bottom: 0 !important; }
  .service-card-link { margin-top: 20px !important; }

  /* Homepage owner pulse: concise information panel, not a long form. */
  .home-page .owner-pulse {
    min-height: auto !important;
    padding: 17px !important;
  }
  .home-page .pulse-main {
    grid-template-columns: 132px 1fr !important;
    align-items: stretch;
    gap: 10px !important;
  }
  .home-page .pulse-score { min-height: 190px !important; }
  .home-page .score-ring { width: 112px !important; height: 112px !important; }
  .home-page .score-ring strong { font-size: 1.85rem !important; }
  .home-page .score-ring small { font-size: .54rem !important; }
  .home-page .pulse-signals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .home-page .signal-card {
    min-height: 56px !important;
    padding: 9px 10px !important;
  }
  .home-page .signal-card small { font-size: .52rem !important; }
  .home-page .signal-card strong { font-size: .72rem !important; }
  .home-page .signal-value { font-size: 1rem !important; }
  .home-page .pulse-queue {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .home-page .queue-card {
    min-height: 74px !important;
    padding: 11px !important;
  }
  .home-page .queue-card:nth-child(3) { grid-column: 1 / -1; }
  .home-page .queue-card strong { margin-top: 10px !important; font-size: .75rem !important; }

  /* Portfolio project proof is concise before the gallery begins. */
  .portfolio-stack { min-height: 370px !important; }

  /* Footer stays readable and compact on phones. */
  .footer { padding-top: 34px !important; }
  .footer-surface {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 28px 21px !important;
  }
  .footer-brand-block,
  .footer-contact-block { grid-column: auto; }
  .footer-contact-block { grid-template-columns: 1fr !important; }
  .footer-contact-block > .footer-heading { grid-column: auto; }
}

@media (max-width: 430px) {
  .home-page .pulse-main { grid-template-columns: 1fr !important; }
  .home-page .pulse-score { min-height: 165px !important; }
  .home-page .pulse-signals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-page .signal-card:nth-child(3) { grid-column: 1 / -1; }
  .home-page .hero-copy h1 { font-size: clamp(2.65rem, 13vw, 3.65rem) !important; }
}

/* Joined CTA corner details. Positions sit inside the rounded edge so the
   horizontal and vertical strokes meet cleanly on every page. */
.cta-box::after,
.close-box::after,
.work-close-box::after,
.portfolio-close-box::after,
.final-cta-box::after {
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(var(--lime), var(--lime)) 28px 25px / 58px 1px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 28px 25px / 1px 34px no-repeat,
    linear-gradient(var(--lime), var(--lime)) calc(100% - 86px) calc(100% - 25px) / 58px 1px no-repeat,
    linear-gradient(var(--lime), var(--lime)) calc(100% - 28px) calc(100% - 59px) / 1px 34px no-repeat !important;
}