/* UbarTab product page — extends indinuity-home.css (loaded first).
   Re-themes the shared component set (hero, sect-head, cards, buttons) from
   Indinuity cyan to UbarTab's established brand rose (already used for the
   .product-icon.ubartab gradient on the Indinuity homepage) by overriding the
   same custom properties within this page's scope. New rules below are only
   the handful of components the shared stylesheet doesn't already have. */

body.ubartab-page {
  --cyan:        #E0556C;
  --cyan-bright: #EC7E90;
  --cyan-deep:   #B83452;
  --teal-dark:   #7A2438;
}

/* The hero wash and grid pattern are hardcoded to Indinuity's blue in the
   shared stylesheet rather than var-driven, so they need an explicit swap. */
body.ubartab-page .hero {
  background:
    radial-gradient(1100px 600px at 75% 20%, rgba(224,85,108,0.10), transparent 60%),
    radial-gradient(900px 500px at 15% 90%, rgba(184,52,82,0.12), transparent 60%),
    var(--navy);
}
body.ubartab-page .hero .grid-bg {
  background-image:
    linear-gradient(rgba(224,85,108,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,85,108,0.05) 1px, transparent 1px);
}

/* ─── How it works — numbered step flow ─── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--teal-dark);
  color: var(--teal-dark);
  font-family: var(--mono);
  font-size: 13px;
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink-text);
}
.step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-text-dim);
  margin: 0;
}

/* ─── Vertical cards — same visual language as .product-card, without the
   badge/chips/external-link furniture those need. ─── */
.vertical-card .product-name { font-size: 26px; margin-bottom: 10px; }
.vertical-card .product-desc { margin-bottom: 0; }

/* ─── "Just shipped" grid — 4 cards. The shared .services-grid defaults to
   3 columns (built for 6 service cards site-wide), which leaves 2 empty
   cells on this page's second row. Force an even 2x2 here instead. ─── */
#platform .services-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 540px) { #platform .services-grid { grid-template-columns: 1fr; } }

/* ─── Hero brand mark — the actual UbarTab logo, paired with the eyebrow.
   The logo's dark-plum stroke is illegible on the navy hero, so it's reversed
   to the page's light text color here; the rose bar reuses the themed accent. ─── */
.hero-brand { display: flex; align-items: center; gap: 10px; }
.hero-logo-mark { flex: 0 0 auto; display: block; }