/* WordPress AI Chatbot landing page — styles for sections not covered by
   landing.css. Reuses existing tokens (--pc-*) and mirrors home/about patterns. */

.pc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Responsive / mobile header ----------------------------------------
   On small screens hide the desktop nav + "Get Free demo" button + profile,
   and show the hamburger with a clear gutter from the right edge. */
.pc-solution-page {
  /* clip, not hidden: hidden turns the body into a scroll container and
     cancels position: sticky inside the page. */
  overflow-x: clip;
}
@media (max-width: 980px) {
  .pc-solution-page .pc-desktop-nav,
  .pc-solution-page .pc-header-demo,
  .pc-solution-page .pc-header-profile {
    display: none !important;
  }
  .pc-solution-page .pc-menu-toggle {
    display: inline-flex !important;
    margin-left: auto;
  }
  .pc-solution-page .pc-header-shell {
    width: min(calc(100% - 40px), 1572px);
    height: 72px;
  }
  .pc-solution-page .pc-mobile-nav {
    width: min(calc(100% - 40px), 1572px);
  }
  .pc-solution-page .pc-site-header.is-open .pc-mobile-nav {
    display: flex;
  }
}

/* ---- Hero (light treatment) --------------------------------------------
   Base .pc-hero is near-black and the light-hero styling lives only under
   .pc-about-page, so on this page the hero renders dark. Replicate the light
   treatment (white background, dark text, light guide lines) to match Figma. */
.pc-wp-hero {
  min-height: clamp(560px, 82vh, 780px);
  background: #fff;
  align-items: center;
  padding: 118px 0 64px;
}
.pc-wp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(217, 47, 36, .05), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fff 78%, #fafafa 100%);
  pointer-events: none;
  z-index: 0;
}
.pc-wp-hero .pc-hero-bg,
.pc-wp-hero .pc-hero-overlay,
.pc-wp-hero .pc-particle-canvas {
  display: none !important;
}
.pc-wp-hero .pc-hero-lines {
  z-index: 1;
  opacity: .7;
}
.pc-wp-hero .pc-guide-line {
  background: rgba(0, 0, 0, .05);
}
.pc-wp-hero .pc-guide-left,
.pc-wp-hero .pc-guide-right {
  background: rgba(0, 0, 0, .03);
}
.pc-wp-hero .pc-hero-tick {
  color: rgba(0, 0, 0, .28);
}
.pc-wp-hero .pc-hero-inner {
  z-index: 3;
}
.pc-wp-hero .pc-hero-copy {
  color: #1f1f1f;
}
.pc-wp-hero .pc-hero-copy h1 {
  width: 100%;
  max-width: 575px;
  color: #202020;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.14;
  /* Match the homepage hero, which sets no negative tracking. */
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
}
.pc-wp-hero .pc-hero-text {
  color: #4e4e4e;
}
.pc-wp-hero .pc-btn-dark > span:first-child {
  background: #111;
  color: #fff;
}
.pc-wp-hero .pc-btn-ghost-dark {
  color: rgba(17, 17, 17, .72);
}
/* Keep "Get A Free Demo" dark (and visible) on hover over the white hero. */
.pc-wp-hero .pc-btn-ghost-dark.pc-demo-cta,
.pc-wp-hero .pc-btn-ghost-dark.pc-demo-cta:hover,
.pc-wp-hero .pc-btn-ghost-dark.pc-demo-cta:focus-visible {
  --pc-demo-color: #242222;
  color: #242222;
}
/* Clean hero image: no white border, no drop shadow, no tinted frame. */
.pc-wp-hero .pc-about-hero-visual {
  border: 0;
  box-shadow: none;
  background: none;
}
.pc-wp-hero .pc-about-hero-visual::before,
.pc-wp-hero .pc-about-hero-visual::after {
  display: none;
}
/* Smaller hero CTAs on mobile (were stretching full-width). */
@media (max-width: 720px) {
  .pc-wp-hero .pc-actions .pc-btn.pc-arrow-button {
    min-height: 44px;
    font-size: 12px;
  }
  .pc-wp-hero .pc-actions .pc-btn-dark > span:first-child {
    padding: 0 16px;
  }
  .pc-wp-hero .pc-actions .pc-arrow-button > span:last-child {
    width: 44px;
  }
}
@media (max-width: 460px) {
  .pc-wp-hero .pc-actions .pc-arrow-button {
    width: auto;
  }
  .pc-wp-hero .pc-actions .pc-arrow-button > span:first-child {
    flex: 0 1 auto;
  }
}

.pc-solution-page .pc-actions .pc-arrow-button > span:first-child { white-space: nowrap; }
/* Smaller section CTAs on mobile across the whole page. */
@media (max-width: 720px) {
  .pc-solution-page .pc-actions .pc-btn.pc-arrow-button {
    min-height: 44px;
    font-size: 12px;
  }
  .pc-solution-page .pc-actions .pc-btn-dark > span:first-child {
    padding: 0 16px;
  }
  .pc-solution-page .pc-actions .pc-arrow-button > span:last-child {
    width: 44px;
  }
}
@media (max-width: 460px) {
  .pc-solution-page .pc-actions .pc-arrow-button {
    width: auto;
  }
  .pc-solution-page .pc-actions .pc-arrow-button > span:first-child {
    flex: 0 1 auto;
    white-space: nowrap;
  }
}

