/* The /integrations/<slug> pages (2026-10): loaded on top of marketing-glossary.css by
   [slug].astro only (Reading integrationCss), so the glossary, guides and blog are unchanged.
   Every selector is under .ig. The copy is the page's own; this is layout: a hero with the
   menu icon and a connection strip, direction pills on the "What moves" table, numbered steps,
   check / limit tiles, and the other integrations at the foot. Motion: the strip's dots, and
   sections fading in where scroll-driven animation exists; both off under reduced motion. */

.doc.ig{max-width:1040px}
.ig>p,.ig>.definition,.ig>.related,.ig>.cta{max-width:820px}
.ig h2{scroll-margin-top:96px}

/* Hero */
.ig-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:24px 40px;align-items:center;margin:0 0 30px}
.ig-title{display:flex;gap:20px;align-items:center;min-width:0}
.ig-badge{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:20px;background:color-mix(in srgb,var(--amber) 13%,var(--s1));border:1px solid color-mix(in srgb,var(--amber) 35%,var(--bdr));color:var(--accent-text);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--amber) 45%,transparent)}
.ig-badge .pg-ico{width:38px;height:38px}
.doc.ig .ig-title h1{margin:0}
.ig-title .crumb{margin-bottom:10px}

.ig-link{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:12px;padding:22px 20px;border-radius:16px;background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--amber) 8%,var(--s1)),var(--s1));border:1px solid var(--bdr)}
.ig-node{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;max-width:130px;text-align:center}
.ig-dot{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--bg);border:1px solid var(--bdr);color:var(--accent-text)}
.ig-dot svg{width:28px;height:28px}
.ig-ec .ig-dot{border-color:color-mix(in srgb,var(--amber) 55%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--amber) 9%,transparent),0 0 26px color-mix(in srgb,var(--amber) 28%,transparent)}
.ig-ec .ig-dot svg{width:38px;height:38px;color:var(--accent-text)}
.ig-lbl{font:700 13px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
.ig-lanes{display:flex;flex-direction:column;gap:12px;min-width:0}
.ig-lane{position:relative;display:block;height:12px;container-type:inline-size}
.ig-lane::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed color-mix(in srgb,var(--amber) 45%,transparent)}
.ig-lane::after{content:"";position:absolute;top:50%;width:7px;height:7px;border:solid var(--amber);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);right:-1px}
.ig-lane-in::after{right:auto;left:-1px;transform:translateY(-50%) rotate(-135deg)}
.ig-lane i{position:absolute;top:1px;left:0;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px color-mix(in srgb,var(--amber) 70%,transparent)}
.ig-lane i:nth-child(1){transform:translateX(calc(15cqi - 5px))}
.ig-lane i:nth-child(2){transform:translateX(calc(50cqi - 5px))}
.ig-lane i:nth-child(3){transform:translateX(calc(85cqi - 5px))}
.ig-lane-in i{background:#FEF3C7;box-shadow:0 0 10px rgba(254,243,199,.55)}
body.light-mode .ig-lane-in i{background:#C2410C;box-shadow:none}

/* Tables: the reading shell's grid, softened. The "What moves" table (.ig-moves) gets a
   direction pill and becomes one card per row on a phone. */
.doc.ig table{display:table;border-collapse:separate;border-spacing:0;border:1px solid var(--bdr);border-radius:12px;overflow:hidden;background:var(--s1);margin:6px 0 24px}
.doc.ig th,.doc.ig td{border:0;border-top:1px solid var(--bdr);padding:13px 16px}
.doc.ig thead th{border-top:0;background:color-mix(in srgb,var(--amber) 7%,var(--s1));color:var(--txt)}
.doc.ig tbody tr:hover td{background:color-mix(in srgb,var(--txt) 3%,transparent)}
.doc.ig td:first-child{color:var(--txt)}
.doc.ig td.ig-dir{white-space:nowrap}
/* A label, not words: the cell already says which way, so the pill is hidden from screen readers (alt text ""). */
td.ig-dir::before{display:inline-block;min-width:34px;margin-right:9px;padding:2px 7px;border-radius:999px;font:700 11px/1.5 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-align:center;vertical-align:1px}
td.ig-out::before{content:"OUT" / "";background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--accent-text)}
td.ig-in::before{content:"IN" / "";background:color-mix(in srgb,var(--txt) 10%,transparent);color:var(--txt)}
@media(max-width:900px){.doc.ig td.ig-dir{white-space:normal}}

/* Numbered steps along a road */
.ig ol{list-style:none;counter-reset:ig;padding:0!important;margin:10px 0 26px!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;position:relative}
.ig ol::before{content:"";position:absolute;left:22px;right:22px;top:21px;border-top:2px dashed color-mix(in srgb,var(--amber) 40%,transparent)}
.ig ol li{counter-increment:ig;position:relative;margin:0;font-size:15px;line-height:1.5}
.ig ol li::before{content:counter(ig);display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:var(--bg);border:2px solid var(--amber);color:var(--accent-text);font:800 19px 'Barlow Condensed',sans-serif;position:relative}
.ig ol li strong{display:block;font:800 19px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px}

/* Tiles: checks (what it protects), limits (what it does not do), plain */
.ig .ig-checks,.ig .ig-limits,.ig .ig-tiles{list-style:none;padding:0!important;margin:8px 0 26px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ig :is(.ig-checks,.ig-limits,.ig-tiles):has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ig .ig-checks li,.ig .ig-limits li,.ig .ig-tiles li{margin:0;padding:18px 20px;border-radius:12px;font-size:15px;line-height:1.55}
.ig .ig-checks li,.ig .ig-tiles li{background:var(--s1);border:1px solid var(--bdr)}
.ig .ig-checks li{position:relative;padding-left:56px}
.ig .ig-checks li::before{content:"✓";position:absolute;left:18px;top:17px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--accent-text);font-weight:800;font-size:14px}
.ig .ig-limits li{border:1px dashed var(--bdr);background:transparent}
.ig .ig-tiles li{border-top:3px solid var(--amber)}
.ig .ig-checks strong,.ig .ig-limits strong,.ig .ig-tiles strong{display:block;margin-bottom:4px;font-size:16px}
.ig .ig-limits strong{color:var(--sub)}
/* Bold that opens a sentence rather than titling it stays in the line (class on the li). */
.ig .ig-inline strong{display:inline;font-size:inherit}
.ig .ig-tiles code{overflow-wrap:anywhere}

/* Other integrations */
.ig-more{margin:56px 0 0}
.doc .ig-more h2{margin-top:0}
.ig-more ul{list-style:none;padding:0!important;margin:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ig-more li{margin:0}
.doc .ig-more a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;height:100%;padding:14px 16px;border-radius:12px;background:var(--s1);border:1px solid var(--bdr);text-decoration:none;transition:border-color .2s,transform .2s}
.doc .ig-more a:hover{border-color:var(--amber);transform:translateY(-2px)}
.ig-more .pg-ico{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:10px;background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--accent-text)}
.ig-more b{font:700 17px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:var(--txt);align-self:end}
.ig-more span{font-size:13px;line-height:1.35;color:var(--mut)}

