@import url('assets/sinq-base.css');

:root {
  --bas-teal: #07849a;
  --bas-mint: #6ed6c4;
  --bas-navy: #102f4a;
  --bas-sun: #f5b84b;
  --accent: #07849a;
  --accent2: #6ed6c4;
}

body.personalized-page {
  background:
    radial-gradient(900px 580px at 12% 4%, rgba(110, 214, 196, 0.22), transparent 58%),
    radial-gradient(900px 620px at 92% 8%, rgba(7, 132, 154, 0.18), transparent 58%),
    #f7fbff;
}

.cobrand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cobrand-logo img { width: auto; object-fit: contain; }
.cobrand-logo .sinq-mark { height: 42px; filter: brightness(0) invert(1); }
.cobrand-logo .bas-mark { height: 52px; background: white; border-radius: 16px; padding: 8px 12px; }
.cobrand-plus { color: rgba(255,255,255,.64); font-weight: 700; font-size: 1.2rem; }

.personalized-hero .landing-hero-grid {
  align-items: center;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, .97fr);
}

/* Tighten the personalized page so the dark workflow sections do not feel oversized. */
.personalized-page .section--dark.landing-section {
  padding: 54px 0;
}

.personalized-page #workflows {
  padding-top: 48px;
  padding-bottom: 54px;
}

.personalized-page .section--dark .section-intro {
  margin: -8px 0 14px;
  color: rgba(234, 242, 255, 0.78);
}

.personalized-page .section--dark .agent-card span {
  color: rgba(234, 242, 255, 0.68);
}

.personalized-page .landing-agent-grid {
  gap: 18px;
}

.personalized-page .agent-card {
  min-height: 220px;
}

.hero-proof-card {
  overflow: hidden;
  padding: 0;
  background: rgba(255,255,255,.92);
}
.hero-proof-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.hero-proof-card__body { padding: 24px; }
.hero-proof-card__logos { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hero-proof-card__logos img:first-child { height: 52px; width: auto; }
.hero-proof-card__logos img:last-child {
  height: 44px;
  width: auto;
  background: #061226;
  border-radius: 14px;
  padding: 8px 10px;
}
.hero-proof-card__logos span { color: rgba(16,47,74,.42); font-weight: 800; }

.bas-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7,132,154,.11);
  color: var(--bas-navy);
  border: 1px solid rgba(7,132,154,.20);
  font-weight: 700;
  margin: 6px 6px 0 0;
}

.workflow-card strong, .roi-card strong { color: var(--bas-teal); }
.workflow-card .agent-icon { background: rgba(7,132,154,.12); color: var(--bas-teal); }

.before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.before-after .card { height: 100%; }
.before-after h3 { display: flex; align-items: center; gap: 10px; }
.before-after .pain h3 i { color: #e36b5c; }
.before-after .relief h3 i { color: var(--bas-teal); }

.mini-case {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.mini-case div {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.mini-case strong { display: block; color: white; margin-bottom: 6px; }
.mini-case span { color: rgba(234,242,255,.78); }

.logo-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.logo-strip img { background: white; border-radius: 18px; padding: 10px 14px; max-height: 66px; width: auto; box-shadow: var(--shadow); }
.logo-strip img[src*="sinq-logo"] {
  background: #061226;
  padding: 12px 16px;
}
.logo-strip .plus { font-size: 1.8rem; color: rgba(11,27,51,.38); font-weight: 800; }

.contact .contact-form form[method="post"] { margin: 0; }
.form-note { color: rgba(234,242,255,.70); font-size: .92rem; margin-top: 12px; }

@media (max-width: 860px) {
  .personalized-hero .landing-hero-grid, .before-after, .mini-case { grid-template-columns: 1fr; }
  .cobrand-logo .bas-mark { height: 44px; }
  .cobrand-logo .sinq-mark { height: 34px; }
  .cobrand-plus { display: none; }
}