/* =========================================================
   Docsliy — Responsive Overrides
   All @media rules live here, separated from style.css so the
   desktop layout in style.css stays untouched. Mobile-first
   fixes for spacing, type scale, widths, images and layout.
   ========================================================= */

@media (max-width: 991.98px) {
  .section { padding: 60px 0; }
  .section-tight { padding: 60px 0; }
  .manifesto-section { padding: 60px 0; }
}

@media (max-width: 991.98px) {
  .util-bar { display: none; }
}
@media (max-width: 768px)  {
  .legal-content section + section {
    margin-top: 24px;
    padding-top: 24px;
}
  .start-form-wrap {
        max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  
  .navbar-premium { transition: transform 0.32s ease; }
  .navbar-premium.nav-hidden { transform: translateY(-100%); }
}

/* The desktop nav row needs ~1114px for brand + links + CTA, so it stops
   fitting below roughly 1180px and the CTA button was overflowing the
   viewport between 992px and 1175px (iPad landscape, 1152px laptops).
   Switch to the mobile menu while there is still room. */
@media (max-width: 1199.98px) {
  .nav-links { display: none; }
  .navbar-toggler-premium { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 991.98px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-section { padding-top: 130px; }
}

@media (max-width: 1201px) {
  .float-a { left: -4%; top: -8%; }
  .float-b { right: 0%; }
  .float-c { right: 5%; top: 4%; }
  .mock-side {
      right: 0%;
      bottom: 0%;
  }
}

@media (max-width: 575.98px) {
  .hero-float {
    position: relative;
    margin: 12px auto;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    max-width: 280px;
  }
}

@media (max-width: 991.98px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .impact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .flip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .pain-grid { grid-template-columns: 1fr; }
  .flip-grid { grid-template-columns: 1fr; }
  .flip-card { height: 300px; }
  .flip-face { padding: 26px; }
}

/* ---- Problem -> Solution card grid (.pf-grid, used on several pages) ---- */
@media (max-width: 991.98px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  /* grids with exactly 3 cards would otherwise leave one lonely card
     dangling in a half-empty row at this width */
  .pf-grid:has(> .pf-card:nth-child(3):last-child) { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .pf-grid { grid-template-columns: 1fr; gap: 20px; }
  .pf-card { padding: 26px 24px 28px; }
}

/* ---- Feature spotlight cards (.sp-list) ---- */
@media (max-width: 991.98px) {
  .sp-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .sp-list { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Trust bar (.trust-bar-grid) ---- */
@media (max-width: 767.98px) {
  .trust-bar-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .trust-bar-item:nth-child(3n+1) { border-left: none; }
}
@media (max-width: 480px) {
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-item:nth-child(odd) { border-left: none; }
  .trust-bar-item:nth-child(3n+1) { border-left: 1px solid var(--line-medium); }
}

@media (max-width: 575.98px) {
  .ps-row-solution { padding: 26px 24px; }
  .ps-row-problem p { font-size: 0.98rem; }
}

@media (max-width: 991.98px) {
  .benefits-split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .rounded-illustration { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 575.98px) {
  .benefit-card { padding: 18px 20px; gap: 14px; }
  .benefit-num { width: 36px; height: 36px; font-size: 0.85rem; }
}

@media (max-width: 991.98px) {
  .advantage-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 575.98px) {
  .advantage-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 991.98px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card, .bento-card.span-lg, .bento-card.span-sm, .bento-card.span-full { grid-column: span 2; grid-row: auto; }

  .sp-row {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0;
    text-align: left;
  }
  .sp-row:nth-child(even) .sp-text,
  .sp-row:nth-child(even) .sp-visual {
    order: initial;
  }
  .sp-text p { max-width: none; }
  .sp-more { padding: 28px; }

  .deck-wrap { padding: 60px 30px 0 50px; max-width: 100%; }
  .deck { height: 560px; }
  .deck-card { padding: 28px; }
  .deck-card[data-stack="1"] { transform: translate(-18px, -16px) rotate(-3deg) scale(0.98); }
  .deck-card[data-stack="2"] { transform: translate(-34px, -30px) rotate(-6deg) scale(0.96); }
  .deck-card[data-stack="3"] { transform: translate(-48px, -42px) rotate(-8deg) scale(0.94); }
  .deck-card[data-stack="4"] { transform: translate(-60px, -52px) rotate(-10deg) scale(0.92); }
  .deck-card-detail p { max-width: none; }
  .deck-visual { max-width: none; }
}

@media (max-width: 575.98px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card, .bento-card.span-lg, .bento-card.span-sm, .bento-card.span-full { grid-column: span 1; grid-row: auto; }

  .sp-visual { padding: 30px; min-height: 200px; }
  .sp-visual-inner { max-width: 230px; margin: 0 auto; transform: scale(1); }

  .deck-wrap { padding: 44px 16px 0 36px; }
  .deck { height: 600px; }
  .deck-card { padding: 22px; border-radius: var(--radius-xl); }
  .deck-card[data-stack="1"] { transform: translate(-12px, -12px) rotate(-2deg) scale(0.98); }
  .deck-card[data-stack="2"] { transform: translate(-22px, -22px) rotate(-4deg) scale(0.96); }
  .deck-card[data-stack="3"] { transform: translate(-30px, -30px) rotate(-6deg) scale(0.94); }
  .deck-card[data-stack="4"] { transform: translate(-38px, -38px) rotate(-8deg) scale(0.92); }
}

@media (max-width: 575.98px) {
  .extensible-grid { grid-template-columns: repeat(1, 1fr) !important; }
}

@media (max-width: 991.98px) {
  .esign-tier-grid { grid-template-columns: 1fr; }
  .extensible-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .timeline-line { display: none; }
  .timeline-steps { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 767.98px) {
  .screens-stack { min-height: 460px; }
  .mock-main { position: relative; max-width: 100%; top: 0; }
  .mock-side { display: none; }
      .float-a {
        left: 6%;
        top: 2%;
    }
}

@media (max-width: 1200px) {
  .mock-badge-live { left: 0%; }
  .mock-badge-trend { left: 0%; }
}

@media (max-width: 767.98px) {
  .mock-badge { display: none; }
}

@media (max-width: 991.98px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .trust-split { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .compare-table th, .compare-table td { padding: 15px 18px; font-size: 0.86rem; }
  .compare-scroll-hint { display: flex; }
}

@media (max-width: 991.98px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-video-card { grid-column: span 1; grid-template-columns: 1fr; }
  .testi-video-thumb { width: 100%; min-height: 0; aspect-ratio: 16 / 9; max-height: 340px; }
}

@media (max-width: 991.98px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; margin: 0 auto; }
  .price-featured { transform: none; }
  .price-featured:hover { transform: translateY(-6px); }
}

@media (max-width: 767.98px) {
  .pc-cell { padding: 14px 16px; font-size: 0.82rem; }
  .pc-head .pc-cell { padding: 22px 16px 18px; }
}

@media (max-width: 767.98px) {
  .workflow-flow { flex-direction: column; }
  .flow-arrow-row { flex: 0 0 auto; height: 32px; }
  .flow-arrow { width: 2px; height: 100%; }
  .flow-arrow span { right: 50%; top: auto; bottom: 2px; transform: translate(50%, 0) rotate(135deg); }
}

@media (max-width: 767.98px) {
  .compare-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .ind-studio-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ind-visual-col {
    order: -1;
  }
  .ind-visual-card-studio {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .industries-section { padding: 60px 0; }
  .ind-metrics-row {
    grid-template-columns: 1fr;
  }
  .float-top-right, .float-bottom-left {
    position: static;
    margin-top: 0.75rem;
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .subpage-hero { padding-top: 156px; }
  .advantage-section {
      padding: 60px 0;
  }
  .advantage-section {
      padding-bottom: 0px;
  }
}

@media (max-width: 767.98px) {
  .usecase-grid { grid-template-columns: 1fr; }
  .cta-strip { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 991.98px) {
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .industry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .standards-panel { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .nav-industry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-methods-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 30px 24px; }
}

@media (max-width: 991.98px) {
  .start-split { grid-template-columns: 1fr; min-height: auto; }
  .start-marketing-col { padding: 48px 32px; order: 2; }
  .start-form-col { padding: 48px 24px; order: 1; }
}

@media (max-width: 767.98px) {
  
  .endpoint-row { grid-template-columns: 60px 1fr; }
  .endpoint-row .endpoint-desc { grid-column: 1 / -1; }
  .api-steps { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .article-row-title { font-size: 0.86rem; }
}

@media (max-width: 991.98px) {
  .lg-hero { padding-top: 156px; }
}

@media (max-width: 575.98px) {
  .lg-type-row { flex-direction: column; gap: 14px; }
}

@media (max-width: 991.98px) {
  .lg-layout { grid-template-columns: 1fr; gap: 40px; }
  .lg-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .lg-aside-card { flex: 1 1 260px; }
}

@media (max-width: 575.98px) {
  .lg-law-card { flex-direction: column; }
  .esign-tier-grid, .esign-tier-grid.cols-2 { grid-template-columns: 1fr; max-width: none; }
}

@media (max-width: 991.98px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
}

/* ================= ADDITIONAL SMALL-SCREEN SAFETY NET ================= */

/* Mobile menu: keep it scrollable instead of overflowing short/landscape viewports */
@media (max-width: 991.98px) {
  .mobile-menu.show {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .usecase-list li {
    flex-direction: column;
  }
}

/* Tighter container gutters so content doesn't feel cramped on narrow phones */
@media (max-width: 575.98px) {
  .legal-content section + section {
      margin-top: 24px;
      padding-top: 24px;
  }
  .cta-strip {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .lg-panel .lg-basics {
    flex-direction: column;
  }
  .lg-simple-types {
    padding-left: 0px !important;
  }
  .pain-card {
    padding: 20px;
}
  .container-xl-custom {
    padding-left: 18px;
    padding-right: 18px;
  }
      .usecase-list li {
        flex-direction: row;
    }
  .footer-top {
      gap: 20px;
      padding-bottom: 40px;
  }
  .contact-method-card {
      padding: 20px;
  }
  .section-head {
      margin-bottom: 30px;
  }
      .pricing-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .ind-visual-col {
      flex-direction: column;
    }
    .footer-premium {
      padding: 45px 0 24px;
  }
}

@media (max-width: 380px) {
  .container-xl-custom {
    padding-left: 14px;
    padding-right: 14px;
  }
  .trust-card {
      padding: 24px;
  }
  
}

/* Security stack rows: fixed label/use widths are too wide for very small phones */
@media (max-width: 380px) {
  .stack-row { flex-wrap: wrap; row-gap: 6px; }
  .stack-name { width: auto; }
  .stack-use { width: auto; margin-left: auto; }
  .stack-bar { flex-basis: 100%; order: 3; }
  
}

/* Prevent any accidental horizontal scroll on very small phones */
@media (max-width: 380px) {
  .faq-question {
    padding: 16px 16px;
  }
  html, body { max-width: 100%; overflow-x: hidden; }
  .navbar-premium .nav-inner {
      padding: 10px 10px;
  }
  .advantage-card {
      padding: 20px;
  }
  .brand-logo-img {
      max-width: 90px;
      object-fit: contain;
  }
  .final-cta {
      padding: 24px 24px;
  }
    .extensible-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .benefit-card {
        flex-direction: column;
    }
}


/* ---- Identity verification section ---- */
@media (max-width: 991.98px) {
  .verify-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
  .verify-float-a { top: -16px; right: 0; }
  .verify-float-b { bottom: -18px; left: 0; }
}
@media (max-width: 575.98px) {
  .verify-card { padding: 18px; }
  .verify-step { gap: 14px; }
  .verify-step-num { width: 34px; height: 34px; border-radius: 11px; font-size: 0.75rem; }
  /* The floating chips overlap the card badly on very small screens */
  .verify-float-a, .verify-float-b { display: none; }
  .verify-card-foot { gap: 12px; }
}

/* ---- Country switcher ---- */
@media (max-width: 575.98px) {
  .mobile-ctry-grid { grid-template-columns: 1fr; }
}

/* ---- Restructured homepage: proof band + merged sections ---- */
@media (max-width: 991.98px) {
  .proof-band { padding: 48px 0 52px; }
  .proof-band .marquee-mask { margin-bottom: 40px; }
  .proof-band .impact-grid { padding-top: 38px; }
  .esign-tiers-wrap { margin-top: 46px; }
}
@media (max-width: 575.98px) {
  .proof-band .marquee-logo { font-size: 0.95rem; }
  .trust-bar-inline { margin-bottom: 36px; padding-bottom: 30px; }
  .esign-tiers-title { font-size: 1.1rem; }
}


/* ---- India landing page ---- */
@media (max-width: 1199.98px) {
  /* The 4-step rail needs the arrows dropped before the steps wrap */
  .in-rail { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .in-rail-arrow { display: none; }
}
@media (max-width: 991.98px) {
  .in-hero { padding: 148px 0 60px; }
  .in-split { grid-template-columns: 1fr; gap: 44px; }
  .in-pain-grid { grid-template-columns: 1fr; }
  .in-stamp-grid { grid-template-columns: 1fr; }
  .in-seg-grid { grid-template-columns: repeat(2, 1fr); }
  .in-float-a { bottom: -18px; right: 0; }
}
@media (max-width: 767.98px) {
  .in-types-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .in-hero { padding: 128px 0 60px; }
  .in-rail { grid-template-columns: 1fr; padding: 22px 18px; }
  .in-rail-step { padding: 4px 0; }
  .in-seg-grid { grid-template-columns: 1fr; }
  .in-stamp-states, .in-stamp-receipt { padding: 22px; }
  .in-type-card { padding: 26px; }
  .in-otp-card { padding: 22px; }
  .in-otp-boxes { gap: 6px; }
  /* Overlaps the OTP card on narrow screens */
  .in-float-a { display: none; }
}


/* The horizontal slide-in reveals push content past the viewport edge on
   narrower screens (they sit at translateX(±44px) until they animate in),
   which shows up as a horizontal scrollbar and clips the right-hand column
   on first paint. Two-column splits still run up to ~1200px, and their right
   column already sits on the container edge there, so the sideways entrance
   overflows well before the layout stacks. Slide vertically instead across
   the whole range below the desktop grid. */
@media (max-width: 1199.98px) {
  .reveal-left,
  .reveal-right { transform: translateY(38px); }
}


/* ---- India: modules + dashboard ---- */
@media (max-width: 991.98px) {
  .in-mod-grid { grid-template-columns: repeat(2, 1fr); }
  /* flex-wrap must be reset too: a wrapping *column* flex container spills
     its items into additional columns to the right, which is what pushed
     this card's text off the side of the page. */
  .in-mod-card.is-featured {
    grid-column: span 2;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 28px;
  }
  .in-mod-card.is-featured h3 { font-size: 1.2rem; }
  /* The two-column flex-basis values on the featured card are wider than a
     phone viewport once it stacks, which pushes the page sideways. */
  .in-mod-card.is-featured p,
  .in-mod-card.is-featured .in-mod-points { flex: 1 1 auto; max-width: none; min-width: 0; }
}
@media (max-width: 575.98px) {
  .in-mod-grid { grid-template-columns: 1fr; }
  .in-mod-card.is-featured { grid-column: span 1; }
  .in-mod-card { padding: 24px; }
  .in-dash-kpis { grid-template-columns: 1fr; }
  .in-dash-body { padding: 16px; }
  .in-dash-row { flex-wrap: wrap; gap: 8px; }
}


/* ---- Repositioned homepage sections ---- */
@media (max-width: 991.98px) {
  .hero-picker { max-width: none; margin-left: 0; padding: 26px; }
  .hero-picker::after { inset: 10px -10px -10px 10px; }
  .problem-section { padding: 72px 0; }
  .problem-title { margin-bottom: 42px; }
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 575.98px) {
  .how-steps { grid-template-columns: 1fr; }
  .regime-card { padding: 20px; }
  .hero-picker { padding: 22px; }
}


/* ---- Redesigned problem / capabilities / pipeline ---- */
@media (max-width: 991.98px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-visual { min-height: 0; }
  /* Pipeline turns vertical - connector runs down the left instead of across */
  .pipe { grid-template-columns: 1fr; gap: 0; }
  .pipe-step { padding: 0 0 34px 46px; }
  .pipe-step::before {
    top: 30px; bottom: 0; left: 13px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--pipe-accent), var(--line-medium));
  }
  .pipe-step.is-final { padding-bottom: 0; }
  .problem-head { margin-bottom: 42px; }
}
@media (max-width: 575.98px) {
  .cap-card { padding: 24px; }
}

/* ---- Hero 3D stack ---- */
@media (max-width: 991.98px) {
  /* Straighten the perspective when the hero stacks - a strong Y-rotation
     reads as broken rather than dimensional at narrow widths. */
  .hero-3d { min-height: 400px; }
  .hero-3d-stage { transform: rotateX(10deg) rotateY(-14deg); width: 290px; height: 360px; }
  .hero-3d-stage { animation: none; }
}
@media (max-width: 575.98px) {
  .hero-3d { min-height: 340px; }
  .hero-3d-stage { transform: rotateX(8deg) rotateY(-10deg) scale(0.86); }
}

/* ---- Legality guide ---- */
@media (max-width: 991.98px) {
  .lgi-hero { padding-top: 132px; }
  /* Stack the hero; a 300px-wide deck rotated in 3D overflows a narrow column. */
  .lgi-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .lg3d { min-height: 400px; }
  .lg3d-stage { transform: rotateX(4deg) rotateY(-12deg) rotateZ(-1deg); animation: none; }
  .lgi-cards { grid-template-columns: repeat(2, 1fr); }
  .lgi-legend { grid-template-columns: 1fr; gap: 14px; }
  .lgi-stats { gap: 30px; }
  .lgc-hero { padding: 124px 0 52px; }
  /* Flag above the copy rather than beside it, so the title keeps full width. */
  .lgc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .lgc-hero-flag { order: -1; width: 116px; transform: none; }
  .lgc-answer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 46px; }
  .lgc-split { grid-template-columns: 1fr; gap: 20px; }
  .lgc-split-lower { gap: 30px; }
}
@media (max-width: 575.98px) {
  .lgi-cards { grid-template-columns: 1fr; }
  .lg3d { min-height: 340px; }
  .lg3d-stage { transform: rotateX(4deg) rotateY(-10deg) scale(0.84); }
  .lgi-stat strong { font-size: 1.6rem; }
  .lgc-supports, .lgc-law, .lgc-panel { padding: 22px; }
  .lgc-callout { padding: 18px 20px; }
  .lgc-cta { flex-direction: column; }
  .lgc-cta > a { justify-content: center; }
}

/* ---- Why Docsliy ---- */
@media (max-width: 1199.98px) {
  /* Four across gets too narrow before the 992 breakpoint. */
  .why-limits-list { grid-template-columns: 1fr 1fr; gap: 24px 26px; }
  /* Two columns, so cards 1 and 3 now start a row - they take the same
     no-rule treatment the first card gets on the wide grid. */
  .why-limit:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 991.98px) {
  .why-hero { padding-top: 132px; }
  .why-hero-stats { gap: 28px; }
  /* Stack the hero and straighten the stack — a strong isometric tilt reads as
     broken rather than dimensional once the column narrows. */
  .why-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .why3d { min-height: 400px; }
  .why3d-stage { transform: rotateX(16deg) rotateZ(-18deg) scale(0.9); animation: none; }
  .why-sol-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-diff-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-order-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-vs-split { grid-template-columns: 1fr; gap: 16px; }
  .why-proof-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-limits-list { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}
@media (max-width: 575.98px) {
  .why-hero-stats { gap: 22px; }
  .why3d { min-height: 330px; }
  .why3d-stage { transform: rotateX(14deg) rotateZ(-15deg) scale(0.74); }
  .why-hero-stat { max-width: none; }
  .why-hero-stat strong { font-size: 1.45rem; }
  .why-sol-card, .why-vs-col, .why-diff-card, .why-proof-card { padding: 24px 22px; }
  .why-limits-list { grid-template-columns: 1fr; }
  /* Single column: every card shares one left edge, so the rules read as a
     consistent vertical rhythm down the stack rather than stray lines.
     Put them back on the cards the two-column rule above cleared. */
  .why-limit:nth-child(odd) { padding-left: 18px; border-left: 2px solid var(--line-strong); }
  .why-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .why-hero .hero-actions > a { justify-content: center; }
}

/* ---- DIY Signature ---- */
@media (max-width: 1199.98px) {
  .diy-country-grid { grid-template-columns: repeat(2, 1fr); }
  .diy-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .diy-usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .diy-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .diy-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .diy-hero { padding-top: 132px; }
  .diy-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .diy3d { min-height: 430px; }
  .diy3d-stage { transform: rotateX(6deg) rotateY(-8deg) scale(0.94); animation: none; }
  /* Float chips sit outside the card; pull them in so they can't push the page */
  .diy3d-float.f1 { right: -18px; }
  .diy3d-float.f2 { left: -14px; }
  .diy-notice { padding: 28px 30px; }
  /* Restated because the base .section rule matches on equal specificity and
     would otherwise flatten these back to 60/60. */
}
@media (max-width: 767.98px) {
  .diy-explorer { padding: 26px 24px 28px; }
  .diy-explorer-controls { grid-template-columns: 1fr; gap: 16px; }
  .diy-result-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 575.98px) {
  .diy-country-grid { grid-template-columns: 1fr; }
  .diy-cat-grid { grid-template-columns: 1fr; }
  .diy-usecase-grid { grid-template-columns: 1fr; }
  .diy-benefit-grid { grid-template-columns: 1fr; }
  .diy-steps { grid-template-columns: 1fr; }
  .diy3d { min-height: 380px; }
  .diy3d-stage { transform: rotateX(5deg) rotateY(-6deg) scale(0.8); }
  .diy3d-float { display: none; }
  .diy-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .diy-hero .hero-actions > a { justify-content: center; }
  .diy-country-card, .diy-cat-card, .diy-benefit, .diy-usecase, .diy-step { padding: 24px 22px; }
  .diy-notice { flex-direction: column; gap: 16px; padding: 26px 24px; }
  .diy-search { padding-right: 92px; }
}

/* ---- Country band ---- */
@media (max-width: 1199.98px) {
  .ctry-band-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .ctry-band-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 575.98px) {
  .ctry-band-grid { grid-template-columns: 1fr; }
}

/* ---- Aadhaar eSign ---- */
@media (max-width: 991.98px) {
  .aad-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .aad3d { min-height: 430px; }
  .aad3d-stage { transform: rotateX(5deg) rotateY(-7deg) scale(0.94); animation: none; }
  .aad3d-float.f1 { right: -16px; }
  .aad3d-float.f2 { left: -12px; }
  .aad-type-grid { grid-template-columns: 1fr; gap: 16px; }
  .aad-excl { grid-template-columns: 1fr; gap: 28px; padding: 34px 32px; }
}
@media (max-width: 575.98px) {
  .aad3d { min-height: 380px; }
  .aad3d-stage { transform: rotateX(4deg) rotateY(-5deg) scale(0.78); }
  .aad3d-float { display: none; }
  .aad-type-card { padding: 26px 24px; }
  .aad-excl { padding: 26px 22px; }
  .aad-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .aad-hero .hero-actions > a { justify-content: center; }
}

/* ---- Proposals & sales rooms ---- */
@media (max-width: 991.98px) {
  .prop-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .prop3d { min-height: 430px; }
  .prop3d-stage { transform: rotateX(5deg) rotateY(-7deg) scale(0.94); animation: none; }
  .prop3d-float.f1 { right: -16px; }
  .prop3d-float.f2 { left: -12px; }
}
@media (max-width: 575.98px) {
  .prop3d { min-height: 380px; }
  .prop3d-stage { transform: rotateX(4deg) rotateY(-5deg) scale(0.78); }
  .prop3d-float { display: none; }
  .prop-feature { padding: 20px 20px; gap: 13px; }
  .prop-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .prop-hero .hero-actions > a { justify-content: center; }
}

/* ---- DSA ---- */
@media (max-width: 1199.98px) {
  .dsa-flow { grid-template-columns: 1fr; }
  .dsa-keys { grid-template-columns: 1fr; }
  /* Below this the copy column is ~13px too narrow for the three stats in a
     row, which broke them 2+1. Equal columns let the labels wrap inside their
     own cell instead, so the row still reads as three. */
  .dsa-hero .subpage-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  /* No room beside the 780px copy column once the panel narrows. */
  .dsa-status-panel { grid-template-columns: 1fr; }
  .dsa-status-3d { display: none; }
}
@media (max-width: 991.98px) {
  .dsa-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Flatten the depth: at this width the planes overlap more than they layer,
     and the float animation fights the shorter viewport. */
  .dsa3d { min-height: 470px; }
  .dsa3d-scene { transform: rotateX(-8deg) scale(0.88); }
  .dsa-next-grid,
  .dsa-link-grid { grid-template-columns: 1fr; gap: 16px; }
  .dsa-status-panel { padding: 34px 30px 30px; }
  .dsa-warn { padding: 30px 28px 26px; gap: 20px; }
}
@media (max-width: 767.98px) {
  /* Meta drops under the description rather than squeezing it. */
  .dsa-keyrow { grid-template-columns: 46px 1fr; gap: 14px; }
  .dsa-keyrow-sym { width: 46px; height: 46px; font-size: 1.3rem; }
  .dsa-keyrows::before { left: 23px; }
  .dsa-keyrow-meta { grid-column: 2; justify-self: start; margin-top: 10px; }
  .dsa-status-facts { gap: 22px; }
  /* The mark stacks above the copy rather than squeezing the text column. */
  .dsa-warn { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .dsa3d { min-height: 400px; }
  .dsa3d-scene { transform: rotateX(-8deg) scale(0.72); }
  .dsa-phase, .dsa-next, .dsa-link { padding: 22px 20px 20px; }
  .dsa-status-panel { padding: 28px 22px 24px; }
  .dsa-warn { padding: 24px 20px 22px; }
}

/* ---- e-Stamping ---- */
@media (max-width: 1199.98px) {
  .est-cert-split { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 991.98px) {
  .est-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .est3d { min-height: 450px; }
  .est3d-scene { transform: rotateX(52deg) rotateZ(-16deg) scale(0.9); animation: none; }
  .est-hero .subpage-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  /* The centre "vs" token stops being a divider once the columns stack. */
  .est-vs { grid-template-columns: 1fr; gap: 16px; }
  .est-vs-div { justify-self: center; }
  .est-link-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 575.98px) {
  .est3d { min-height: 380px; }
  .est3d-scene { transform: rotateX(50deg) rotateZ(-14deg) scale(0.72); }
  .est-vs-col { padding: 24px 22px 22px; }
  .est-cert { padding: 20px 18px 18px; }
  /* Callouts have nowhere to sit beside the value on a narrow card. */
  .est-cert-row.is-key { padding-bottom: 12px; }
  .est-cert-call { display: none; }
}
/* ---- The gap and its close ---- */
@media (max-width: 1199.98px) {
  .seam-legend, .seam-row { grid-template-columns: 1fr 40px 1fr; }
  .seam-side.is-close { padding: 20px; }
}
@media (max-width: 991.98px) {
  /* Stacked, the joint is no longer a seam between two columns, so it
     becomes a connector from the problem down to its answer. */
  .seam-legend { display: none; }
  .seam-row { grid-template-columns: 1fr; }
  .seam-row { padding: 24px 0; }
  .seam-joint { height: 36px; }
  .seam-line { left: 50%; }
  .seam-node,
  .seam-row.is-visible .seam-node { transform: scale(1) rotate(90deg); }
  .seam-side.is-close { transform: translateY(18px); }
  .seam-row.is-visible .seam-side.is-close { transform: translateY(0); }
  .seam-foot { margin-top: 26px; }
}
@media (max-width: 575.98px) {
  .seam-side.is-close { padding: 18px; }
  .seam-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---- Three things nobody else does ---- */
@media (max-width: 991.98px) {
  .tri-grid { grid-template-columns: 1fr; gap: 18px; }
  /* One per row, so the stage does not need to be as tall. */
  .tri-stage { height: 150px; }
}

/* ---- e-Stamping: the four steps ---- */
@media (max-width: 991.98px) {
  .est-flow-steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  /* Two rows of two, so a single straight rail no longer describes the path. */
  .est-flow-rail { display: none; }
}
@media (max-width: 575.98px) {
  .est-flow-steps { grid-template-columns: 1fr; row-gap: 26px; }
  .est-flow-card { padding: 20px 18px 18px; }
}

/* The testimonial carousel dots render at 8x8px, far below a usable tap
   target on a phone (the audit measured exactly that). Widen the row a
   little and extend each dot's hit area with a pseudo-element, so the
   control becomes ~24x44px while the dot still looks identical. The
   +16px matches the row gap, so neighbouring hit areas meet without
   overlapping. Desktop pointer sizing is deliberately left untouched. */
@media (max-width: 575.98px) {
  .testi-dots { gap: 16px; }
  .testi-dot { position: relative; }
  .testi-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 16px);
    height: 44px;
  }
}