/* =========================================================
   GOOGLE ADS — HERO
   ========================================================= */

.google-ads-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
}


.google-ads-hero-media {
  display: block;
  width: 100%;
}


.google-ads-hero-image {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   HERO COPY — DESKTOP
   ========================================================= */

.google-ads-hero-copy {
  position: absolute;
  z-index: 2;

  top: 27%;
  left: 8.5%;

  width: min(590px, 34%);
}


.google-ads-hero-title {
  margin: 0;

  color: #fff;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-weight: 400;
}


.google-ads-hero-service {
  display: block;

  margin-bottom: 20px;

  font-size: clamp(56px, 4.4vw, 82px);
  font-weight: 600;
  line-height: 0.95;

  letter-spacing: -0.02em;
}


.google-ads-hero-message {
  display: block;

  font-size: clamp(28px, 2.1vw, 40px);
  font-weight: 500;
  line-height: 1.08;

  letter-spacing: 0;
}


/* =========================================================
   HERO CTA
   ========================================================= */

.google-ads-hero-cta {
  width: 240px;

  margin-top: 34px;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}


@media (min-width: 801px) {

  .google-ads-hero-cta:hover,
  .google-ads-hero-cta:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--ink);
  }


  .google-ads-hero-cta:active {
    transform: translate(0, 0);
    box-shadow: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .google-ads-hero-copy {
    top: 13.5%;
    left: 7%;

    width: 86%;
  }


  .google-ads-hero-service {
  margin-bottom: 16px;

  font-size: clamp(42px, 12vw, 56px);
  font-weight: 600;
  line-height: 0.95;
}


  .google-ads-hero-message {
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 500;
  line-height: 1.08;
}


  .google-ads-hero-cta {
    width: 210px;

    margin-top: 24px;
  }


  .google-ads-hero-cta:active {
    transform: translate(1px, 1px);
    box-shadow: none;
  }

}

/* =========================================================
   SECTION 02 — GOOGLE ADS SERVICE
   ========================================================= */

.google-ads-service {
  background: var(--paper);
  color: var(--ink);
}


.google-ads-service-label,
.google-ads-service-label span {
  font-size: 14px;
}


.google-ads-service-content {
  width: 100%;
  max-width: 982px;
}


.google-ads-service-content h2 {
  margin: 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 400;
  line-height: 1.08;
}


.google-ads-service-subhead {
  margin: 20px 0 38px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}


.google-ads-service-rule {
  width: 100%;
  height: 1px;

  background: var(--ink);
}


.google-ads-service-columns {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 58px;

  margin-top: 24px;

  font-size: 16px;
  line-height: 1.65;
}


.google-ads-service-columns p {
  margin: 0;
}


.google-ads-service-conclusion {
  max-width: 850px;

  margin: 30px 0 42px;

  font-size: 16px;
  line-height: 1.65;
}


/* CTA */

.google-ads-service .strategy-form input,
.google-ads-service .strategy-form .yellow-command,
.google-ads-service .strategy-form .contact-command {
  font-size: 15px;
}


/* =========================================================
   SECTION 02 — MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .google-ads-service-label,
  .google-ads-service-label span {
    font-size: 14px;
  }


  .google-ads-service-content h2 {
    font-size: 25px;
    line-height: 1.08;
  }


  .google-ads-service-subhead {
    margin: 16px 0 30px;

    font-size: 20px;
    line-height: 1.15;
  }


  .google-ads-service-columns {
    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 20px;

    font-size: 15px;
    line-height: 1.65;
  }


  .google-ads-service-conclusion {
    margin: 22px 0 32px;

    font-size: 15px;
    line-height: 1.65;
  }


  .google-ads-service .strategy-form input,
  .google-ads-service .strategy-form .yellow-command,
  .google-ads-service .strategy-form .contact-command {
    font-size: 15px;
  }


  /* Touch feedback */

  .google-ads-service .strategy-form .yellow-command:active,
  .google-ads-service .strategy-form .contact-command:active {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--ink);
  }

}


