/*
 * The integrations section of the homepage (#integrations).
 *
 * A row of tiles picks an integration; one panel underneath shows it. Every panel is built from the same parts in
 * the same order, so adding or editing an integration never means designing a new layout:
 *
 *   header     name, category, status
 *   summary    what it does for you, in a sentence or two
 *   features   what syncs / what you get: a short checklist
 *   demo       optional, collapsed: the Klaviyo email, the API calls
 *   links      where to read more
 *
 * Plain CSS rather than Tailwind utilities, for the same reason as pricing-plans.css: the section is styled as one
 * unit and the compiled tailwind.css does not have to be rebuilt for it. Colours are the Tailwind palette the rest of
 * the page uses: indigo-600 #4f46e5, green-600 #16a34a, gray-50 #f9fafb ... gray-900 #111827.
 *
 * The behaviour (tabs, copy button) is in assets/js/integrations.js and works off the aria attributes in the
 * markup, so the selected look below is driven by [aria-selected] and the visible panel by [hidden].
 */

/* The whole widget: the tiles and the panels under them. */
.integrations {
  max-width: 64rem;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------------------------------------------
   Tiles: one per integration, all always visible, wrapping onto as many rows as the width needs. No scrolling,
   so nothing is hidden off to the side.
   --------------------------------------------------------------------------------------------------------------- */
.integration-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 640px) {
  .integration-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .integration-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.integration-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 5.25rem;
  padding: 0.75rem 0.5rem;
  font: inherit;
  text-align: center;
  color: inherit;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.integration-tab:hover {
  transform: translateY(-2px);
  border-color: #a5b4fc;
  box-shadow: 0 10px 20px -12px rgba(79, 70, 229, 0.35);
}

.integration-tab:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.integration-tab[aria-selected="true"] {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1, 0 12px 24px -14px rgba(79, 70, 229, 0.55);
}

/* The logo is the name: the wordmarks already say "Shopify", "Klaviyo" and so on, so the caption underneath says
   what kind of tool it is instead of repeating it. The box is the same height on every tile so the captions line
   up; the images are sized inside it. */
.integration-tab__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  color: #111827;
}

.integration-tab__logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Wordmarks differ a lot in how much ink they carry for the same height, so the heavier ones are trimmed. */
.integration-tab__logo--woocommerce img {
  height: 1.5rem;
}

.integration-tab__logo--meta img {
  height: 1.25rem;
}

.integration-tab__logo--mailchimp img {
  height: 1.625rem;
}

/* The API has no logo, so its name is set as a wordmark of its own. */
.integration-tab__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.integration-tab__wordmark svg {
  width: 1.375rem;
  height: 1.375rem;
}

.integration-tab__caption {
  font-size: 0.75rem;
  line-height: 1.2;
  color: #6b7280;
}

.integration-tab[aria-selected="true"] .integration-tab__caption {
  font-weight: 600;
  color: #4338ca;
}

/* ---------------------------------------------------------------------------------------------------------------
   Panel: the same parts for every integration.
   --------------------------------------------------------------------------------------------------------------- */
.integration-panel {
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 28px -14px rgba(17, 24, 39, 0.16);
}

@media (min-width: 640px) {
  .integration-panel {
    padding: 2rem 2rem 1.75rem;
  }
}

/* Stated here as well as relying on the browser default, so a display rule added to .integration-panel later
   cannot make every panel show at once. */
.integration-panel[hidden] {
  display: none;
}

.integration-panel:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Header: name and category on the left, status on the right. */
.integration-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.integration-panel__name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: #111827;
}

.integration-panel__category {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Every integration shown here is live; the chip exists so one that is not yet can say so. */
.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
}

.integration-status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  background: #22c55e;
  border-radius: 9999px;
}

.integration-panel__summary {
  max-width: 48rem;
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #374151;
}

.integration-panel__label {
  margin: 1.5rem 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Features: a checklist, a bold lead-in and one line under it. The tick is drawn here so the markup stays a plain
   list. An odd one out at the end takes the full row rather than leaving a hole beside it. */
.integration-features {
  display: grid;
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .integration-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-features li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.integration-features li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #4b5563;
}

.integration-features li::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  border-radius: 9999px;
}

.integration-features strong {
  display: block;
  margin-bottom: 0.125rem;
  font-weight: 600;
  color: #111827;
}

.integration-features a {
  font-weight: 500;
  color: #4f46e5;
  text-decoration: underline;
}

.integration-features a:hover {
  color: #4338ca;
}

