/* ═══════════════════════════════════════════════════════════════════════
   Platform - carrying the site's language
   ═══════════════════════════════════════════════════════════════════════
   The longest page on the site: a dozen sections explaining what the
   product is. Pages this long fail by shouting section after section until
   nothing stands out, so the work here is rhythm and restraint - one
   continuous ground, hairline separators, light-weight headings, and a
   single accent used consistently.

   Scoped to body.platform-page and loaded after platform.page.css, which
   it deliberately overrides.
   ═════════════════════════════════════════════════════════════════════ */

.platform-page {
  --pf-void:  #07070C;
  --pf-lilac: #A78BFA;
  --pf-deep:  #7C3AED;
  --pf-ice:   #EEEDFF;
  --pf-mute:  rgba(238, 237, 255, .56);
  --pf-faint: rgba(238, 237, 255, .34);
  --pf-line:  rgba(238, 237, 255, .08);

  background: var(--pf-void);
  color: var(--pf-ice);
}

/* ── One continuous ground ─────────────────────────────────────────── */

.platform-page > section {
  position: relative;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: clamp(68px, 8.5vw, 112px) 0;
}

/* The only separator between sections: one hairline, fading at the ends. */
.platform-page > section + section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .22), transparent);
}

/* Light pools behind each section head, the way it does on the homepage. */
.platform-page > section > .container { position: relative; }
.platform-page > section > .container::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  width: 760px; height: 360px; max-width: 110%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, .13), transparent 70%);
}
.platform-page > section > .container > * { position: relative; z-index: 1; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.platform-page .hero { padding: clamp(104px, 14vw, 168px) 0 clamp(76px, 9vw, 116px); }

/* The old CSS blobs read as a different era than the rest of the site.
   Softened into one broad wash rather than three coloured lobes. */
.platform-page .hero-bg .blob { filter: blur(120px) !important; opacity: .34 !important; }
.platform-page .hero-bg .blob-1 { background: var(--pf-deep) !important; }
.platform-page .hero-bg .blob-2 { background: #4C1D95 !important; }
.platform-page .hero-bg .blob-3 { background: #5B21B6 !important; }

.platform-page .hero-tag {
  border: 1px solid rgba(167, 139, 250, .2) !important;
  background: rgba(167, 139, 250, .06) !important;
  border-radius: 100px !important;
  padding: 7px 15px !important;
  font-size: .6875rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(238, 237, 255, .72) !important;
}
.platform-page .hero-tag-dot {
  width: 5px; height: 5px;
  background: var(--pf-lilac) !important;
  box-shadow: 0 0 8px var(--pf-lilac);
}

.platform-page .hero-desc {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.65;
  color: var(--pf-mute) !important;
}

.platform-page .hero-scroll {
  margin-top: 56px;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pf-faint) !important;
}
.platform-page .hero-scroll-line { background: var(--pf-line) !important; }

/* ── Headings ──────────────────────────────────────────────────────── */

.platform-page > section h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem) !important;
  font-weight: 300 !important;
  line-height: 1.06;
  letter-spacing: -.038em;
  color: var(--pf-ice) !important;
}

.platform-page > section h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  font-weight: 300 !important;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--pf-ice) !important;
}

.platform-page > section h3 {
  font-size: 1.0313rem;
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--pf-ice);
}

.platform-page > section h1 span,
.platform-page > section h2 strong,
.platform-page > section h2 em,
.platform-page .gradient-text {
  font-style: normal;
  font-weight: 500;
  color: var(--pf-lilac) !important;
  -webkit-text-fill-color: var(--pf-lilac);
  background: none !important;
}

.platform-page .section-center { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.platform-page .section-center p { color: var(--pf-mute); font-size: 1rem; line-height: 1.65; }

/* Eyebrow: a rule, not a pill - matching every other section on the site.
   The !important here also neutralises the one inline-styled green tag. */
.platform-page .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin-bottom: 16px;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: .6875rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--pf-faint) !important;
}
.platform-page .section-tag::before {
  content: '';
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pf-lilac));
}
.platform-page .section-center .section-tag::after {
  content: '';
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--pf-lilac), transparent);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.platform-page .module-card,
.platform-page .problem-card,
.platform-page .solution-card,
.platform-page .journey-card,
.platform-page .callout,
.platform-page .toc {
  position: relative;
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(238, 237, 255, .035), rgba(238, 237, 255, .012)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
  transition: border-color .35s ease, background .35s ease;
}

