/* =============================================================
   ARK LABS — PARTNERS PAGE STYLES
   Per-page styles for /partners/. Uses design tokens from
   base.css. Keep navy + cyan dominant; white surfaces;
   light-blue + bg-warm alternating sections for rhythm.
   ============================================================= */

/* ============================================================
   1. HERO — two columns: copy + featured anchor spotlight
   ============================================================ */
.partners-hero {
  position: relative; overflow: hidden;
  padding: 96px 60px 80px;
  background: linear-gradient(180deg, var(--light-blue) 0%, #FFFFFF 100%);
}
.partners-hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,232,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.partners-hero-inner {
  max-width: 1200px; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.partners-hero h1 {
  font-size: 3.1em; font-weight: 800; color: var(--navy);
  line-height: 1.05; letter-spacing: -1px; margin: 12px 0 18px;
}
.partners-hero h1 .accent { color: var(--cyan); }
.partners-hero p.lede {
  font-size: 1.12em; color: var(--steel); line-height: 1.7; max-width: 600px;
  margin-bottom: 26px;
}
.partners-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }


/* ============================================================
   2. Generic section shell
   ============================================================ */
.partners-section { padding: 96px 60px; }
.partners-section.alt { background: var(--bg-warm); }
.partners-section.dark {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white;
}
.partners-section-inner { max-width: 1200px; margin: 0 auto; }
.partners-section-head { max-width: 780px; margin-bottom: 48px; }
.partners-section-head .section-title { font-size: 2.2em; }
.partners-section.dark .section-tag { color: var(--cyan); }
.partners-section.dark .section-title { color: white; }
.partners-section.dark .section-subtitle { color: rgba(255,255,255,0.7); }


/* ============================================================
   4. PARTNER TRACKS — 3 columns with distinct accent
   ============================================================ */
.tracks-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.track-card {
  background: white; border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px; position: relative; overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.track-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
.track-card:hover {
  transform: translateY(-3px); box-shadow: 0 18px 44px rgba(12,35,64,0.08);
  border-color: var(--cyan);
}
.track-card:hover::before { transform: scaleX(1); }
.track-card .track-num {
  font-size: 0.78em; font-weight: 700; color: var(--cyan);
  letter-spacing: 2px; margin-bottom: 14px;
}
.track-card .track-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--light-blue); color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; margin-bottom: 20px;
}
.track-card h3 {
  font-size: 1.35em; font-weight: 800; color: var(--navy);
  line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.2px;
}
.track-card .track-sub {
  font-size: 0.82em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 16px;
}
.track-card p {
  font-size: 0.95em; color: var(--steel); line-height: 1.65; margin-bottom: 20px;
}
.track-card ul {
  list-style: none; padding: 0; margin: 0 0 20px;
}
.track-card li {
  padding: 8px 0 8px 22px; position: relative;
  font-size: 0.9em; color: var(--navy); line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}
.track-card li:last-child { border-bottom: none; }
.track-card li::before {
  content: '\2713'; position: absolute; left: 0; top: 8px;
  color: var(--cyan); font-weight: 800;
}
.track-card .track-fit {
  font-size: 0.78em; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--light-blue);
  display: inline-block;
}

/* ============================================================
   5. BENEFITS — 2x2 grid with numbered quadrants
   ============================================================ */
.benefits-wrap {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start;
}
.benefits-copy h2 {
  font-size: 2em; font-weight: 800; color: var(--navy);
  line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.4px;
}
.benefits-copy h2 .accent { color: var(--cyan); }
.benefits-copy p {
  font-size: 1em; color: var(--steel); line-height: 1.7; margin-bottom: 16px;
}
.benefits-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.benefit-cell {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 22px; position: relative;
  transition: transform 0.25s, border-color 0.25s;
}
.benefit-cell:hover { transform: translateY(-2px); border-color: var(--cyan); }
.benefit-cell .b-num {
  font-size: 1.4em; font-weight: 900; color: var(--cyan);
  line-height: 1; margin-bottom: 12px;
  display: inline-block; padding-bottom: 8px;
  border-bottom: 3px solid var(--cyan);
}
.benefit-cell h4 {
  font-size: 1.05em; font-weight: 800; color: var(--navy);
  line-height: 1.3; margin-bottom: 8px;
}
.benefit-cell p {
  font-size: 0.88em; color: var(--steel); line-height: 1.6;
}

/* ============================================================
   6. ECOSYSTEM — current network / warm leads logo strip
   ============================================================ */