@media (hover: none) and (pointer: coarse) {

  .google-ads-service .strategy-form .yellow-command:hover,
  .google-ads-service .strategy-form .contact-command:hover {
    transform: none;
    box-shadow: none;
  }


  .google-ads-service .strategy-form .yellow-command:active,
  .google-ads-service .strategy-form .contact-command:active {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--ink);
  }

}

/* =========================================================
   SECTION 03 — PAIN POINT
   ========================================================= */

.google-ads-pain {
  width: 100%;

  padding: 96px 40px 110px;

  background: #f3f1ef;
  color: #111;
}


.google-ads-pain-inner {
  width: 100%;
  max-width: 1415px;

  margin: 0 auto;
}


/* LABEL */

.google-ads-pain-label {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}


.google-ads-pain-label span:first-child {
  color: #145c59;
}


/* TITLE */

.google-ads-pain-title {
  max-width: 780px;

  margin: 0 0 54px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}


.google-ads-pain-title span {
  color: #ed6a12;
}


/* MAIN LAYOUT */

.google-ads-pain-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: clamp(48px, 6vw, 92px);

  align-items: center;
}


/* =========================================================
   ARTWORK
   ========================================================= */

.google-ads-pain-media {
  min-width: 0;
}


.google-ads-pain-image-wrap {
  position: relative;

  width: 100%;

  overflow: hidden;
}


.google-ads-pain-image {
  display: block;

  width: 100%;
  height: auto;

  transform:
    translate3d(
      var(--pain-x, 0px),
      var(--pain-y, 0px),
      0
    )
    scale(1.015);

  transition:
    transform 180ms ease-out;

  will-change: transform;
}


/* =========================================================
   PAIN POINT LIST
   ========================================================= */

.google-ads-pain-list {
  min-width: 0;

  border-top: 1px solid rgba(17, 17, 17, 0.25);
}


.google-ads-pain-item {
  display: grid;

  grid-template-columns:
    58px minmax(0, 1fr);

  gap: 20px;

  padding: 28px 0;

  border-bottom:
    1px solid rgba(17, 17, 17, 0.25);

  transform: translateX(0);

  transition:
    transform 200ms ease,
    border-color 200ms ease;
}


.google-ads-pain-number {
  color: #ed6a12;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 600;
  line-height: 1;

  transform: translateX(0) scale(1);

  transform-origin: left center;

  transition:
    transform 200ms ease,
    color 200ms ease;
}


.google-ads-pain-copy h3 {
  margin: 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
}


.google-ads-pain-copy p {
  margin: 10px 0 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}


/* =========================================================
   DESKTOP POINTER INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .google-ads-pain-image-wrap {
    cursor: default;
  }


  .google-ads-pain-item:hover {
    transform: translateX(6px);

    border-bottom-color: #ed6a12;
  }


  .google-ads-pain-item:hover
  .google-ads-pain-number {
    transform:
      translateX(2px)
      scale(1.05);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .google-ads-pain-image {
    transition: none;
    transform: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .google-ads-pain {
    padding:
      70px 20px
      82px;
  }


  .google-ads-pain-label {
    margin-bottom: 22px;

    font-size: 14px;
  }


  .google-ads-pain-title {
    margin-bottom: 34px;

    font-size: 25px;
    line-height: 1.08;
  }


  .google-ads-pain-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .google-ads-pain-image {
    transform: none;
    transition: none;
  }


  .google-ads-pain-item {
    grid-template-columns:
      42px minmax(0, 1fr);

    gap: 14px;

    padding: 22px 0;
  }


  .google-ads-pain-number {
    font-size: 20px;
  }


  .google-ads-pain-copy h3 {
    font-size: 20px;
    line-height: 1.15;
  }


  .google-ads-pain-copy p {
    margin-top: 8px;

    font-size: 15px;
    line-height: 1.6;
  }

}
.google-ads-pain-item:active {
  transform: translateX(3px);

  border-bottom-color: #ed6a12;
}


.google-ads-pain-item:active
.google-ads-pain-number {
  transform:
    translateX(1px)
    scale(1.04);
}


/* =========================================================
   SECTION 04 — TRUST
   Based on Facebook Ads Section 03
   ========================================================= */

