/* ============================================================================
   The integration combination page.

   Structural class names only — nothing here knows what the product is or
   which two apps a page joins. Every colour, size and space is a theme token.

   This file replaces the 258 inline style attributes the generated pages used
   to carry. Inline styles cannot hold a media query, which is why those pages
   had no responsive behaviour at all; layout that has to change with the
   viewport has to live in a stylesheet.

   BREAKPOINTS (fixed across every site on this base — see theme.css):
     1024px  four-column grids drop to two
      768px  the side-by-side panels stack; single column throughout
      480px  type and padding step down again
   Design floor 320px.
   ========================================================================= */

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

.hero {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-5);
  text-align: center;
  overflow: hidden;
}

/* Decoration. It is the first thing to go when the viewport is short of
   room — it cannot be allowed to push the hero around. */
.hero-dots {
  position: absolute;
  top: var(--sp-6);
  width: 110px;
  height: 70px;
  pointer-events: none;
}
.hero-dots--l { left: 2%; color: rgba(91, 47, 224, .16); }
.hero-dots--r { top: 60px; right: 2%; color: rgba(255, 61, 110, .14); }

.hero-glow {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: 130%;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 47, 224, .10), rgba(91, 47, 224, 0) 70%);
  pointer-events: none;
}

.hero-inner { max-width: 960px; margin: 0 auto; position: relative; }

/* tile → arrow → tile. Stays horizontal at every width: at the 320px floor
   it measures 64 + 52 + 64 plus gaps, which fits. */
.hero-apps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.hero-app { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hero-tile {
  width: 92px;
  height: 92px;
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--sp-4);
  flex: none;
}
.hero-tile img, .hero-tile svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-app-name { font-size: 13px; font-weight: 600; color: var(--ink); }

.hero-swap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding-bottom: 26px;   /* lines the arrow up with the tiles, not the names */
}
.hero-swap-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brand);
  box-shadow: var(--sh-tile);
  flex: none;
}
.hero-swap-circle svg { animation: spin 3.5s linear infinite; }

.hero-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0 0 var(--sp-5);
  letter-spacing: -1px;
  text-wrap: balance;
}
.hero-title span { color: var(--ink); }

.hero-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0 auto var(--sp-8);
  font-weight: 400;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  min-height: var(--tap-min);
  cursor: pointer;
  text-decoration: none;
}
.btn--primary {
  background: var(--accent-grad);
  color: var(--on-brand);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-cta);
}
/* Explicit and higher-specificity than the global `a:hover` (base.css),
   which would otherwise repaint this link's text var(--accent) — nearly
   the same pink as this button's own background, hiding the label. */
.btn--primary:hover { color: var(--on-brand); }
.btn--brand {
  background: var(--brand-grad);
  color: var(--on-brand);
  padding: var(--sp-4) var(--sp-8);
  font-size: 15.5px;
  box-shadow: var(--sh-brand);
  transition: transform var(--ease), box-shadow var(--ease);
}
/* Explicit and higher-specificity than the global `a:hover` (base.css),
   which would otherwise repaint this link's text var(--accent) — pink,
   meant for the site's accent-coloured CTAs, not this brand-purple one. */
.btn--brand:hover {
  color: var(--on-brand);
  transform: translateY(-2px);
  box-shadow: var(--sh-brand-hover);
}
/* Not a link: the walkthrough is not recorded yet. Styled as a label so it
   never reads as something you can click. */
.btn--pending {
  background: var(--surface);
  border: 1px dashed var(--line-dashed);
  color: var(--faint);
  padding: 13px var(--sp-6) 13px var(--sp-4);
  cursor: default;
}
.btn--pending .btn-play {
  width: 40px;
  height: 28px;
  border-radius: 7px;
  background: #f1edfd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ===================== TRIGGERS & ACTIONS ===================== */

.io {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-panel);
  padding: var(--sp-11) var(--sp-10) var(--sp-12);
  margin-top: var(--sp-8);
  border: 1px solid rgba(22, 38, 74, .04);
}
.io .sec-sub { margin-bottom: var(--sp-8); }

.io-grid {
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  gap: 0;
}

.io-col { border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6) var(--sp-6); }
.io-col--trigger { border: 1px solid var(--line-soft); background: var(--panel-grad); }
.io-col--dest { border: 1px solid var(--line-strong); background: var(--panel-grad-2); }

.io-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: var(--sp-1);
}
.io-label--trigger { color: var(--brand); }
.io-label--dest { color: var(--brand-light); }
.io-note {
  text-align: center;
  color: var(--body);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-5);
}

/* --- trigger cards ------------------------------------------------------ */
.trigger-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.trigger {
  display: flex;
  gap: 13px;
  background: var(--surface-tint-2);
  border-radius: var(--r-md);
  padding: 14px var(--sp-4);
}
.trigger-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.trigger-title { font-weight: 600; font-size: var(--fs-base); }
.trigger-desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* --- the swap medallion ------------------------------------------------- */
.io-swap { display: flex; justify-content: center; }
.io-swap-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brand);
  box-shadow: var(--sh-swap);
  flex: none;
}

/* --- destination list ---------------------------------------------------
   Long lists collapse by HEIGHT, never display:none: search engines index
   content behind an accordion, they do not index content that is not
   rendered. Everything stays in the DOM at every width, and the expander
   below only changes how much of it you can see. */
.mod-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow: hidden;
  max-height: var(--mod-collapsed, none);
  transition: max-height .3s ease;
}
.mod-wrap[data-expanded="true"] .mod-list { max-height: var(--mod-full, 4000px); }

