/* Platform landing pages (/for-shopify, /for-woocommerce, ...).
   Shared by all six so the pages stay visually identical to the rest of the site
   without each one carrying its own copy. Colours and spacing come from the same
   custom properties styles.css defines, so a change there flows through here. */

/* The hero already exists in styles.css (.page-hero, .compact). Only the accent
   line the landing pages add is new. */
.lp-accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: .84rem;
  color: var(--ink-soft);
}

.lp-accent img {
  display: block;
  max-height: 22px;
  width: auto;
}

/* Platform facts: what the integration is, how it maps, what credential it uses.
   A description list because these are name/value pairs, not prose. */
.lp-facts {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--white);
}

.lp-facts dt,
.lp-facts dd {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}

.lp-facts dt {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-right: 1px solid var(--line);
}

.lp-facts dd {
  color: var(--ink-soft);
}

.lp-facts dt:last-of-type,
.lp-facts dd:last-of-type {
  border-bottom: 0;
}

@media (max-width: 640px) {
  .lp-facts { grid-template-columns: 1fr; }
  .lp-facts dt { border-right: 0; border-bottom: 0; padding-bottom: 0; }
}

/* Numbered install steps. */
.lp-steps {
  counter-reset: lp-step;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.lp-steps li {
  counter-increment: lp-step;
  position: relative;
  padding: 18px 0 18px 56px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.lp-steps li::before {
  content: counter(lp-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  color: var(--electric);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .5px;
}

.lp-steps li strong {
  color: var(--ink);
}

/* The snippet block, so a visitor can see exactly what gets pasted. */
.lp-code {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--ink);
  color: #e8f1f2;
  border-radius: 2px;
  font: .82rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

/* Honest limits. Every page states what the integration does NOT do, because that is
   the question a technical buyer actually has. */
.lp-limits {
  border-left: 3px solid var(--electric);
  background: var(--white);
  padding: 18px 22px;
}

.lp-limits p { margin: 0 0 10px; color: var(--ink-soft); }
.lp-limits p:last-child { margin-bottom: 0; }
.lp-limits strong { color: var(--ink); }

/* FAQ. Plain headings, no accordion, so the answers are in the HTML for crawlers. */
.lp-faq { border-top: 1px solid var(--line); }

.lp-faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.lp-faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
  content: "+";
  float: right;
  color: var(--electric);
  font-weight: 700;
}

.lp-faq details[open] summary::after { content: "–"; }

.lp-faq p {
  margin: 0 0 18px;
  color: var(--ink-soft);
}

/* Cross-links between the platform pages. These are real in-page links, not injected
   by script, so they are crawlable. */
.lp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-links a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: .85rem;
  text-decoration: none;
  color: var(--ink);
}

.lp-links a:hover { border-color: var(--electric); }

.lp-links a[aria-current="page"] {
  border-color: var(--electric);
  font-weight: 700;
}