/* v2-connections.css — /connections page styles only.
   Ported from team-july2026-multipager/connections.html's inline <style>.
   Shared foundation (tokens, typography, buttons, .reveal, page ground)
   is v2-base.css, which loads first.
   Any rule below prefixed `body.v2` targets an element that also carries
   .container; global.css's `.container{padding:0 1.5rem}` (bundled later,
   equal specificity) would otherwise zero its padding-top.
*/
/* ═══════════════════════════════════════════════════════════════
     Connections — its own story: DEPTH (a connector is a live, two-way
     wire — Team reads AND writes back) + BREADTH (the marquee + full
     catalog) + it's GROWING. Not Overview's convergence. Shared elements
     (.phero__ask, .ui-dark) come from base.css.
     ═══════════════════════════════════════════════════════════════ */
  .ihero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:8rem;padding-bottom:2.5rem}
  .ihero .phero__in{max-width:54rem}
  .ihero .h1{font-size:clamp(3rem,7vw,5.8rem)}

  /* hero proof wall — gently scrolling marquee of monochrome logos */
  .wall{position:relative;align-self:stretch;margin-top:clamp(3rem,7vh,6rem);overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
  .wall__track{display:flex;align-items:center;width:max-content;animation:wallscroll 42s linear infinite}
  /* each copy is a self-contained group with a trailing gap, so translateX(-50%)
     equals exactly one group width — a truly seamless, endless loop */
  .wall__group{display:flex;align-items:center;gap:clamp(2rem,4vw,3.6rem);padding-right:clamp(2rem,4vw,3.6rem)}
  .wall:hover .wall__track{animation-play-state:paused}
  .wall .tile{display:grid;place-items:center;flex:none;opacity:.6;transition:opacity .35s var(--ease)}
  .wall .tile:hover{opacity:1}
  .wall .tile img{height:1.85rem;width:auto;max-width:6.5rem;object-fit:contain;display:block;filter:var(--wall-w)}
  .wall .tile img.mono{filter:var(--wall-m)}          /* colour logo → mono */
  @keyframes wallscroll{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.wall{-webkit-mask:none;mask:none}.wall__track{animation:none;width:auto}
    .wall__group{flex-wrap:wrap;justify-content:center;padding-right:0}.wall__group+.wall__group{display:none}}
  /* white-stored logos: keep white on dark, ink on light. colour logos: recolour to match. */
  :root{--wall-w:none;--wall-m:brightness(0) invert(1)}
  :root[data-theme="light"]{--wall-w:brightness(0);--wall-m:brightness(0)}

  /* ═══ SIGNATURE — a connector is a live, two-way wire ═══ */
  .wire{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
  @media(min-width:920px){.wire{grid-template-columns:.92fr 1.08fr}}
  .wire__copy h2{margin-bottom:1.1rem}
  .wire__pts{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.7rem}
  .wire__pts li{display:flex;gap:.7rem;align-items:flex-start;color:var(--bone-dim);font-size:.95rem;line-height:1.5}
  .wire__pts b{color:var(--bone);font-weight:560}
  .wire__pts .k{width:1.5rem;height:1.5rem;border-radius:7px;background:var(--ink-3);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:none;margin-top:.05rem}
  .wire__pts .k svg{width:.85rem;height:.85rem}
  /* the live feed panel (dark-locked product UI) */
  .feed{border-radius:20px;overflow:clip;box-shadow:0 30px 70px var(--shadow)}
  .feed__bar{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.2rem;border-bottom:1px solid var(--line);background:var(--ink-3)}
  .feed__bar .lg{width:1.7rem;height:1.7rem;border-radius:8px;background:#fbf9f4;display:grid;place-items:center;flex:none}
  .feed__bar .lg img{width:1.05rem;height:1.05rem}
  .feed__bar b{font-weight:560;color:var(--bone);font-size:.95rem}
  .feed__bar .live{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .feed__bar .live i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(217,250,135,.7);animation:blink 1.8s ease-in-out infinite}
  @keyframes blink{50%{opacity:.35}}
  .feed__body{background:var(--ink-2);padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
  .fev{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:.75rem .9rem;border:1px solid var(--line-2);border-radius:12px;background:var(--glass);
    opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .fev.in{opacity:1;transform:none}
  .fev__dir{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:.3em .5em;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:.3em;margin-top:.1rem}
  .fev__dir svg{width:.7rem;height:.7rem}
  .fev--in .fev__dir{color:var(--bone-dim);border:1px solid var(--line)}
  .fev--think .fev__dir{color:var(--bone-faint);border:1px solid var(--line-2)}
  .fev--out .fev__dir{color:var(--on-accent);background:var(--lime)}
  .fev__w{font-size:.9rem;color:var(--bone);line-height:1.4}
  .fev__w small{display:block;color:var(--bone-faint);font-family:var(--font-mono);font-size:.68rem;margin-top:.2rem}
  .fev--think .fev__w{color:var(--bone-dim)}

  /* ═══ DIRECTORY ═══ */
  .dir__tools{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 auto 2.6rem}
  .dchip{background:var(--glass);border:1px solid var(--line);color:var(--bone-dim);font-family:inherit;font-size:.85rem;padding:.5rem 1rem;border-radius:99px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .dchip:hover{color:var(--bone);border-color:var(--line-2)}
  .dchip.on{background:var(--lime);color:var(--on-accent);border-color:var(--lime);font-weight:560}
  .cat{margin-top:2.4rem}
  .cat__head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
  .cat__head .t{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .cat__head .n{color:var(--bone-faint);font-size:.82rem}
  .igrid{display:grid;gap:.9rem;grid-template-columns:1fr}
  @media(min-width:640px){.igrid{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.igrid{grid-template-columns:1fr 1fr 1fr}}
  .icard{position:relative;display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.15rem;border:1px solid var(--line);border-radius:15px;background:var(--glass);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,transform .3s,background .3s;overflow:hidden}
  .icard::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
  .icard:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--ink-2)}
  .icard:hover::after{opacity:.7}
  .icard--soon{opacity:.6}
  .icard__ic{width:2.5rem;height:2.5rem;border-radius:11px;background:#fbf9f4;display:grid;place-items:center;flex:none}
  .icard__ic img{width:1.5rem;height:1.5rem;object-fit:contain}
  .icard__mono{width:2.5rem;height:2.5rem;border-radius:11px;background:var(--ink-3);border:1px solid var(--line);display:grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--bone-dim)}
  .icard__b{min-width:0}
  .icard__top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
  .icard__top b{font-weight:560;font-size:.98rem;color:var(--bone)}
  .icard__live{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;box-shadow:0 0 8px rgba(217,250,135,.7);animation:blink 2s ease-in-out infinite}
  .icard__soon{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint);border:1px solid var(--line);border-radius:4px;padding:.15em .4em}
  .icard__d{color:var(--bone-dim);font-size:.85rem;line-height:1.45;margin-top:.25rem}

  /* ═══ GROWING / REQUEST ═══ */
  .grow{position:relative;overflow:hidden;text-align:center;max-width:52rem;margin:0 auto;padding:clamp(2.6rem,5vw,4rem) clamp(1.5rem,4vw,3.4rem);
    border:1px solid var(--line);border-radius:26px;background:var(--ink-2)}
  .grow::before{content:'';position:absolute;left:50%;top:-45%;width:130%;height:130%;transform:translateX(-50%);
    background:radial-gradient(ellipse 46% 42% at 50% 0%,var(--bloom),transparent 66%);pointer-events:none}
  .grow>*{position:relative}
  .grow__stat{display:flex;gap:2.4rem;justify-content:center;margin-bottom:1.6rem;flex-wrap:wrap}
  .grow__stat .s b{display:block;font-family:var(--font-display);font-weight:360;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.02em;color:var(--bone);line-height:1}
  .grow__stat .s span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
  .grow__stat .s b em{color:var(--accent);font-style:normal}
  .grow p{color:var(--bone-dim);margin:0 auto 1.7rem;max-width:36rem}

/* Logo fallback.
   The initial is painted by the wrapper and the <img> sits on top. When a logo
   file is missing the img removes itself (onerror) and the letter shows through
   — no broken-image glyph, no layout shift, and no dependence on a hand-kept
   list of which files exist. That list was wrong for 12 of 21 connectors. */
.icard__ic--fallback{position:relative;display:inline-flex;align-items:center;justify-content:center}
.icard__ic--fallback::before{content:attr(data-initial);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,inherit);font-weight:700;font-size:1.15rem;
  color:var(--bone-faint,rgba(239,235,227,.55));text-transform:uppercase}
.icard__ic--fallback img{position:relative;z-index:1}