.google-ads-trust {
  padding: 110px 5% 120px;

  background: #fefefe;
  color: #111;
}


.google-ads-trust-inner {
  width: 100%;
  max-width: 1420px;

  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* 04 / TRUST */

.google-ads-trust-label {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0 0 24px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}


/* HEAD */

.google-ads-trust-title {
  margin: 0 0 18px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 34px;
  font-weight: 500;
  line-height: 1.08;

  text-align: center;
}


/* BODY */

.google-ads-trust-copy {
  width: 100%;
  max-width: 720px;

  margin: 0 auto 40px;

  text-align: center;
}


.google-ads-trust-copy p {
  margin: 0;

  font-size: 16px;
  line-height: 1.65;
}


/* =========================================================
   KODAK + CLIENT LOGO SLIDER
   ========================================================= */

.google-ads-trust-media {
  width: 100%;

  display: flex;
  justify-content: center;
}


.google-ads-trust-scene {
  position: relative;

  width: 100%;
  max-width: 650px;
}


.google-ads-trust-frame {
  display: block;

  width: 100%;
  height: auto;
}


/*
   Actual black window inside kodak.webp
*/

.google-ads-trust-screen {
  position: absolute;

  left: 25.60%;
  top: 30.22%;

  width: 49.04%;
  height: 35.01%;

  overflow: hidden;

  border-radius: 3%;

  background: #0b0b0b;
}


.google-ads-trust-track {
  display: flex;

  width: 100%;
  height: 100%;

  transform: translateX(0);

  transition:
    transform 650ms
    cubic-bezier(0.65, 0, 0.35, 1);

  will-change: transform;
}


.google-ads-trust-track.is-resetting {
  transition: none;
}


.google-ads-trust-slide {
  display: block;

  flex: 0 0 100%;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #0b0b0b;
}


/* =========================================================
   SECTION 05 — CLIENT STORY
   Based on Facebook Ads Section 04
   ========================================================= */

.google-ads-testimonial {
  padding: 110px 10% 120px;

  background: #171717;
  color: #f5f4ef;
}


.google-ads-testimonial-inner {
  width: 100%;
  max-width: 1420px;

  margin-left: auto;
  margin-right: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.32fr)
    minmax(0, 0.68fr);

  gap: 56px;

  align-items: center;
}


/* LEFT — CONTENT */

.google-ads-testimonial-content {
  min-width: 0;
  max-width: 480px;
}


/* 05 / CLIENT STORY */

.google-ads-testimonial-label {
  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 32px;

  color: var(--yellow);

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}


/* HEAD */

.google-ads-testimonial-content h2 {
  margin: 0 0 30px;

  color: #f5f4ef;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 34px;
  font-weight: 500;
  line-height: 1.08;
}


/* BODY */

.google-ads-testimonial-description {
  margin: 0;

  max-width: 440px;

  color: #d8d6d0;

  font-size: 16px;
  line-height: 1.65;
}


/* PERSON */

.google-ads-testimonial-person {
  margin-top: 42px;
}


