/* laundrify website-v2 — /features/integrations leaf (page-specific)
   Layered on home.css, the shared component library (tokens, header/footer, .btn, .kicker,
   .grad, .sec/.sec-head, .lede/.sub, .sec-divider). This file adds only what this leaf needs.

   Through-line: the INTEGRATION HUB. The laundrify Adapter at the centre, the four platform logos
   riding two crossed 3D orbit rings — the .vz-hub idiom (home feature-card + Features dropdown)
   raised to hero scale, lifted by the sanctioned hero glow. Motion is restrained (the glow
   breathes); the §3 matrix is the page's "datasheet" beat — everything quiet around the hub. */

/* ============================================================================
   §1 HERO — split: copy left, the live hub right (no CTA: leaf-page rule)
   ============================================================================ */
.hero-intg{padding-bottom:56px}
.hero-intg h1{font-size:clamp(33px,4.6vw,54px)}
.hero-intg .lede{max-width:42ch}

/* the hub box: aspect locked to the orbits viewBox (420/360) so the %-positioned satellite nodes
   land exactly on the SVG ellipse endpoints at any width. Lifted by the sanctioned hero glow (§6). */
.ih-hub{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:420/360}
.ih-glow{position:absolute;z-index:0;left:50%;top:50%;width:52%;height:52%;translate:-50% -50%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(113,174,248,.32),transparent 72%);
  filter:blur(10px);animation:ih-breathe 4.6s ease-in-out infinite}
@keyframes ih-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}

/* the two crossed orbit ellipses + the central Adapter "planet". Far arcs sit behind the planet
   (occluded), near arcs in front (Saturn-ring crossing) → the 3D read. overflow:visible so the
   planet's soft shadow isn't clipped. */
.ih-orbits{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.ih-orbits path{fill:none;stroke-linecap:round;stroke:var(--active)}  /* darker system blue, subtle */
.orb-far path{stroke-width:1.2;opacity:.22}   /* behind (bottom): thinner + faded = depth */
.orb-near path{stroke-width:1.4;opacity:.45}  /* in front (top): a touch fuller, no glow */
.ih-planet{fill:#fff;stroke:#d6ebff;stroke-width:1.5;
  filter:drop-shadow(0 14px 26px rgba(44,65,91,.28))}
.ih-mark{pointer-events:none}

/* satellite nodes — white circular chips holding the real logos, riding the orbit endpoints
   (the .vz-hub .node DNA, hero-sized). Always on top, so a logo is never occluded by its ring. */
.ih-node{position:absolute;z-index:2;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);border-radius:50%;
  box-shadow:0 12px 28px -14px rgba(44,65,91,.42),0 2px 5px rgba(44,65,91,.06)}
.ih-node img{display:block;width:62%;height:62%;object-fit:contain}
.ih-node.sat{width:17.5%;aspect-ratio:1;translate:-50% -50%}
.s-alexa{left:18.7%;top:28.9%}
.s-google{left:81.3%;top:28.9%}
.s-ha{left:18.7%;top:71.1%}
.s-hb{left:81.3%;top:71.1%}

/* ============================================================================
   §2 DIE VIER INTEGRATIONEN — 2×2 highlight cards (paper)
   ============================================================================ */
.intg-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
/* white card with the locked subtle grey gradient border (lit from above-left) — richer than the
   plain hairline xref card, but without the feature-grid's cursor-ring signature */
.intg-card{position:relative;border:1px solid transparent;border-radius:var(--r-lg);
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 2px 8px rgba(44,65,91,.04);padding:26px 28px 28px;
  transition:transform .18s,box-shadow .18s;scroll-margin-top:96px}
.intg-card:hover{transform:translateY(-2px);box-shadow:0 24px 52px -30px rgba(44,65,91,.45)}
/* logo well: height-normalised so the symbols (and the alexa wordmark) sit on one baseline */
.intg-logo{height:30px;display:flex;align-items:center;margin-bottom:16px}
.intg-logo img{height:100%;width:auto;display:block}
.intg-card h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.015em;
  color:var(--ink);margin:0}
.intg-card p{margin:9px 0 0;font-size:14px;color:var(--mut);line-height:1.55}

/* ============================================================================
   §3 CAPABILITY-MATRIX — "Was kann wo?" (white band; datasheet voice)
   ============================================================================ */
/* overflow-x:clip contains the fixed-width table: a sized <table> propagates its width into the
   document's scrollable region even though .cm-scroll scrolls it visually — clipping at the section
   stops that (else a phantom horizontal page scrollbar appears when the table > viewport). */
.matrix-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:90px 0;position:relative;overflow-x:clip}

/* compact legend above the table */
.cm-legend{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0 0 22px;font-size:12.5px;color:var(--mut)}
.cm-lg{display:inline-flex;align-items:center;gap:7px}
.cm-legend .cm-yes{width:20px;height:20px}
.cm-legend .cm-no{font-size:16px}
.cm-part-dot{color:var(--active);font-weight:900;font-size:18px;line-height:0}

.cm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* fixed layout so the platform columns size by rule, not by header text length; the table fits a
   compact content width and is centred on the page (scrolls on viewports narrower than it). */
.cap-matrix{border-collapse:collapse;font-family:var(--body);text-align:center;
  table-layout:fixed;width:900px;margin:0}
.cap-matrix th,.cap-matrix td{padding:15px 12px;vertical-align:middle}
.cap-matrix thead th{vertical-align:bottom;padding-bottom:16px}
.cap-matrix thead tr{border-bottom:2px solid var(--line)}
.cap-matrix tbody tr+tr{border-top:1px solid var(--line)}

