/* TVL — mobile-only styles. All rules scoped to max-width 768px (desktop 769px+ unchanged). */
@import url("mobile-templates.css");

.site-header__toggle {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --tvl-gutter: 20px;
    --tvl-m-display: clamp(32px, 8.5vw, 38px);
    --tvl-m-h2: clamp(24px, 6.2vw, 28px);
    --tvl-m-h3: clamp(18px, 4.8vw, 22px);
    --tvl-m-body: clamp(15px, 3.9vw, 16px);
    --tvl-m-label: clamp(12px, 3.1vw, 13px);
    --tvl-m-caption: clamp(11px, 2.8vw, 12px);
    --tvl-heading: var(--tvl-m-display);
    --tvl-subhead: var(--tvl-m-h2);
    --tvl-body: var(--tvl-m-body);
  }

  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  .page-shell {
    height: auto !important;
    width: 100% !important;
    max-width: 100vw;
    overflow-x: clip;
  }

  .page-scaler {
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
  }

  :is([class$="-page"], .solution-page, .landing-page) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    --gutter: var(--tvl-gutter);
    --page-width: 100%;
    overflow-x: clip;
  }

  h1,
  .ra-hero__title,
  .hero__title,
  .company-hero__title,
  .work-hero__title,
  .section-trusted__title,
  .section-connected__title,
  .section-contact-wrap__title,
  .case-study__name {
    font-size: var(--tvl-m-display) !important;
    line-height: 1.15 !important;
  }

  h2,
  .why-reddit__title,
  .ad-formats__title,
  .industry__title,
  .testimonials__title,
  .process__title,
  .faq__title {
    font-size: var(--tvl-m-h2) !important;
    line-height: 1.25 !important;
  }

  h3,
  .benefit-card__body h3,
  .format-card__title {
    font-size: var(--tvl-m-h3) !important;
    line-height: 1.3 !important;
  }

  p,
  li,
  .ra-hero__lead,
  .ad-formats__subtitle,
  .benefit-card__body p,
  .format-card__text,
  .site-footer__tagline,
  .site-header__link,
  .site-header__cta,
  .site-header__toggle,
  button,
  .blog-filter {
    font-size: var(--tvl-m-body) !important;
    line-height: 1.45 !important;
  }

  .site-header {
    position: sticky !important;
    top: 0;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px;
    z-index: 300;
    pointer-events: auto;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  .landing-page > .site-header {
    background: transparent;
    box-shadow: none !important;
    padding: 8px var(--tvl-gutter);
  }

  .landing-page > .site-header .site-header__inner {
    background: #fff;
    border-radius: 14px;
    box-shadow:
      0 10px 32px rgba(30, 30, 30, 0.1),
      0 2px 8px rgba(30, 30, 30, 0.05);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
    padding: 10px var(--tvl-gutter);
    min-height: 56px;
    position: relative !important;
    max-width: 100%;
    height: auto !important;
  }

  .site-header__logo {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: 108px;
    height: auto;
    flex-shrink: 0;
  }

  .site-header__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .site-header__cta {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    min-width: 0 !important;
    width: max-content;
    max-width: 100%;
    min-height: 32px;
    height: auto;
    padding: 4px 8px;
    font-family: var(--font-light, "Helvetica Light", Helvetica, Arial, sans-serif) !important;
    font-size: var(--tvl-m-caption) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tvl-nav-sheet-cta,
  .tvl-nav-sheet-cta__label {
    font-family: var(--font-light, "Helvetica Light", Helvetica, Arial, sans-serif) !important;
    font-weight: 400 !important;
  }

  .site-header__cta img {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .site-header__toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(30, 30, 30, 0.15);
    border-radius: 8px;
    background: #fff;
    color: var(--color-ink, #1e1e1e);
    flex-shrink: 0;
  }

  .site-header__nav {
    display: none;
    position: static !important;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding: 8px 0 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .site-header__nav.is-open {
    display: flex;
  }

  .site-header__link {
    padding: 12px 4px;
    white-space: normal;
    margin-left: 0 !important;
  }

  .site-header__capabilities {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .why-reddit__grid,
  .ad-formats__grid,
  .cpaas-grid,
  .cap-cards,
  .hero__services-chips,
  .insight-cards__track,
  .section-trusted__logos-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-left: calc(-1 * var(--tvl-gutter));
    margin-right: calc(-1 * var(--tvl-gutter));
    padding-left: var(--tvl-gutter);
    padding-right: var(--tvl-gutter);
  }

  .why-reddit__grid::-webkit-scrollbar,
  .ad-formats__grid::-webkit-scrollbar,
  .insight-cards__track::-webkit-scrollbar,
  .hero__services-chips::-webkit-scrollbar {
    display: none;
  }

  .benefit-card,
  .format-card,
  .cpaas-card,
  .cap-card,
  .insight-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .benefit-card {
    width: min(82vw, 300px) !important;
  }

  .benefit-card__image,
  .benefit-card__body {
    width: 100% !important;
  }

  .format-card {
    width: min(76vw, 280px) !important;
  }

  .insight-card {
    width: min(82vw, 300px) !important;
    height: min(58vw, 320px) !important;
  }

  :is(
      [class$="-ads-page"],
      .abm-page,
      .b2b-lead-page,
      .solution-page,
      .brand-identity-page,
      .brand-strategy-page,
      .performance-marketing-page,
      .channels-page,
      .design-page,
      .content-page,
      .creative-campaigns-page,
      .company-page,
      .work-page,
      .capabilities-page,
      .how-page,
      .blog-page,
      .blog-inner-page,
      .contact-page
    )
    > :is(section, .ra-hero, .bs-hero, .site-header) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
    pointer-events: auto;
  }

  .ra-hero {
    display: flex;
    flex-direction: column;
    padding: 20px var(--tvl-gutter) 36px;
    height: auto !important;
    overflow: hidden;
  }

  .ra-hero__bg {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(52vh, 380px) !important;
    left: 0 !important;
  }

  .ra-hero__ellipse {
    display: none;
  }

  .ra-hero__visual {
    position: relative !important;
    order: 0;
    width: min(100%, 340px);
    margin: 0 auto 12px;
    left: auto !important;
    top: auto !important;
  }

  .ra-hero__visual img {
    width: 100%;
    height: auto;
  }

  .ra-hero__title,
  .ra-hero__lead,
  .ra-hero__eyebrow {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
    white-space: normal !important;
  }

  .ra-hero__title {
    order: 1;
    margin: 0 0 10px;
  }

  .ra-hero__lead {
    order: 2;
    margin: 0 0 16px;
  }

  .ra-hero__logos {
    position: relative !important;
    order: 3;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    mask-image: none;
  }

  :is(.linkedin-ads-page, .reddit-ads-page, .chatgpt-ads-page, .meta-ads-page, .google-ads-page, .youtube-ads-page, .abm-page, .b2b-lead-page, .solution-page)
    .ra-hero__logos-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :is(.linkedin-ads-page, .reddit-ads-page, .chatgpt-ads-page, .meta-ads-page, .google-ads-page, .youtube-ads-page, .abm-page, .b2b-lead-page, .solution-page)
    .ra-hero__logos-viewport::-webkit-scrollbar {
    display: none;
  }

  .why-reddit,
  .ad-formats,
  .niche-block,
  .industry,
  .testimonials,
  .process,
  .faq,
  .case-studies,
  .section-contact-wrap {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 var(--tvl-gutter);
  }

  .why-reddit__title,
  .ad-formats__title,
  .ad-formats__subtitle,
  .industry__title,
  .testimonials__title,
  .process__title,
  .faq__title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    white-space: normal !important;
    margin: 0 0 14px;
  }

  .why-reddit__grid,
  .ad-formats__grid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-top: 16px;
  }

  .industry__gallery {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    width: 100% !important;
    height: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .industry__gallery::-webkit-scrollbar {
    display: none;
  }

  .industry__thumb {
    position: relative !important;
    left: auto !important;
    flex: 0 0 auto;
    width: 116px !important;
    min-width: 116px;
    height: 196px !important;
  }

  .industry__thumb.is-active {
    width: 168px !important;
    min-width: 168px;
  }

  .testimonials__visual {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .testimonials__visual::-webkit-scrollbar {
    display: none;
  }

  .testimonials__card {
    position: relative !important;
    flex: 0 0 min(86vw, 300px);
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  .testimonials__card--back1,
  .testimonials__card--back2 {
    display: block !important;
    opacity: 1;
  }

  .testimonials__mascot {
    display: none;
  }

  .process__steps,
  .process-steps {
    position: relative !important;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: auto !important;
  }

  .process-step {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
  }

  .process-line,
  .process-step__dot {
    display: none !important;
  }

  .faq__trigger,
  .contact-form-card__submit {
    min-height: 44px;
  }

  .case-studies-stack-active .case-studies--stack {
    height: auto !important;
  }

  .case-study-pin,
  .case-study-stack {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    pointer-events: auto;
  }

  .case-study {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .case-study__tag,
  .case-study__name,
  .case-study__desc,
  .case-study__services,
  .case-study__cta,
  .case-study__media,
  .case-study__media-zoom {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
  }

  .section-contact {
    position: relative !important;
    height: auto !important;
    padding: 0;
  }

  .section-contact-wrap__title,
  .section-contact-wrap__subtitle {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: left;
  }

  .section-contact-wrap::before {
    display: none !important;
  }

  .section-contact__gradient,
  .section-contact__texture {
    display: none !important;
  }

  .contact-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .contact-panel__shell,
  .contact-panel__mask {
    display: none !important;
  }

  .contact-form-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 1;
    width: 100% !important;
    height: auto !important;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .contact-panel__character {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 2;
    width: min(100%, 280px);
    margin: 20px auto 0;
    height: auto;
  }

  .contact-panel__character img {
    position: relative !important;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .contact-form-card input,
  .contact-form-card select,
  .contact-form-card textarea {
    font-size: var(--tvl-m-body);
  }

  .site-footer {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 44px var(--tvl-gutter) 36px;
    background-color: #1e1e1e;
    background-image: linear-gradient(
      180deg,
      #1e1e1e 0%,
      #1e1e1e 70%,
      #221a1a 88%,
      #261414 100%
    );
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
  }

  .site-footer__brand,
  .site-footer__col,
  .site-footer__logo,
  .site-footer__tagline,
  .site-footer__cta,
  .site-footer__heading,
  .site-footer__dot,
  .site-footer__links,
  .site-footer__contact,
  .site-footer__divider,
  .site-footer__bottom,
  .site-footer__bottom-logo,
  .site-footer__copyright,
  .site-footer__legal,
  .site-footer__meta {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100%;
  }

  .site-footer__dot {
    display: none;
  }

  .site-footer__brand {
    width: 100% !important;
    gap: 0;
  }

  .site-footer__logo {
    width: 130px !important;
    height: auto !important;
    margin-bottom: 12px;
  }

  .site-footer__tagline {
    margin: 0 0 calc(16px + 0.5em) !important;
    max-width: 22em;
    line-height: 1.5;
  }

  .site-footer__cta {
    align-self: flex-start;
    margin-bottom: 32px;
    min-height: 44px;
    padding: 10px 20px;
  }

  .site-footer__heading {
    margin: 0 0 10px;
    font-size: var(--tvl-m-body) !important;
    line-height: 1.25 !important;
  }

  .site-footer__heading--connect {
    margin-top: 22px;
  }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  .site-footer__links-row {
    display: contents;
  }

  .footer-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    height: 30px;
    min-height: 30px;
    padding: 0 14px;
    font-size: var(--tvl-m-label) !important;
    line-height: 1.25;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }

  .site-footer__contact {
    width: 100%;
    margin: 0;
    font-size: var(--tvl-m-body) !important;
    line-height: 1.3 !important;
  }

  .site-footer__contact p {
    margin: 0 0 4px !important;
    width: auto !important;
  }

  .site-footer__contact p:last-child {
    margin-bottom: 0;
  }

  .site-footer__divider {
    width: 100%;
    margin: 32px 0 20px;
  }

  .site-footer__divider img {
    width: 100%;
  }

  .site-footer__bottom {
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__bottom-logo {
    width: 100%;
    margin: 0;
  }

  .site-footer__meta {
    width: 100%;
    align-items: center;
  }

  .site-footer__bottom-social {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    height: auto;
    min-height: 0;
    padding: 4px 0;
  }

  .site-footer__copyright {
    width: 100%;
    margin: 18px 0 0;
    text-align: center;
    white-space: normal;
    font-size: var(--tvl-m-label);
    opacity: 0.88;
  }

  .landing-page .insight-cards__track {
    flex-direction: row !important;
    animation: none !important;
    width: max-content;
    min-width: 100%;
    gap: 0 !important;
  }

  .landing-page .insight-card--clone {
    display: none !important;
  }

  .landing-page .insight-cards {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 !important;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .landing-page .insight-card {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    flex: 0 0 calc(100vw - 40px) !important;
    margin: 0 20px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .landing-page .insight-cards::-webkit-scrollbar {
    display: none;
  }

  .blog-page .blog-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .capabilities-page .cap-card {
    width: min(82vw, 300px) !important;
  }
}