@media(max-width:900px){
  .ig-hero{grid-template-columns:1fr}
  .ig-link{max-width:520px}
}
@media(max-width:640px){
  .ig-badge{width:58px;height:58px;border-radius:16px}
  .ig-badge .pg-ico{width:30px;height:30px}
  .ig-title{align-items:flex-start;gap:14px}
  .ig .ig-checks,.ig .ig-limits,.ig .ig-tiles,.ig :is(.ig-checks,.ig-limits,.ig-tiles):has(>li:nth-child(3):last-child){grid-template-columns:1fr}
  .ig ol{grid-template-columns:1fr;gap:18px}
  .ig ol::before{left:21px;right:auto;top:22px;bottom:22px;border-top:0;border-left:2px dashed color-mix(in srgb,var(--amber) 40%,transparent)}
  .ig ol li{padding-left:62px;min-height:44px}
  .ig ol li::before{position:absolute;left:0;top:0;margin:0}
  /* Other tables scroll inside their own box, as in the reading shell */
  .doc.ig table:not(.ig-moves){display:block;overflow-x:auto}
  /* One card per row: the record, its direction, then what happens */
  .doc.ig table.ig-moves,.ig-moves tbody,.ig-moves tr,.ig-moves td{display:block}
  .doc.ig table.ig-moves{border:0;background:none;overflow:visible}
  .ig-moves thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ig-moves tr{border:1px solid var(--bdr);border-radius:12px;background:var(--s1);margin:0 0 10px;padding:12px 14px}
  .doc.ig .ig-moves td{border:0;padding:3px 0}
  .doc.ig .ig-moves td.ig-dir{font-size:13px;color:var(--mut)}
}

@media(prefers-reduced-motion:no-preference){
  .ig-lane i{animation:ig-run 3.6s linear infinite}
  .ig-lane i:nth-child(1){animation-delay:0s}
  .ig-lane i:nth-child(2){animation-delay:-1.2s}
  .ig-lane i:nth-child(3){animation-delay:-2.4s}
  .ig-lane-in i{animation-name:ig-back}
  @supports (animation-timeline:view()){
    .ig>h2,.ig>table,.ig>ol,.ig>ul,.ig>p,.ig-more{animation:ig-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes ig-run{from{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateX(calc(100cqi - 10px));opacity:0}}
@keyframes ig-back{from{transform:translateX(calc(100cqi - 10px));opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateX(0);opacity:0}}
@keyframes ig-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}