.google-ads-testimonial-name {
  margin: 0 0 6px;

  color: #f5f4ef;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}


.google-ads-testimonial-role {
  margin: 0;

  max-width: 410px;

  color: #aaa8a2;

  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   RIGHT — VIDEO FRAME
   ========================================================= */

.google-ads-testimonial-media {
  min-width: 0;
}


.google-ads-youtube-scene {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 6px;

  background: #fff;
}


.google-ads-youtube-frame {
  display: block;

  width: 100%;
  height: auto;
}


/*
   Main video player position
   inside Adpetize.webp
*/

.google-ads-youtube-video {
  position: absolute;
  z-index: 2;

  left: 0.84%;
  top: 7.64%;

  width: 69.94%;
  height: 80.62%;

  display: block;

  object-fit: cover;
  object-position: center;

  background: #111;

  border: 0;
  border-radius: 7px;
}


/* =========================================================
   SECTION 04 + 05 — MOBILE
   ========================================================= */

@media (max-width: 800px) {

  /* SECTION 04 */

  .google-ads-trust {
    padding:
      64px 14px
      72px;
  }


  .google-ads-trust-label {
    gap: 9px;

    margin-bottom: 20px;

    font-size: 20px;
  }


  .google-ads-trust-title {
    margin-bottom: 14px;

    font-size: 25px;
    line-height: 1.05;
  }


  .google-ads-trust-scene {
    width: 100%;
    max-width: 600px;
  }


  .google-ads-trust-copy {
    max-width: 340px;

    margin:
      0 auto
      30px;
  }


  .google-ads-trust-copy p {
    font-size: 15px;
    line-height: 1.65;
  }


  /* SECTION 05 */

  .google-ads-testimonial {
    padding:
      64px 14px
      72px;
  }


  .google-ads-testimonial-inner {
    grid-template-columns: 1fr;

    gap: 34px;
  }


  .google-ads-testimonial-content {
    order: 1;

    max-width: none;

    padding-left: 6px;
    padding-right: 6px;
  }


  .google-ads-testimonial-label {
    gap: 9px;

    margin-bottom: 24px;

    font-size: 19px;
  }


  .google-ads-testimonial-content h2 {
    margin-bottom: 24px;

    max-width: 340px;

    font-size: 25px;
    line-height: 1.05;
  }


  .google-ads-testimonial-description {
    max-width: 350px;

    font-size: 15px;
    line-height: 1.65;
  }


  .google-ads-testimonial-person {
    margin-top: 32px;
  }


  .google-ads-testimonial-name {
    font-size: 20px;
  }


  .google-ads-testimonial-role {
    max-width: 330px;

    font-size: 14px;
  }


  .google-ads-testimonial-media {
    order: 2;
  }

}

/* =========================================================
   SECTION 06 — SERVICES
   HOME SECTION 04 INTERACTION LANGUAGE
   ========================================================= */

.google-ads-services {
  width: 100%;

  padding: 96px 40px 110px;

  background: #dbdbdb;
  color: #111;
}


.google-ads-services-inner {
  width: 100%;
  max-width: 1420px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    210px minmax(0, 1fr);

  gap: 55px;
  align-items: start;
}


/* 06 / SERVICES */

.google-ads-services-label {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-top: 7px;

  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  white-space: nowrap;
}


/* CONTENT */

.google-ads-services-content {
  min-width: 0;
}


.google-ads-services-content h2 {
  margin: 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}


.google-ads-services-subhead {
  margin: 14px 0 48px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}


/* =========================================================
   SERVICE CONSOLE
   ========================================================= */

.google-ads-services-console {
  width: 100%;

  display: grid;
  grid-template-columns:
    350px minmax(0, 1fr);

  border-top:
    1px solid rgba(17, 17, 17, 0.60);

  border-bottom:
    1px solid rgba(17, 17, 17, 0.60);
}


/* =========================================================
   LEFT — SERVICE NAVIGATION
   ========================================================= */

.google-ads-services-nav {
  min-width: 0;

  border-right:
    1px solid rgba(17, 17, 17, 0.60);
}


.google-ads-services-tab {
  appearance: none;

  width: 100%;
  min-height: 67px;

  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);

  align-items: center;

  gap: 15px;

  margin: 0;
  padding: 0 20px;

  border: 0;
  border-bottom:
    1px solid rgba(17, 17, 17, 0.28);

  border-radius: 0;

  background: transparent;
  color: #111;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}


.google-ads-services-tab:last-child {
  border-bottom: 0;
}


.google-ads-services-tab small {
  color: #666;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}


.google-ads-services-tab span {
  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 17px;
  font-weight: 400;
  line-height: 1.12;
}


.google-ads-services-tab.is-active {
  background: var(--yellow);
  color: #111;
}


.google-ads-services-tab.is-active small {
  color: #111;
}


/* =========================================================
   RIGHT — SERVICE CONTENT
   ========================================================= */

.google-ads-services-reading {
  position: relative;

  min-width: 0;
  min-height: 500px;

  padding:
    43px 52px
    84px;
}


.google-ads-services-panel[hidden] {
  display: none;
}


.google-ads-services-index {
  margin: 0 0 27px;

  color: #555;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}


.google-ads-services-panel h3 {
  max-width: 650px;

  margin: 0 0 22px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}


.google-ads-services-body {
  max-width: 700px;
}


.google-ads-services-body p {
  margin: 0;

  color: #333;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}


.google-ads-services-body p + p {
  margin-top: 15px;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.google-ads-services-controls {
  position: absolute;

  left: 52px;
  bottom: 27px;

  display: flex;
  align-items: center;

  gap: 13px;
}


.google-ads-services-controls button {
  appearance: none;

  width: 35px;
  height: 30px;

  padding: 0;

  border: 1px solid #111;
  border-radius: 0;

  background: transparent;
  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}


.google-ads-services-count {
  min-width: 48px;

  color: #111;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 13px;
  font-weight: 500;

  text-align: center;
}


/* CTA */

.google-ads-services-cta {
  margin-top: 34px;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}


/* =========================================================
   DESKTOP INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .google-ads-services-tab:not(.is-active):hover {
    transform: translateX(4px);
  }


  .google-ads-services-controls button:hover {
    background: #111;
    color: #fff;

    transform: translateY(-2px);
  }
    .google-ads-services-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 #111;
  }

}


/* KEYBOARD */

.google-ads-services-tab:focus-visible,
.google-ads-services-controls button:focus-visible {
  outline: 2px solid #111;
  outline-offset: -3px;
}


/* =========================================================
   SECTION 07 — FAQ
   LEAD GENERATION SECTION 04 COLOR LANGUAGE
   ========================================================= */

.google-ads-faq {
  width: 100%;

  padding: 110px 10% 120px;

  background: #f0eae6;
  color: #111;
}


.google-ads-faq-inner {
  width: 100%;
  max-width: 1420px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 0.34fr)
    minmax(0, 0.66fr);

  gap: 72px;

  align-items: start;
}


/* =========================================================
   LEFT — INTRO
   ========================================================= */

.google-ads-faq-intro {
  min-width: 0;
}


/* 07 / FAQ */

.google-ads-faq-label {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0 0 30px;

  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}


.google-ads-faq-intro h2 {
  max-width: 420px;

  margin: 0;

  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}


/* =========================================================
   RIGHT — FAQ LIST
   ========================================================= */

.google-ads-faq-list {
  min-width: 0;

  border-top:
    1px solid rgba(17, 17, 17, 0.18);
}


.google-ads-faq-item {
  margin: 0;

  border-bottom:
    1px solid rgba(17, 17, 17, 0.18);
}


/* REMOVE DEFAULT MARKER */

.google-ads-faq-item summary {
  list-style: none;
}


.google-ads-faq-item summary::-webkit-details-marker {
  display: none;
}


/* QUESTION */

.google-ads-faq-item summary {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    34px;

  gap: 24px;

  align-items: start;

  padding: 27px 0;

  color: #111;

  cursor: pointer;
}


.google-ads-faq-item summary span {
  max-width: 760px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;

  transition:
    color 160ms ease,
    transform 160ms ease;
}


/* + / − */

.google-ads-faq-item summary::after {
  content: "+";

  display: block;

  color: #dc4636;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 31px;
  font-weight: 500;
  line-height: 0.8;

  text-align: right;
}


.google-ads-faq-item[open] summary::after {
  content: "−";
}


/* OPEN QUESTION ACCENT */

.google-ads-faq-item[open] summary span {
  color: #dc4636;
}


/* ANSWER */

.google-ads-faq-answer {
  max-width: 760px;

  padding:
    0 58px
    30px 0;
}


.google-ads-faq-answer p {
  margin: 0;

  color: #575250;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}


.google-ads-faq-answer p + p {
  margin-top: 14px;
}


/* =========================================================
   FAQ — DESKTOP INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .google-ads-faq-item summary:hover span {
    color: #dc4636;

    transform: translateX(4px);
  }

}


.google-ads-faq-item summary:focus-visible {
  outline: 2px solid #dc4636;
  outline-offset: 5px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {


  /* =======================================================
     SECTION 06
     ======================================================= */

  .google-ads-services {
    padding:
      64px 14px
      72px;
  }


  .google-ads-services-inner {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .google-ads-services-label {
    padding-top: 0;

    font-size: 14px;
  }


  .google-ads-services-content h2 {
    font-size: 25px;
    line-height: 1.05;
  }


  .google-ads-services-subhead {
    margin:
      12px 0
      32px;

    font-size: 20px;
    line-height: 1.1;
  }


  .google-ads-services-console {
    grid-template-columns: 1fr;

    border-bottom:
      1px solid rgba(17, 17, 17, 0.60);
  }


  .google-ads-services-nav {
    border-right: 0;

    border-bottom:
      1px solid rgba(17, 17, 17, 0.60);
  }


  .google-ads-services-tab {
    min-height: 57px;

    grid-template-columns:
      30px minmax(0, 1fr);

    gap: 12px;

    padding: 0 14px;
  }


  .google-ads-services-tab span {
    font-size: 16px;
  }


  .google-ads-services-reading {
    min-height: 520px;

    padding:
      32px 18px
      78px;
  }


  .google-ads-services-index {
    margin-bottom: 22px;

    font-size: 13px;
  }


  .google-ads-services-panel h3 {
    margin-bottom: 19px;

    font-size: 20px;
    line-height: 1.1;
  }


  .google-ads-services-body p {
    font-size: 15px;
    line-height: 1.65;
  }


  .google-ads-services-body p + p {
    margin-top: 14px;
  }


  .google-ads-services-controls {
    left: 18px;
    bottom: 24px;
  }


  .google-ads-services-cta {
    margin-top: 28px;
  }


  /* TOUCH FEEDBACK */

  .google-ads-services-tab:active {
    transform: translateX(2px);
  }


  .google-ads-services-controls button:active {
    background: #111;
    color: #fff;

    transform: translateY(1px);
  }


  /* =======================================================
     SECTION 07 — FAQ
     ======================================================= */

  .google-ads-faq {
    padding:
      64px 14px
      72px;
  }


  .google-ads-faq-inner {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .google-ads-faq-label {
    margin-bottom: 22px;

    font-size: 14px;
  }


  .google-ads-faq-intro h2 {
    max-width: 340px;

    font-size: 25px;
    line-height: 1.05;
  }


  .google-ads-faq-item summary {
    grid-template-columns:
      minmax(0, 1fr)
      28px;

    gap: 16px;

    padding: 23px 0;
  }


  .google-ads-faq-item summary span {
    max-width: none;

    font-size: 17px;
    line-height: 1.15;
  }


  .google-ads-faq-item summary::after {
    font-size: 27px;
  }


  .google-ads-faq-answer {
    max-width: none;

    padding:
      0 36px
      25px 0;
  }


  .google-ads-faq-answer p {
    font-size: 15px;
    line-height: 1.65;
  }


  .google-ads-faq-item summary:active span {
    color: #dc4636;
  }

}