/* ---- Add an AI Chatbot to Your WordPress Website (features) ------------- */
.pc-wp-features {
  padding: clamp(78px, 11vw, 150px) 0;
  background: var(--pc-soft);
  /* clip, not hidden: hidden makes this a scroll container, which silently
     cancels the sticky visual below. clip contains the beam the same way. */
  overflow: clip;
}
.pc-wp-features-grid {
  align-items: stretch;
}
.pc-wp-features .pc-copy-col h2 {
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  overflow-wrap: normal;
  word-break: keep-all;
}
.pc-wp-features-visual {
  /* Match the homepage Key Benefits section: line the image up with the
     heading rather than the bottom of a much taller copy column, and hold it
     in view until the feature list has scrolled past. */
  align-self: start;
  position: sticky;
  top: clamp(100px, 12vh, 132px);
}
.pc-wp-features .pc-benefit-icon {
  background: none;
  width: 26px;
  height: 26px;
}
.pc-wp-features .pc-benefit-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ---- Install PluginChatBot on WordPress Easily (3 steps) ------------------ */
.pc-steps-section {
  padding: clamp(78px, 11vw, 150px) 0;
  background: #fff;
  overflow: hidden;
}
.pc-steps-section h2 {
  margin: 8px 0 0;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 700;
  color: #111;
  text-wrap: balance;
}
.pc-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(36px, 5vw, 60px);
}
.pc-step-card {
  display: flex;
  flex-direction: column;
}
.pc-step-media {
  position: relative;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #101010;
  box-shadow: var(--pc-shadow);
  overflow: hidden;
}
.pc-step-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pc-step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--pc-red);
  color: #fff;
  font-family: var(--pc-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 6px 12px;
}
.pc-step-body {
  padding: 20px 0;
  border-bottom: 1px solid var(--pc-line);
  /* The card is a flex column and the grid stretches every card to the tallest
     one in the row, so letting the body fill and pushing the heading to the
     bottom keeps the three headings on one line without reserving a fixed
     block of empty space for the description. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pc-step-body p {
  margin: 0 0 14px;
  color: rgba(17, 17, 17, .58);
  font-size: 14px;
  line-height: 1.6;
}
.pc-step-body h3 {
  margin: auto 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.02em;
  color: #111;
}

/* ---- Common Questions (FAQ accordion) ---------------------------------- */
.pc-faq-section {
  padding: clamp(78px, 11vw, 150px) 0;
  background: var(--pc-soft);
  overflow: hidden;
}
.pc-faq-grid {
  align-items: start;
}
.pc-faq-copy {
  align-self: start;
}
.pc-faq-copy h2 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 700;
  color: #111;
  text-wrap: balance;
}
.pc-faq-copy .pc-eyebrow {
  margin-bottom: 18px;
}
.pc-faq-copy .pc-actions-dark {
  margin-top: 30px;
}
.pc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pc-faq-item {
  border: 1px solid var(--pc-line);
  background: #fff;
  transition: border-color .22s var(--pc-ease), box-shadow .22s var(--pc-ease);
}
.pc-faq-item[open] {
  border-color: rgba(217, 47, 36, .35);
  box-shadow: 0 14px 40px rgba(12, 10, 8, .07);
}
.pc-faq-item summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #111;
}
.pc-faq-item summary::-webkit-details-marker {
  display: none;
}
.pc-faq-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--pc-red);
}
.pc-faq-icon svg,
.pc-faq-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.pc-faq-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pc-red);
}
.pc-faq-toggle::before,
.pc-faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: opacity .2s var(--pc-ease), transform .2s var(--pc-ease);
}
.pc-faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.pc-faq-item[open] .pc-faq-toggle::after {
  opacity: 0;
}
.pc-faq-body {
  padding: 0 20px 20px 58px;
  color: rgba(17, 17, 17, .6);
  font-size: 14px;
  line-height: 1.62;
}
.pc-faq-body p {
  margin: 0;
  max-width: 56ch;
}

/* ---- Turn Website Visitors into Your Next Customer (tools reuse) -------- */
.pc-wp-visitors .pc-copy-col h2 {
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.03em;
  overflow-wrap: normal;
  word-break: keep-all;
}
.pc-wp-visitors .pc-inline-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---- Built for WordPress Businesses (carousel) -------------------------- */
/* The base .pc-about-carousel is `overflow: visible` with a 4-column grid on
   desktop, so 6 cards spill out and the arrows have nothing to scroll. Turn it
   into a real horizontal scroller: fixed-width cards (~3 visible + a peek) that
   scroll one card per arrow click, matching how the About carousel behaves. */
.pc-solution-page .pc-about-carousel {
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3.5);
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.pc-solution-page .pc-about-benefit-card {
  scroll-snap-align: start;
}
.pc-solution-page .pc-about-benefit-card img {
  width: 100%;
  height: clamp(220px, 16.6vw, 286px);
  object-fit: cover;
}
.pc-solution-page .pc-about-benefit-card div {
  min-height: 210px;
  padding: 24px 24px 27px;
}
.pc-solution-page .pc-about-benefit-card p {
  min-height: 108px;
  font-size: 14px;
  line-height: 1.58;
}
.pc-solution-page .pc-about-benefit-card h3 {
  font-size: 20px;
  font-weight: 500;
}
@media (max-width: 1180px) {
  .pc-solution-page .pc-about-carousel {
    grid-auto-columns: minmax(300px, 44%);
  }
}
@media (max-width: 720px) {
  .pc-solution-page .pc-about-carousel {
    grid-auto-columns: minmax(260px, 86vw);
  }
  .pc-solution-page .pc-about-benefit-card div,
  .pc-solution-page .pc-about-benefit-card p {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .pc-steps-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .pc-faq-copy {
    position: static;
  }
  .pc-wp-features-visual {
    /* .pc-split is one column from here down, so pinning would park the image
       on top of the text. */
    position: static;
  }
  .pc-faq-copy .pc-actions-dark {
    margin-bottom: 8px;
  }
}