/* A light catches the top edge on hover - the site's one card gesture. */
.platform-page .module-card::after,
.platform-page .solution-card::after {
  content: '';
  position: absolute;
  top: -1px; left: 14%; right: 14%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--pf-lilac), transparent);
  transition: opacity .35s ease;
}

.platform-page .module-card:hover,
.platform-page .problem-card:hover,
.platform-page .solution-card:hover,
.platform-page .journey-card:hover {
  transform: none !important;
  border-color: rgba(167, 139, 250, .26) !important;
  background: linear-gradient(180deg, rgba(238, 237, 255, .06), rgba(238, 237, 255, .02)) !important;
}
.platform-page .module-card:hover::after,
.platform-page .solution-card:hover::after { opacity: 1; }

.platform-page .module-card p,
.platform-page .problem-card p,
.platform-page .solution-card p,
.platform-page .journey-card p { color: var(--pf-mute); font-size: .875rem; line-height: 1.6; }

/* ── Module icons ──────────────────────────────────────────────────── */
/* These were emoji: different artwork on every OS, each carrying its own
   colour, so 26 modules read as 26 unrelated things. One stroke weight in
   the brand lilac makes them read as one system - which is the page's
   entire argument. */

.platform-page .module-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 15px;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 11px;
  background: rgba(167, 139, 250, .07);
  color: var(--pf-lilac);
  font-size: 0;
}
.platform-page .module-ic svg { width: 18px; height: 18px; display: block; }

.platform-page .module-bullets { list-style: none; padding: 0; margin: 12px 0 0; }
.platform-page .module-bullets li {
  position: relative;
  padding: 0 0 7px 16px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--pf-mute);
}
.platform-page .module-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 1px;
  background: rgba(167, 139, 250, .55);
}

/* ── Tick marks ────────────────────────────────────────────────────── */
/* Drawn rather than typed: the glyph rendered as different artwork per
   platform and sat on its own baseline inside these flex rows. */

.platform-page .check {
  position: relative;
  display: inline-block;
  align-self: center;
  width: 13px; height: 13px;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
}
.platform-page .check::before {
  content: '';
  position: absolute;
  left: 1px; top: 2px;
  width: 10px; height: 5px;
  border-left: 1.5px solid var(--pf-lilac);
  border-bottom: 1.5px solid var(--pf-lilac);
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* ── Before / after ────────────────────────────────────────────────── */
/* These are table cells, not cards - the comparison reads as two tinted
   columns running the length of the table, so the colour goes on the
   column and the type carries the rest. */

.platform-page .compare-table { font-size: .8438rem; }
.platform-page .compare-table th {
  padding: 11px 16px !important;
  font-size: .6875rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  color: var(--pf-faint) !important;
  border-bottom: 1px solid rgba(167, 139, 250, .2) !important;
}
.platform-page .compare-table td {
  padding: 14px 16px !important;
  line-height: 1.6;
  border-bottom: 1px solid var(--pf-line) !important;
  color: var(--pf-mute);
}
.platform-page .compare-table .col-before {
  background: rgba(239, 68, 68, .04);
  color: rgba(252, 165, 165, .78) !important;
}
.platform-page .compare-table .col-after {
  background: rgba(167, 139, 250, .05);
  color: rgba(238, 237, 255, .84) !important;
}
.platform-page .compare-table .row-label {
  font-weight: 500 !important;
  color: var(--pf-ice) !important;
}

/* ── Problem / solution card icons ─────────────────────────────────── */

.platform-page .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 14px;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 11px;
  background: rgba(167, 139, 250, .07);
  color: var(--pf-lilac);
  font-size: 0;
  flex-shrink: 0;
}
.platform-page .ic svg { width: 17px; height: 17px; display: block; }