/* first column = the capability (left-aligned, the widest track; extra right gap before the App col) */
.cap-matrix .cap{text-align:left;width:30%;font-family:var(--body);padding-right:30px}
.cap-matrix th.cap{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.cap-matrix thead th.cap{font-weight:700}
.cap-sub{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:3px;letter-spacing:.01em}

/* App column = the highlighted baseline (the most complete view) */
.cap-matrix .col-app{background:rgba(113,174,248,.07)}
.cap-matrix thead .col-app{border-bottom-color:var(--active)}
/* widths: wide label column, then App + the 4 integrations all equal (30 + 5·14 = 100) */
.cap-matrix thead th:nth-child(n+2){width:14%}

/* header cells: small logo above the label (static — no longer linked to the §2 cards) */
.cm-h{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink)}
.cm-logo{height:22px;width:auto;max-width:54px;object-fit:contain}
.cm-logo.mark{height:24px}
.cm-h .l{font-size:12.5px;font-weight:700;line-height:1.15}
.cm-base{display:block;margin-top:5px;font-size:9.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--active)}

/* cells: yes = soft green disc + check (the .np-pt-ico.ok DNA); no/na = quiet dash;
   part = small qualifier text (color carries no meaning alone — shapes + text differ) */
.cm-yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(118,199,133,.16);color:#4fa863}
.cm-yes svg{width:13px;height:13px;display:block}
.cm-no,.cm-na{display:inline-block;color:var(--faint);font-weight:700;font-size:17px;line-height:1}
.cm-part{display:inline-block;font-size:12px;font-weight:500;color:var(--mut);line-height:1.3;max-width:14ch}
.cm-part .q{color:var(--faint)}
/* the "eingeschränkt/indirekt" marker (matches the legend's ·) — on its own line above the text */
.cm-part .cm-part-dot{display:block;font-size:16px;line-height:1;margin:0 0 3px}
.cap-matrix sup{font-size:9px;font-weight:700;color:var(--active);margin-left:1px}

.cm-notes{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:5px;max-width:62ch;
  font-size:12.5px;color:var(--mut);line-height:1.5}
.cm-notes sup{font-size:9px;font-weight:700;color:var(--active);margin-right:3px}

/* ============================================================================
   §4 CROSS-LINKS — two "what's next" cards (shared .xref pattern from the leaves)
   ============================================================================ */
.xref-sec .kicker{margin-bottom:22px}
.xref-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xref{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.xref:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 22px 48px -26px rgba(44,65,91,.4)}
.xref h3{font-size:19px;letter-spacing:-.015em;margin:0;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px}
.xref h3 .ico{color:var(--active);font-size:17px;transition:transform .18s}
.xref:hover h3 .ico{transform:translateX(3px)}
.xref p{margin:9px 0 0;font-size:14px;color:var(--mut);line-height:1.55}

/* ============================================================================
   §5 SLIM CLOSING CTA — button-less dark sign-off (shared .cta-slim pattern)
   ============================================================================ */
.cta-slim{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.cta-slim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 50% -45%,rgba(113,174,248,.18),transparent 64%)}
.cta-slim .wrap{position:relative;display:flex;justify-content:center;text-align:center;padding:42px 24px}
.cta-slim h2{font-size:clamp(23px,2.7vw,32px);font-weight:900;color:#fff;margin:0;letter-spacing:-.015em}
.cta-slim .grad{background:linear-gradient(96deg,#8cc0ff,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================================
   responsive
   ============================================================================ */
@media (max-width:880px){
  /* .hero-grid stacks (home.css). Show the hub first on mobile (matches the other leaves). */
  .hero-intg{padding-bottom:20px}
  .ih-hub{order:-1;max-width:360px}
  /* §2 cards stack two→one */
  .intg-grid{grid-template-columns:1fr}
  /* §4 cross-links stack */
  .xref-grid{grid-template-columns:1fr}
}
/* matrix on mobile: compact + NON-sticky + horizontally scrollable — the label column plus
   ~3 platform columns are visible at once (the desktop 900px width is far too wide to pin a
   column here; pinning a ~270px label swallowed the viewport). */
@media (max-width:760px){
  .cap-matrix{width:460px}                          /* compact: label 115 + 5·69 → label + 3 cols fit */
  /* label column pinned while the platform columns scroll under it (opaque bg + hairline edge) */
  .cap-matrix .cap{width:25%;padding-right:12px;position:sticky;left:0;background:#fff;
    box-shadow:1px 0 0 var(--line)}
  .cap-matrix thead .cap{z-index:2}
  .cap-matrix tbody .cap{z-index:1}
  .cap-matrix thead th:nth-child(n+2){width:15%}
  /* smaller type + tighter rows = more content on screen */
  .cap-matrix th,.cap-matrix td{padding:11px 7px;overflow-wrap:break-word}
  .cap-matrix th.cap{font-size:12.5px}
  .cap-sub{font-size:10px;margin-top:2px}
  .cm-h .l{font-size:10.5px}                          /* also lets Homebridge / Home Assistant wrap cleanly */
  .cm-part{font-size:10.5px}
  .cm-yes{width:20px;height:20px}
  .cm-yes svg{width:11px;height:11px}
  .cm-no,.cm-na{font-size:14px}
  .matrix-sec{padding:68px 0}
}
@media (max-width:520px){
  .intg-grid{gap:16px}
}