/* integrations.css: /integrations (CORE-749, 22.10.2026), since CORE-755 also /discovery and /payments,
   which reuse the same light hero, .ig-split sections and chips.
   A page stylesheet on purpose, like trust.css (CORE-747): every page loads styles.css and the
   asset budget (scripts/check-asset-budget.mjs) leaves almost no room there. Since Tobi's review
   of 22.10.2026 ("weniger KI-mäßig", "warum sind die Mockups schwarz") the page is light and plain
   like /platform/*: the hero shows the real import screen in the shared .device frame, the
   sections reuse .pl-ch__rows from styles.css. No mock scenes, glows or gradient plates.
   Risks / what goes stale silently: the copy names the export contents (DATEV booking batch EXTF,
   invoice, credit note and open-item lists, receipt PDFs) and the import formats PDF, JPG/PNG,
   XLSX, CSV, XML. When apps/web accountant-export.ts or packages/domain import-upload-limits.ts
   change, edit integrations.html and the ig.* keys too. The hero screenshot
   (assets/screenshots/platform/brand-import.jpg) is shared with platform/brands.html. */

/* ---------- text beside a list or a screen ---------- */
.ig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.ig-split--top { align-items: start; }
.ig-split .section-head { margin-bottom: 0; }
.ig-split > .pl-ch__rows { margin-top: 0; max-width: 52ch; }
.ig-hero .ig-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 4.5vw, 72px); }
/* CORE-755 (/payments): a mirrored split, screen on the left from 861px. The text stays first in the markup,
   so stacked on tablet and phone it still reads text, then screen. */
@media (min-width: 861px) {
  .ig-split--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ig-split--flip > .device { order: -1; }
}

/* ---------- format chips: flat, light ---------- */
.ig-formats__h { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: #101010; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ig-chips li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 16px; border-radius: 999px; background: rgba(13,13,13,0.07);
  font-size: 14.5px; font-weight: 600; color: #101010; }
.ig-chips__sub { font-weight: 500; color: #4a4a4a; } /* about 6:1 on the chip */

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
  .ig-split, .ig-hero .ig-split { grid-template-columns: minmax(0, 1fr); }
  .ig-split { gap: 28px; }
  /* stacked sections keep one alignment: a centred column, everything inside it left-aligned */
  .container.ig-col { max-width: 628px; }
  .ig-col .section-head, .ig-col .section-head > :is(h2, p) { margin-left: 0; margin-right: 0; text-align: left; }
}

/* The device's ground shadow (30px down, 70px blur) reaches ~100px below the frame; .svc-hero clips its overflow and
   cut it to a hard line (Tobi 22.10.2026: "der Schatten ist so abgeschnitten"). Nothing in this hero is wider than
   the container, so it may overflow. */
.ig-hero { overflow: visible; }

/* ---------- /integrations #forward and #export: two different shapes (Tobi 22.10.2026: "warum zweimal das Gleiche
   untereinander") ----------
   #forward: heading on top, the three ways in as open columns on the page ground: line icon, title, sentence. No plates,
   no frames, no numbers; stacked on tablet and phone. #export keeps a split, mirrored: list left, heading right from
   861px (heading stays first in the markup, so stacked it still reads heading, then list). #setup further down stays
   the plain split, so the page alternates. Motion is the shared .reveal (reduced motion handled in styles.css). */
.ig-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.ig-ways li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 36ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ig-ways svg { width: 26px; height: 26px; margin-bottom: 12px; color: #101010; }
.ig-ways b { font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: #101010; }
@media (min-width: 861px) {
  .ig-split--list-first { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ig-split--list-first > .pl-ch__rows { order: -1; }
}
@media (max-width: 860px) {
  .ig-ways { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ---------- "Today …" statement, shared by /payments and /discovery (CORE-755, 22.10.2026) ----------
   Moved here from payments.css (was .pay-mess) so both pages carry the same section (Tobi: "passt nicht zur Seite").
   Statement left, sticky on wide screens (plain scrolling, works with wheel, touchpad and touch), the pain lines on the
   right as large muted lines without bullets that fade as the pile grows; the last line lands in full weight.
   Motion is the shared .reveal stagger in the markup. Keep five lines: the fade ladder covers four plus the last. */
.ig-today__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ig-today__h { margin: 0; position: sticky; top: 120px; font-family: var(--font-display); font-weight: var(--section-weight);
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; color: #101010; }
.ig-today__list { list-style: none; margin: 0; padding: 0; }
.ig-today__list li { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.2;
  letter-spacing: -0.015em; color: #101010; text-wrap: balance; }
.ig-today__list li + li { margin-top: clamp(28px, 6vh, 56px); }
.ig-today__list li:nth-child(1) { color: rgba(16,16,16,0.62); }
.ig-today__list li:nth-child(2) { color: rgba(16,16,16,0.54); }
.ig-today__list li:nth-child(3) { color: rgba(16,16,16,0.47); }
.ig-today__list li:nth-child(4) { color: rgba(16,16,16,0.42); }
.ig-today__list .ig-today__last { color: #101010; font-weight: 400; }
@media (max-width: 860px) {
  .ig-today__grid { grid-template-columns: minmax(0, 1fr); max-width: 628px; }
  .ig-today__h { position: static; }
}