/* The little "THE PROBLEM" / "SOLVED" tags above each card head. */
.platform-page .before,
.platform-page .after {
  font-size: .625rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.platform-page .before { color: rgba(248, 113, 113, .72) !important; background: none !important; }
.platform-page .after  { color: var(--pf-lilac) !important; background: none !important; }

/* ── Health-score panel ────────────────────────────────────────────── */

.platform-page .feature-visual {
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
  padding: 26px !important;
  background: linear-gradient(180deg, rgba(238, 237, 255, .035), rgba(238, 237, 255, .012)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.platform-page .fv-row { border-bottom-color: var(--pf-line) !important; }
.platform-page .fv-ic {
  width: 30px !important; height: 30px !important;
  border: 1px solid rgba(167, 139, 250, .18);
  border-radius: 9px !important;
  background: rgba(167, 139, 250, .06) !important;
  color: var(--pf-lilac);
  font-size: 0 !important;
}
.platform-page .fv-ic svg { width: 15px; height: 15px; display: block; }
.platform-page .fv-label { color: var(--pf-mute) !important; }
.platform-page .fv-value { font-weight: 500 !important; color: var(--pf-ice) !important; }

/* ── API flow rows ─────────────────────────────────────────────────── */

.platform-page .api-row { border-bottom-color: var(--pf-line) !important; }
.platform-page .api-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--pf-lilac) !important;
  font-size: 0 !important;
}
.platform-page .api-arrow svg { width: 16px; height: 16px; display: block; }
.platform-page .api-from { font-weight: 500 !important; color: var(--pf-ice); }
.platform-page .api-action { color: var(--pf-mute) !important; }
.platform-page .api-result {
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 5px !important;
  padding: 3px 9px !important;
  background: rgba(167, 139, 250, .07) !important;
  color: rgba(196, 181, 253, .9) !important;
}

/* ── Journey / numbered steps ──────────────────────────────────────── */
/* The numbers stay: these sections really are sequences, so the order
   carries information. */

.platform-page .journey-dot {
  background: var(--pf-lilac) !important;
  border-color: var(--pf-lilac) !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .13);
}
.platform-page .journey-time {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pf-faint) !important;
}

.platform-page .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid rgba(167, 139, 250, .28) !important;
  border-radius: 50% !important;
  background: rgba(167, 139, 250, .08) !important;
  color: var(--pf-lilac) !important;
  font-size: .8125rem;
  font-weight: 600;
}

/* ── Callout ───────────────────────────────────────────────────────── */

.platform-page .callout {
  padding: 22px 26px !important;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--pf-mute) !important;
}
.platform-page .callout strong { color: var(--pf-ice); font-weight: 600; }

/* ── Contents rail ─────────────────────────────────────────────────── */

.platform-page .toc { padding: 26px 30px !important; }
.platform-page .toc h3 {
  margin-bottom: 16px;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pf-faint);
}
.platform-page .toc-link {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 1px solid var(--pf-line);
  font-size: .8125rem;
  color: var(--pf-faint);
  text-decoration: none;
  transition: color .22s ease, border-color .22s ease;
}
.platform-page .toc-link:hover,
.platform-page .toc-link:focus-visible {
  color: var(--pf-ice);
  border-left-color: var(--pf-lilac);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.platform-page .btn-primary {
  background: var(--pf-ice) !important;
  border: 1px solid var(--pf-ice) !important;
  color: #0B0A12 !important;
  font-weight: 500;
  box-shadow: none !important;
}
.platform-page .btn-primary:hover { background: #fff !important; transform: none !important; }

.platform-page .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(238, 237, 255, .16) !important;
  color: var(--pf-ice) !important;
  font-weight: 500;
}
.platform-page .btn-ghost:hover {
  border-color: rgba(167, 139, 250, .4) !important;
  background: rgba(167, 139, 250, .06) !important;
  transform: none !important;
}

.platform-page :focus-visible { outline: 2px solid var(--pf-lilac); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .platform-page .module-card,
  .platform-page .problem-card,
  .platform-page .solution-card,
  .platform-page .journey-card,
  .platform-page .module-card::after,
  .platform-page .solution-card::after,
  .platform-page .toc-link,
  .platform-page .hero-bg .blob { transition: none; animation: none !important; }
}