/* WCAG audit output pages — compact mobile presentation only.
   Desktop and tablet layouts remain governed by the existing shared styles. */
@media screen and (max-width: 767px) {
  html body.wcag-output-post-page {
    overflow-x: clip;
  }

  html body.wcag-output-post-page main#main-content .container,
  html body.wcag-output-post-page main#main-content .w-container,
  html body.wcag-output-post-page .footer .container,
  html body.wcag-output-post-page .footer .w-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }

  /* Hero — keep the complete introduction in a compact editorial stack. */
  html body.wcag-output-post-page .v1-common-hero-section {
    position: relative !important;
    isolation: isolate !important;
    padding-top: 5.75rem !important;
    padding-bottom: 3rem !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(5, 84, 56, 0.08) !important;
    background:
      radial-gradient(circle at 88% 9%, rgba(42, 183, 126, 0.14), transparent 34%),
      linear-gradient(180deg, #fbfcf9 0%, #f2f7f3 100%) !important;
  }

  html body.wcag-output-post-page .v1-common-hero-section::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 8.5rem !important;
    right: -5rem !important;
    width: 12rem !important;
    height: 12rem !important;
    border-radius: 999px !important;
    background: rgba(65, 196, 139, 0.09) !important;
    filter: blur(16px) !important;
    pointer-events: none !important;
  }

  html body.wcag-output-post-page .v1-common-hero-section > .container {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-areas:
      "copy"
      "media" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 1.35rem !important;
  }

  html body.wcag-output-post-page .v1-common-hero-section .common-heading-wrapper.margin-bottom {
    display: flex !important;
    grid-area: copy !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 36rem !important;
    margin: 0 !important;
    text-align: left !important;
  }

  html body.wcag-output-post-page .blog-detail-hero-subheading-div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 0.6rem !important;
    width: 100% !important;
    margin: 0 0 1.05rem !important;
  }

  html body.wcag-output-post-page .blog-label-div {
    min-height: 1.8rem !important;
    padding: 0.38rem 0.72rem !important;
    border: 1px solid rgba(0, 105, 69, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(5, 84, 56, 0.1) !important;
    box-sizing: border-box !important;
  }

  html body.wcag-output-post-page .blog-label-div .small-paragraph {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  html body.wcag-output-post-page .blog-category-div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
  }

  html body.wcag-output-post-page .blog-category-div .paragraph {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  html body.wcag-output-post-page .blog-dot {
    flex: 0 0 0.28rem !important;
    width: 0.28rem !important;
    height: 0.28rem !important;
  }

  html body.wcag-output-post-page .blog-detail-hero-heading-div {
    width: 100% !important;
    margin: 0 !important;
  }

  html body.wcag-output-post-page .blog-detail-hero-heading-div h1 {
    max-width: 11.5ch !important;
    margin: 0 !important;
    font-size: clamp(2.65rem, 12.4vw, 3.05rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;
    text-wrap: balance;
  }

  html body.wcag-output-post-page .blog-detail-hero-heading-div::after {
    content: "" !important;
    display: block !important;
    width: 2.75rem !important;
    height: 0.22rem !important;
    margin-top: 0.9rem !important;
    border-radius: 999px !important;
    background: #0b7a51 !important;
  }

  html body.wcag-output-post-page .blog-detail-hero-paragraph {
    width: 100% !important;
    max-width: 33rem !important;
    margin: 1rem 0 0 !important;
    color: rgba(25, 25, 29, 0.76) !important;
    font-size: 0.95rem !important;
    font-weight: 450 !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }

  html body.wcag-output-post-page .blog-author-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    gap: 0.8rem !important;
    width: 100% !important;
    margin: 1.25rem 0 0 !important;
    padding: 0.9rem !important;
    border: 1px solid rgba(5, 84, 56, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 16px 36px rgba(5, 37, 29, 0.07) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(10px) !important;
  }

  html body.wcag-output-post-page .blog-author-detail-div {
    display: grid !important;
    grid-template-columns: 2.4rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
  }

  html body.wcag-output-post-page .blog-author-image {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(5, 84, 56, 0.08) !important;
  }

  html body.wcag-output-post-page .blog-author-info-div {
    min-width: 0 !important;
  }

  html body.wcag-output-post-page .blog-author-info-div .paragraph {
    color: rgba(25, 25, 29, 0.66) !important;
    font-size: 0.69rem !important;
    line-height: 1.38 !important;
    overflow-wrap: anywhere !important;
  }

  html body.wcag-output-post-page .blog-author-info-div .gray-950-text {
    color: #19191d !important;
    font-size: 0.77rem !important;
    font-weight: 700 !important;
  }

  html body.wcag-output-post-page .blog-social-media-wrapper {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(5, 84, 56, 0.1) !important;
  }

  html body.wcag-output-post-page .blog-social-media-wrapper > .large-paragraph {
    flex: 0 0 auto !important;
    margin: 0 0.15rem 0 0 !important;
    color: rgba(25, 25, 29, 0.58) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  html body.wcag-output-post-page .blog-social-media-div {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
  }

  html body.wcag-output-post-page .blog-social-media-link {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: max-content !important;
    width: max-content !important;
    min-inline-size: 5.25rem !important;
    min-width: 5.25rem !important;
    max-inline-size: none !important;
    max-width: none !important;
    min-height: 2.15rem !important;
    height: 2.15rem !important;
    padding: 0 0.75rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 105, 69, 0.13) !important;
    border-radius: 999px !important;
    box-shadow: 0 7px 16px rgba(5, 84, 56, 0.09) !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
  }

  html body.wcag-output-post-page .blog-social-media-text {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.wcag-output-post-page .blog-main-image-div {
    grid-area: media !important;
    display: block !important;
    width: 100% !important;
    max-width: 36rem !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    box-shadow: 0 24px 52px rgba(5, 37, 29, 0.14) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.wcag-output-post-page .blog-main-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    animation: tdl-wcag-output-float 6.4s ease-in-out infinite !important;
    will-change: transform !important;
  }

  html body.wcag-output-post-page .blog-main-image-div::after {
    display: block !important;
    animation: tdl-wcag-output-sheen 5.6s ease-in-out infinite !important;
  }

  /* Article — denser type rhythm with clear, scannable section boundaries. */
  html body.wcag-output-post-page .blog-detail-section {
    padding-top: 2.6rem !important;
    padding-bottom: 2.75rem !important;
  }

  html body.wcag-output-post-page .blog-detail-wrapper-div,
  html body.wcag-output-post-page .blog-rich-text {
    width: 100% !important;
    max-width: 42rem !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body.wcag-output-post-page .blog-rich-text > h2 {
    margin: 1.8rem 0 0.55rem !important;
    padding-top: 1.15rem !important;
    border-top: 1px solid rgba(37, 34, 42, 0.1);
    font-size: clamp(1.35rem, 6.4vw, 1.65rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance;
  }

  html body.wcag-output-post-page .blog-rich-text > h2:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.wcag-output-post-page .blog-rich-text > p {
    margin: 0.55rem 0 0 !important;
    color: rgba(25, 25, 29, 0.74) !important;
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
  }

  html body.wcag-output-post-page .blog-rich-text > ul,
  html body.wcag-output-post-page .blog-rich-text > ol {
    display: grid !important;
    gap: 0.48rem !important;
    margin: 0.7rem 0 0 !important;
    padding-left: 1.2rem !important;
  }

  html body.wcag-output-post-page .blog-rich-text > ul li,
  html body.wcag-output-post-page .blog-rich-text > ol li {
    margin: 0 !important;
    padding-left: 0.15rem !important;
    color: rgba(25, 25, 29, 0.76) !important;
    font-size: 0.84rem !important;
    line-height: 1.52 !important;
  }

  html body.wcag-output-post-page .blog-rich-text strong {
    color: #19191d !important;
    font-weight: 650 !important;
  }

  /* Closing CTA — retain the full proof, action, phone, expectation, and image. */
  html body.wcag-output-post-page .webdev-template-cta-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section > .container {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-grid > .v1-cta-div,
  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-grid > .v1-cta-div:first-child {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-wrapper,
  html body.wcag-output-post-page .webdev-template-cta-section .common-heading-wrapper,
  html body.wcag-output-post-page .webdev-template-cta-section .common-heading-div {
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .review-main-div {
    margin: 0 0 1.25rem !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .common-rating-wrapper {
    gap: 0.65rem !important;
  }

  html body.wcag-output-post-page .webdev-template-rating-logo {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  html body.wcag-output-post-page .webdev-template-rating-logo img {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .common-rating-text {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-heading-div h2 {
    width: 100% !important;
    max-width: 16ch !important;
    margin: 0 !important;
    font-size: clamp(1.9rem, 9vw, 2.35rem) !important;
    line-height: 1.05 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v3-cta-paragraph {
    width: 100% !important;
    max-width: 32rem !important;
    margin: 0.8rem 0 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 0.6rem !important;
    width: 100% !important;
    margin: 1rem 0 0 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-actions .button {
    width: 100% !important;
    max-width: 22rem !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-phone {
    min-height: 2rem !important;
    font-size: 0.78rem !important;
  }

  html body.wcag-output-post-page .tdl-cta-expectation {
    width: 100% !important;
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-image-div {
    display: block !important;
    width: 100% !important;
    max-width: 32rem !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html body.wcag-output-post-page .webdev-template-cta-section .v1-cta-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Footer — all links remain available in a compact two-column directory. */
  html body.wcag-output-post-page .footer {
    padding-top: 2.5rem !important;
  }

  html body.wcag-output-post-page .newsletter-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  html body.wcag-output-post-page .newsletter-heading {
    font-size: 1.45rem !important;
    line-height: 1.12 !important;
  }

  html body.wcag-output-post-page .newsletter-paragraph {
    margin-top: 0.55rem !important;
    font-size: 0.82rem !important;
    line-height: 1.52 !important;
  }

  html body.wcag-output-post-page .newsletter-form-div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.5rem !important;
  }

  html body.wcag-output-post-page .newsletter-input,
  html body.wcag-output-post-page .newsletter-form-div .contact-button {
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  html body.wcag-output-post-page .newsletter-form-div .contact-button {
    width: auto !important;
    padding-right: 0.85rem !important;
    padding-left: 0.85rem !important;
    font-size: 0.72rem !important;
  }

  html body.wcag-output-post-page .newsletter-form .small-paragraph {
    margin-top: 0.55rem !important;
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
  }

  html body.wcag-output-post-page .footer-line {
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }

  html body.wcag-output-post-page .footer-wrapper {
    gap: 1.5rem !important;
  }

  html body.wcag-output-post-page .footer-logo-div,
  html body.wcag-output-post-page .footer-logo-link {
    width: 8.5rem !important;
  }

  html body.wcag-output-post-page .footer-detail-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.6rem 1rem !important;
    width: 100% !important;
  }

  html body.wcag-output-post-page .footer-detail-div {
    min-width: 0 !important;
  }

  html body.wcag-output-post-page .footer-detail-div:last-child {
    grid-column: 1 / -1 !important;
  }

  html body.wcag-output-post-page .footer-detail-div:last-child .footer-link-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem 1rem !important;
  }

  html body.wcag-output-post-page .footer-detail-div > .white-400-text {
    margin-bottom: 0.7rem !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  html body.wcag-output-post-page .footer-link-wrapper {
    gap: 0.55rem !important;
  }

  html body.wcag-output-post-page .footer-link-wrapper .paragraph {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  html body.wcag-output-post-page .footer-main-div > .text-center {
    margin-top: 1.8rem !important;
    margin-bottom: 0.9rem !important;
  }

  html body.wcag-output-post-page .footer-main-div > .text-center .paragraph {
    font-size: 0.68rem !important;
    line-height: 1.5 !important;
  }

  html body.wcag-output-post-page .tdl-footer-watermark-wrap {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 359px) {
  html body.wcag-output-post-page main#main-content .container,
  html body.wcag-output-post-page main#main-content .w-container,
  html body.wcag-output-post-page .webdev-template-cta-section > .container,
  html body.wcag-output-post-page .footer .container,
  html body.wcag-output-post-page .footer .w-container {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  html body.wcag-output-post-page .blog-detail-hero-heading-div h1 {
    font-size: 2.35rem !important;
  }

  html body.wcag-output-post-page .newsletter-form-div,
  html body.wcag-output-post-page .footer-detail-div:last-child .footer-link-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.wcag-output-post-page .newsletter-form-div .contact-button {
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html body.wcag-output-post-page .blog-main-image,
  html body.wcag-output-post-page .v1-cta-image,
  html body.wcag-output-post-page .blog-main-image-div::after,
  html body.wcag-output-post-page .v1-cta-image-div::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}