.mod {
  display: flex;
  gap: 11px;
  padding: 11px var(--sp-3);
  border-radius: 11px;
  background: var(--surface-tint);
}
.mod-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
  margin-top: 6px;
}
.mod-name { font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.mod-desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* How much of the list you see before the expander. One mechanism at every
   width; only the cap differs, so there is a single code path to reason
   about instead of a scroll panel on desktop and something else on a phone. */
.mod-wrap[data-collapsible="true"] { --mod-collapsed: 330px; }

/* Fades the clipped edge so it reads as "there is more", not as a bug. */
.mod-wrap { position: relative; }
.mod-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;          /* clears the expander button below it */
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
  pointer-events: none;
  transition: opacity .3s ease;
}
.mod-wrap[data-expanded="true"] .mod-fade { opacity: 0; }

.mod-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.mod-more:hover { border-color: var(--brand); }
.mod-more svg { transition: transform var(--ease); }
.mod-wrap[data-expanded="true"] .mod-more svg { transform: rotate(180deg); }

/* Without JavaScript nothing can expand, so nothing may be collapsed. */
.no-js .mod-list { max-height: none; }
.no-js .mod-more, .no-js .mod-fade { display: none; }

/* --- action cards ------------------------------------------------------- */
.io-actions {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.action {
  display: flex;
  gap: 14px;
  background: var(--surface-tint-3);
  border-radius: 14px;
  padding: var(--sp-5) var(--sp-5);
}
.action-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-light);
}
.action-title { font-weight: 700; font-size: var(--fs-md); }
.action-desc { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ===================== HOW TO INTEGRATE ===================== */

.steps { padding: var(--sp-11) 0 var(--sp-2); }
.steps .sec-head { margin-bottom: var(--sp-10); }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.step {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  border: 1px solid rgba(22, 38, 74, .04);
  padding: var(--sp-11) var(--sp-5) var(--sp-6);
  text-align: center;
}
.step-n {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-badge);
}
.step-icon {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 14px;
}
.step-toggle {
  width: 54px;
  height: 30px;
  border-radius: 15px;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3px;
}
.step-toggle i { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: block; }
.step-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step-desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* ===================== FEATURE BAR ===================== */

.features {
  background: var(--bar-grad);
  border-radius: 18px;
  padding: var(--sp-7) var(--sp-8);
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.feature { display: flex; gap: 13px; }
.feature-icon { flex: none; color: var(--feature-color, var(--brand)); }
.feature-title { font-weight: 700; font-size: var(--fs-base); }
.feature-desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* ===================== RELATED ===================== */

.related { padding: var(--sp-14) 0 var(--sp-2); }
.related-cta { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ===================== FAQ ===================== */

.faq { padding: var(--sp-14) 0 var(--sp-2); }
.faq-list {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq-item {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-soft);
  overflow: hidden;
}
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  min-height: var(--tap-min);
  text-align: left;
}
.faq-q { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.faq-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-tint-3);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform .22s ease;
}
.faq-toggle[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
/* Height is set by faq.js from the panel's real height — never a fixed cap,
   which clipped the longest answers on narrow screens. */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a { margin: 0; padding: 0 var(--sp-6) var(--sp-5); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.no-js .faq-panel { max-height: none; }

/* ============================================================================
   1024px — four across becomes two
   ========================================================================= */
@media (max-width: 1024px) {
  .io { padding: var(--sp-8) var(--sp-6) var(--sp-10); }
  .step-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) 14px; }
  .features { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .hero-tile { width: 80px; height: 80px; padding: 13px; }
}

/* ============================================================================
   768px — the two panels stack, everything goes single column
   ========================================================================= */
@media (max-width: 768px) {
  .hero { padding: var(--sp-6) 0 var(--sp-4); }
  .hero-dots { display: none; }
  .hero-lead { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .hero-actions .btn { width: 100%; }

  .io { padding: var(--sp-6) var(--sp-4) var(--sp-7); border-radius: var(--r-lg); }
  .io-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* the arrow now points down the page rather than across it */
  .io-swap { padding: var(--sp-1) 0; }
  .io-swap-circle { width: 48px; height: 48px; transform: rotate(90deg); }

  .action-grid { grid-template-columns: 1fr; }
  .mod-wrap[data-collapsible="true"] { --mod-collapsed: 288px; }
  .steps { padding: var(--sp-8) 0 var(--sp-2); }
  .step-grid { gap: var(--sp-6) var(--sp-3); }
  .features { padding: var(--sp-5) var(--sp-5); }
  .related, .faq { padding: var(--sp-10) 0 var(--sp-2); }
  .faq-toggle { padding: var(--sp-4) var(--sp-5); }
  .faq-a { padding: 0 var(--sp-5) var(--sp-4); }
}

/* ============================================================================
   480px — small phone
   ========================================================================= */
@media (max-width: 480px) {
  .hero-apps { gap: var(--sp-3); }
  .hero-tile { width: 64px; height: 64px; padding: 10px; border-radius: var(--r-lg); }
  .hero-swap { padding-bottom: 22px; }
  .hero-swap-circle { width: 42px; height: 42px; }
  .hero-swap-circle svg { width: 21px; height: 21px; }
  .hero-title { letter-spacing: -.4px; }

  .io { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
  .io-col { padding: var(--sp-4) var(--sp-3); }
  .mod-wrap[data-collapsible="true"] { --mod-collapsed: 264px; }
  .trigger { padding: var(--sp-3); gap: 11px; }
  .mod { padding: 10px 11px; }

  .step-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .step { padding: var(--sp-10) var(--sp-4) var(--sp-5); }
  .features { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
  .action { padding: var(--sp-4); }
  .faq-q { font-size: 14px; }
}