.integration-features code {
  padding: 0.125rem 0.375rem;
  font-size: 0.8125em;
  color: #374151;
  background: #f3f4f6;
  border-radius: 0.25rem;
  overflow-wrap: anywhere;
}

/* Links: where to read more. They wrap rather than scroll sideways, so none is ever off-screen. */
.integration-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding-top: 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-top: 1px solid #f3f4f6;
}

.integration-panel__links a {
  color: #4f46e5;
  text-decoration: none;
}

.integration-panel__links a:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------------------------------------------
   Demo: an example that stays folded until asked for, so every panel is about the same height.
   --------------------------------------------------------------------------------------------------------------- */
.integration-demo {
  margin-top: 1.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
}

.integration-demo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #3730a3;
  cursor: pointer;
  list-style: none;
}

.integration-demo > summary::-webkit-details-marker {
  display: none;
}

.integration-demo > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.integration-demo[open] > summary::after {
  transform: rotate(-135deg);
}

.integration-demo > summary:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
  border-radius: 1rem;
}

.integration-demo__body {
  padding: 0 1.125rem 1.125rem;
}

/* The row above a demo's content: what it is, and the copy button where there is something to copy. */
.integration-demo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
}

.integration-demo__caption {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4338ca;
}

/* Demo tabs: the same tabs behaviour as the tiles, drawn as an underline. */
.integration-subtabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  border-bottom: 1px solid #e5e7eb;
  scrollbar-width: none;
}

.integration-subtabs::-webkit-scrollbar {
  display: none;
}

.integration-subtab {
  flex: none;
  padding: 0.5rem 0.875rem;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.integration-subtab:hover {
  color: #111827;
}

.integration-subtab:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}

.integration-subtab[aria-selected="true"] {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

.integration-subpanel[hidden] {
  display: none;
}

/* Code. The selectors are deliberately more specific than the Prism theme's pre[class*="language-"], which loads
   after this file, so the block keeps this look and its height cap. The text colour is set here as well as by the
   theme: the theme comes from a CDN, and without it the text would be black on this dark background. The theme's
   colours for the highlighted tokens still apply on top. */
.integration-demo pre.integration-code {
  max-height: 22rem;
  margin: 0;
  padding: 1rem 1.125rem;
  overflow: auto;
  background: #1e293b;
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.6);
}

.integration-demo pre.integration-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #e2e8f0;
  text-shadow: none;
}

.integration-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4f46e5;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.integration-copy:hover {
  background: #eef2ff;
}

.integration-copy:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.integration-copy svg {
  width: 1rem;
  height: 1rem;
}

.integration-copy.is-copied {
  color: #166534;
  background: #dcfce7;
  border-color: #bbf7d0;
}

/* ---------------------------------------------------------------------------------------------------------------
   Klaviyo demo: a sample order-confirmation email with the recommendations block in it. It imitates a merchant's
   email, not Flexsee's site, so its colours are its own.
   --------------------------------------------------------------------------------------------------------------- */
.email-preview {
  max-height: 34rem; /* tall enough to show the whole recommendations block; the sign-off and footer scroll */
  overflow: auto;
  font-family: "Inter", system-ui, sans-serif;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -18px rgba(17, 24, 39, 0.35);
}

.email-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid #f3f4f6;
}

.email-preview__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
}

.email-preview__brand small {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.email-preview__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 0.5rem;
}

.email-preview__mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.email-preview__kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
  color: #9ca3af;
}

.email-preview__body {
  padding: 1.5rem 1.25rem;
}

.email-preview__body > p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #6b7280;
}

.email-preview__body > p strong {
  color: #111827;
}

.email-preview__recs {
  margin: 1.25rem 0;
  padding: 1.125rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #6366f1;
  border-radius: 0.5rem;
}

.email-preview__recs-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.email-preview__recs-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #6366f1;
}

.email-preview__products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-preview__product {
  overflow: hidden;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-preview__product img {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
}

.email-preview__product-body {
  padding: 0.75rem;
}

.email-preview__product-name {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.email-preview__product-price {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #6366f1;
}

/* A span, not a link: this is a picture of an email, so nothing in it should look or act clickable. */
.email-preview__button {
  display: block;
  padding: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: #6366f1;
  border-radius: 0.375rem;
}

.email-preview__note {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: #6366f1;
}

.email-preview__footer {
  padding: 1rem 1.25rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  text-align: center;
  color: #9ca3af;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

@media (prefers-reduced-motion: reduce) {
  .integration-tab,
  .integration-demo > summary::after,
  .integration-copy {
    transition: none;
  }

  .integration-tab:hover {
    transform: none;
  }
}