/* ============================================================================
   connect.css — /connectors + /integrations in the lit system, layered on
   home.css primitives. Both pages share the shell: dark opening band (hero
   paper-on-ink), the stand line, then paper below — the catalog and the
   native-integration tiles as bordered paper tiles (third-party marks keep
   their own colors on paper; availability is a product fact, not a verified
   claim, so nothing here wears the green), the crows verify rows, the pilot
   close.
   NOT yet in build.py CACHE_BUST_ASSETS — register it there, then run
   python3 build.py (pages link /connect.css?v=1 until then).
   ========================================================================== */

/* ── the dark opening band ── */
.dhero{background:#0A0A0A;color:var(--p);padding:96px 0 120px;}
.dhero .eyebrow{color:var(--pl62);}
.dhero h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(37px,4vw,56px);line-height:1.06;letter-spacing:-.013em;margin:0;max-width:26ch;color:var(--p);}
.dhero h1 em{font-style:italic;}
.dhero .sub{color:var(--pl62);font-size:15.5px;line-height:1.65;max-width:62ch;margin:18px 0 0;}
.dhero .sub a{color:var(--p);font-weight:600;}
.dhero .sub a:hover{color:var(--pl62);}

/* ── back to paper ── */
#stand{padding:110px 0 0;}
#stand p{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.35;letter-spacing:-.006em;margin:0;max-width:34ch;color:var(--q);}
#stand p span{color:var(--i);}

.csec{padding:130px 0 0;}
.csec .k{font-size:12.5px;font-weight:500;color:var(--q);margin:0 0 14px;}
.csec h2{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(29px,3vw,40px);line-height:1.14;letter-spacing:-.008em;margin:0;max-width:26ch;}
.csec .sub{color:var(--q);font-size:15.5px;line-height:1.65;max-width:56ch;margin:18px 0 0;}
.csec .sub a{color:var(--i);font-weight:600;}

/* the catalog — category labels + bordered tiles; marks keep their colors */
.lgroup{font-size:12.5px;font-weight:500;color:var(--q);margin:44px 0 0;}
.lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:36px;}
.lgroup+.lgrid{margin-top:14px;}
.lcell{border:1px solid rgba(20,20,20,.18);border-radius:6px;padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:9px;}
.lcell img{width:28px;height:28px;object-fit:contain;}
.lcell span{font-size:11.5px;color:var(--q);text-align:center;line-height:1.3;}
.lgrid+.sub{margin-top:28px;}

/* native-integration tiles on paper */
.itiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px;}
.itile{border:1px solid rgba(20,20,20,.18);border-radius:6px;padding:24px 26px;}
.itile .tag{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--q);}
.itile h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:25px;line-height:1.15;margin:10px 0 0;}
.itile p{margin:10px 0 0;font-size:13.5px;line-height:1.62;color:var(--q);max-width:52ch;}

/* numbered rows */
.crows{margin-top:40px;border-top:1px solid rgba(20,20,20,.14);max-width:66ch;}
.crows .row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid rgba(20,20,20,.14);align-items:baseline;}
.crows .k{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--q);letter-spacing:.02em;}
.crows p{margin:0;font-size:15px;line-height:1.65;color:var(--q);}
.crows p b{color:var(--i);font-weight:600;}

/* pilot close tiles + CTAs */
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px;}
.ptiles .pt{border:1px solid rgba(20,20,20,.18);border-radius:6px;padding:22px 24px;font-size:13.5px;line-height:1.6;color:var(--q);}
.ptiles .pt strong{display:block;color:var(--i);font-weight:600;margin-bottom:8px;font-size:14.5px;}
#pilot .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center;}

@media (max-width:960px){
  .dhero{padding:56px 0 80px;}
  .csec{padding-top:96px;}
  #stand{padding-top:84px;}
  .lgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .itiles,.ptiles{grid-template-columns:minmax(0,1fr);}
  .crows .row{grid-template-columns:40px minmax(0,1fr);gap:14px;}
}