.ecosystem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.ecosystem-logo {
  aspect-ratio: 16 / 7;
  background: white; border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--navy); font-size: 1em; font-weight: 800;
  letter-spacing: 1.5px; text-align: center; padding: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ecosystem-logo:hover {
  border-color: var(--cyan); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(12,35,64,0.06);
}
.ecosystem-logo .status {
  display: block; font-size: 0.64em; font-weight: 600;
  color: var(--steel); margin-top: 8px; letter-spacing: 1px;
  text-transform: uppercase;
}
.ecosystem-logo.live .status { color: var(--green); }
.ecosystem-logo.warm .status { color: var(--amber); }

/* Redacted / under-NDA partners -- visible but obfuscated, hints at volume
   without revealing identity. */
.ecosystem-logo.redacted {
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
  border-style: dashed;
  cursor: default;
  user-select: none;
}
.ecosystem-logo.redacted:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.ecosystem-logo.redacted .blurred {
  filter: blur(7px);
  color: var(--navy);
  opacity: 0.55;
  font-size: 1em;
  letter-spacing: 1.5px;
  font-weight: 800;
  pointer-events: none;
}

/* Footnote beneath the ecosystem grid */
.ecosystem-note {
  text-align: center;
  margin-top: 28px;
  font-size: 0.9em;
  color: var(--steel);
  font-style: italic;
}

/* ============================================================
   7. HOW IT WORKS — diagonal numbered flow
   ============================================================ */
.flow-wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative;
}
.flow-step {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 28px 24px 30px;
  position: relative; transition: background 0.25s, border-color 0.25s;
}
.flow-step:hover {
  background: rgba(0,174,232,0.08); border-color: var(--cyan);
}
.flow-step .fs-num {
  position: absolute; top: -14px; left: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cyan); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9em; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,174,232,0.35);
}
.flow-step h4 {
  font-size: 1.1em; font-weight: 800; color: white;
  margin: 14px 0 10px; letter-spacing: -0.1px;
}
.flow-step p {
  font-size: 0.88em; color: rgba(255,255,255,0.7); line-height: 1.6;
}
.flow-step .fs-meta {
  margin-top: 14px; font-size: 0.72em; font-weight: 700;
  color: var(--cyan); text-transform: uppercase; letter-spacing: 1.4px;
}

/* ============================================================
   8. INQUIRY FORM — two columns, on light background
   ============================================================ */
.inquiry-wrap {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start;
}
.inquiry-copy h2 {
  font-size: 2.2em; font-weight: 800; color: var(--navy);
  line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.4px;
}
.inquiry-copy h2 .accent { color: var(--cyan); }
.inquiry-copy p { font-size: 1em; color: var(--steel); line-height: 1.7; margin-bottom: 20px; }

.inquiry-promise {
  margin-top: 28px; padding: 22px 24px;
  background: var(--light-blue); border-radius: 14px;
  border-left: 4px solid var(--cyan);
}
.inquiry-promise h5 {
  font-size: 0.78em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 1.6px; margin-bottom: 8px;
}
.inquiry-promise p {
  font-size: 0.95em; color: var(--navy); line-height: 1.6; margin-bottom: 0;
}

.inquiry-form {
  background: white; border: 1px solid var(--border); border-radius: 16px;
  padding: 32px; box-shadow: 0 16px 48px rgba(12,35,64,0.06);
}
.inquiry-form h3 {
  font-size: 1.15em; font-weight: 800; color: var(--navy); margin-bottom: 6px;
}
.inquiry-form .form-intro {
  font-size: 0.88em; color: var(--steel); margin-bottom: 20px; line-height: 1.55;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .partners-hero { padding: 72px 24px 56px; }
  .partners-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .partners-section { padding: 72px 24px; }
  .tracks-grid { grid-template-columns: 1fr; }
  .benefits-wrap { grid-template-columns: 1fr; gap: 36px; }
  .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-wrap { grid-template-columns: repeat(2, 1fr); }
  .inquiry-wrap { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .partners-hero h1 { font-size: 2.2em; letter-spacing: -0.4px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .flow-wrap { grid-template-columns: 1fr; }
  /* Inquiry form column blew out because the form's inputs have an
     intrinsic min-width that auto-expanded the 1fr column. */
  .inquiry-wrap { grid-template-columns: minmax(0, 1fr); }
  .inquiry-wrap > * { min-width: 0; }
  .inquiry-form { padding: 24px 20px; }
  .inquiry-copy h2 { font-size: 1.7em; letter-spacing: -0.2px; }
  .partners-section { padding: 56px 20px; }
  .partners-hero { padding: 56px 20px 40px; }
  .ecosystem-grid { grid-template-columns: 1fr; }
}