/*
 * =========================================================
 * OLYTIC SOLUTIONS - Buildline Service Page Styles
 * custom-studio.css  /  Route: /custom-studio
 *
 * Standalone, one-pager style landing page for Buildline, a
 * proprietary business system build engagement, built on the
 * same global primitives as every other page (.section,
 * .container, .callout, .btn, .label) but with a distinct
 * visual identity: a big product mark/wordmark ("Buildline")
 * lockup and a code-bracket brand mark.
 *
 * Components:
 *   - Buildline mark (inline SVG, duplicated per usage with
 *     hardcoded colors, no shared <symbol>/<use>)
 *   - Hero (dark, big logo lockup, teal-led petal composition)
 *   - Overview (problem summary, outcomes list beside a
 *     prose-stat card)
 *   - How We Work (open-shape card timeline, four steps, then
 *     a single closing sentence; its old "What You Get"
 *     three-card block was removed 2026-08-28, redundant with
 *     Overview's outcomes list)
 *   - Foundation (dark, continuous with How We Work above it,
 *     marked by a short gold divider rule; right-justified
 *     infrastructure value prop + three tier cards, each with
 *     its own gold line icon, added 2026-08-28)
 *   - FIT (who this is for, single column, full-bleed photo
 *     backdrop fading in from the right)
 *   - CTA band
 *   - Studio-family seam between hero and overview only (no accent border)
 *
 * CSS load order (must follow):
 *   tokens → typography → buttons → nav → footer → layout → buildline
 * =========================================================
 */

/* ─────────────────────────────────────────────────────── */
/* SEAM - angled color transition between bands             */
/* ─────────────────────────────────────────────────────── */

.bl-seam-top {
  position: relative;
}

.bl-seam-top::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 60px;
  transform-origin: 0 0;
  transform: skewY(-1.25deg);
  z-index: 1;
}

.bl-seam-top--white::before  { background-color: #FFFFFF; }

@media (max-width: 640px) {
  .bl-seam-top::before {
    top: -24px;
    height: 36px;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 1: HERO                                          */
/* ─────────────────────────────────────────────────────── */

.bl-hero {
  background-color: var(--color-obsidian);
  color: #FFFFFF;
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}

.bl-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

.bl-hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.bl-hero__wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}

.bl-hero__wordmark em {
  font-style: normal;
  color: var(--accent);
}

.bl-hero__headline {
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  max-width: 720px;
}

.bl-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.76);
  line-height: var(--leading-body);
  max-width: 560px;
  margin-bottom: var(--space-8);
}

/* Studio-family fade hero (matches FieldCraft/Synthis): the hero photo
   is absolutely positioned along the left ~62% of the dark hero and
   gradient-fades into the obsidian field, so it blends in with no hard
   edge. Content (lockup, headline, sub, studio line, CTAs) sits in the
   right grid column. Photo is hidden under 900px. Replaces the services'
   petal composition and its inclined line on this page. */
.bl-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 62%;
  z-index: 0;
}

.bl-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 30%,
    var(--color-obsidian) 68%
  );
}

.bl-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

/* On the Studio page, content takes the right column above the fading
   photo. Scoped to [data-mode="studio"] so the Platform lane (which
   reuses this file with a left content column + right orbit visual) is
   untouched. */
[data-mode="studio"] .bl-hero__content {
  position: relative;
  z-index: 1;
  grid-column: 2;
}

/* Quiet mono line tying this page to the Studio family, matching
   FieldCraft/Synthis. */
.bl-hero__studio {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--accent) 90%, transparent);
  letter-spacing: 0.02em;
  line-height: var(--leading-body);
  max-width: 560px;
  margin: 0 0 var(--space-8);
}

/* ── Platform lane keeps the orbit composition (see PLATFORM LANE
   OVERRIDES below); these two base rules position that visual and are
   not used by the Studio fade hero above. ── */
.bl-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.bl-hero__composition {
  position: relative;
  width: 448px;
  height: 448px;
}

/* Narrow desktops: scale the (Platform) composition, never reflow it. */
@media (max-width: 1160px) {
  .bl-hero__composition {
    transform: scale(0.82);
    transform-origin: center;
  }
}

@media (max-width: 900px) {
  .bl-hero__inner {
    grid-template-columns: 1fr;
  }

  [data-mode="studio"] .bl-hero__content {
    grid-column: 1;
  }

  .bl-hero__visual {
    display: none;
  }

  .bl-hero__media {
    display: none;
  }
}

@media (max-width: 640px) {
  .bl-hero__sub {
    font-size: var(--text-base);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 2: OVERVIEW (problem summary + outcomes + stats)  */
/* ─────────────────────────────────────────────────────── */

.bl-overview {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  position: relative;
}

.bl-overview__headline {
  text-align: left;
  margin-bottom: var(--space-8);
}

.bl-overview__headline::after {
  left: 0;
  right: auto;
}

.bl-overview__row {
  align-items: center;
}

.bl-overview__intro {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.bl-overview__intro p {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
}

.bl-overview__tee {
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
}

/* ── Outcomes list ── */

.bl-outcomes {
  max-width: 640px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bl-outcomes li {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: var(--leading-body);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: 0;
}

.bl-outcomes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background-color: var(--accent);
}

/* ── Statistic card: a short unified narrative citing two figures. */
.bl-stats {
  background-color: var(--color-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  max-width: 320px;
  justify-self: start;
}

.bl-stats__narrative {
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--color-ink) 76%, transparent);
  line-height: var(--leading-body);
  margin-bottom: var(--space-5);
}

.bl-stats__narrative:last-child {
  margin-bottom: 0;
}

.bl-stats__narrative strong {
  color: var(--color-obsidian);
  font-weight: var(--weight-bold);
}

.bl-stats__cite {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  margin-left: 1px;
}

@media (max-width: 768px) {
  .bl-stats {
    max-width: none;
    padding: var(--space-6);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 3: HOW WE WORK                                    */
/* (vertical spine + node timeline on mobile, horizontal      */
/*  timeline from 1200px up)                                 */
/* ─────────────────────────────────────────────────────── */

.bl-how {
  position: relative;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.bl-how__intro {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.bl-how__intro .section-title {
  margin-bottom: var(--space-4);
}

.bl-how__intro p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  margin: 0;
}

/* Vertical spine connecting each node, centered on the node column */
.bl-steps {
  max-width: 640px;
  position: relative;
}

.bl-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.bl-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-5) 0;
  position: relative;
}

.bl-step:first-of-type {
  padding-top: 0;
}

.bl-step__node-col {
  display: flex;
  justify-content: center;
}

.bl-step__icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

/* .bl-card__outline is the decorative open-shape background used
   only in the desktop card layout below; hidden here so it doesn't
   render as an unstyled, unsized box in the plain mobile list. */
.bl-card__outline {
  display: none;
}

.bl-step__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-obsidian);
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--accent);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.bl-step__content h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin-bottom: var(--space-1);
}

.bl-step__content p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .bl-step {
    grid-template-columns: 40px 1fr;
    column-gap: var(--space-4);
  }

  .bl-steps::before {
    left: 19px;
  }

  .bl-step__node {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }
}

/* ── Open-shape card timeline (desktop): four identical gold-outlined */
/* cards, all at the same height (no stagger). Each is an open shape  */
/* (border-top + border-right only, no fill, no shadow, no tail) with */
/* an outlined icon circle straddling its top edge and its own title  */
/* and copy inside.                                                   */
@media (min-width: 1200px) {
  .bl-steps {
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0 24px;
  }

  .bl-steps::before {
    display: none;
  }

  .bl-step {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 270px;
    padding: 0;
    text-align: center;
  }

  .bl-step:not(:first-of-type) {
    margin-left: 15px;
  }

  .bl-step__node-col {
    display: none;
  }

  .bl-card {
    position: relative;
    display: block;
    width: 270px;
    height: 195px;
    margin: 0 auto;
    color: var(--accent);
  }

  .bl-card__outline {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 195px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-bottom: none;
    border-left: none;
    border-radius: 0 97.5px 97.5px 0;
  }

  /* Circle straddles the card's top edge: half floats above it.
     Background matches the section's own dark bg so it reads as a
     cutout sitting on the outline, not a light patch floating on it. */
  .bl-card__icon {
    position: absolute;
    top: -24px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background-color: var(--color-obsidian);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  .bl-card__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
  }

  .bl-card__body {
    position: relative;
    text-align: left;
    max-width: 172px;
    padding: 26px 0 0 22px;
  }

  .bl-step__content .bl-card__title {
    font-size: 16px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 var(--space-2);
  }

  .bl-step__content .bl-card__text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
    margin: 0;
  }
}

/* One-sentence close, replacing the old "What You Get" three-card
   block: a plain statement, not another heading or card. */
.bl-how__close {
  max-width: 640px;
  margin: var(--space-10) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #FFFFFF;
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 4: FOUNDATION (infrastructure + tiers)            */
/* Dark band, continuous with the How We Work timeline above */
/* it (no visual seam, same obsidian bg), so the two read as  */
/* one section. Intro copy is right-justified to distinguish  */
/* it from How We Work's left-aligned copy above. Tier cards  */
/* use the page's own "three rounded, one squared" card shape */
/* (matching .bl-get's old shape) plus a gold line icon per   */
/* tier, not a generic bordered-box pricing table.            */
/* ─────────────────────────────────────────────────────── */

.bl-foundation {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Short gold rule marking the boundary with How We Work above,
   since the two sections otherwise share one continuous dark bg
   with no seam. Centered, independent of the intro's right-justified
   alignment below it. */
.bl-foundation__divider {
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--accent);
  margin: 0 auto var(--space-10);
}

.bl-foundation__intro {
  max-width: 880px;
  margin: 0 0 var(--space-10) 0;
  text-align: left;
}

.bl-foundation__intro .section-title {
  margin-bottom: var(--space-4);
}

.bl-foundation__intro .section-title::after {
  left: 0;
  right: auto;
}

.bl-foundation__intro p {
  max-width: none;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
}

.bl-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

/* Same "three rounded corners, one squared" shape as the golden
   template's deliverable cards (.bl-get, retired 2026-08-28, and
   FieldCraft's .fr-get), just on a dark tint instead of solid teal. */
.bl-tier {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 24px 24px 0 24px;
  padding: var(--space-8);
}

.bl-tier__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bl-tier__icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.bl-tier__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin: 0;
}

.bl-tier__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-3);
}

.bl-tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bl-tier__list li {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-normal);
  padding-left: var(--space-5);
  position: relative;
}

/* Gold dash marker, matching .bl-outcomes elsewhere on this page,
   instead of a generic round bullet. */
.bl-tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  background-color: var(--accent);
}

@media (max-width: 860px) {
  .bl-tiers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .bl-foundation__intro {
    text-align: left;
    margin-left: 0;
  }

  .bl-foundation__intro .section-title::after {
    left: 0;
    right: auto;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: FIT (full-bleed photo backdrop, FieldCraft-   */
/* style: photo bleeds in from the right, mask-fades into   */
/* the section's own surface color, text column sits on it) */
/* ─────────────────────────────────────────────────────── */

.bl-case {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.bl-case .container {
  position: relative;
  z-index: 1;
}

.bl-case__main {
  max-width: 54%;
}

.bl-case__head {
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.bl-case__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0;
}

.bl-case__story {
  max-width: 760px;
}

.bl-case__problem {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-5);
}

.bl-case__solutions-intro {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-obsidian);
  margin: 0 0 var(--space-3);
}

.bl-case__solutions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bl-case__solutions li {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  padding-left: var(--space-6);
  position: relative;
  margin: 0;
}

.bl-case__solutions li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.bl-case__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  margin: 0;
  z-index: 0;
}

.bl-case__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, #000 46%, transparent 82%);
  mask-image: linear-gradient(to left, #000 46%, transparent 82%);
}

@media (max-width: 860px) {
  .bl-case {
    overflow: visible;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .bl-case__main {
    max-width: none;
  }

  .bl-case__photo {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: var(--space-8);
  }

  .bl-case__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 12px;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 6: CTA                                           */
/* ─────────────────────────────────────────────────────── */

.bl-cta {
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
  position: relative;
}

.bl-cta__mark {
  display: block;
  margin-bottom: var(--space-5);
}

.bl-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
}

.bl-cta__inner h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.bl-cta__inner p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--leading-body);
  max-width: 52ch;
  margin-bottom: 0;
}

.bl-cta__inner .bl-cta__refs {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.4);
  max-width: none;
}

.bl-cta__refs sup {
  margin-right: 2px;
}

.bl-cta__inner .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .bl-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .bl-cta__inner .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── Mobile lockup: smaller mark + wordmark so long names breathe ── */

@media (max-width: 560px) {
  .bl-hero__lockup svg {
    width: 52px;
    height: 52px;
  }

  .bl-hero__lockup {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .bl-hero__wordmark {
    font-size: 1.4rem;
  }
}


/* ═══════════════════════════════════════════════════════ */
/* PLATFORM LANE OVERRIDES  (data-mode="platform")          */
/* This file is shared by custom-studio.html (Studio, teal)  */
/* and platform.html (Platform, cyan). The Studio page keeps */
/* the petal hero above; the Platform page gets its own      */
/* frontier motif instead: a Midnight surface with crisp     */
/* overlapping circles crossed by the inclined-ascent line,  */
/* mostly neutral geometry with rare cyan accents (var(      */
/* --accent) resolves to Horizon Cyan under this data-mode). */
/* No photo, no planets or stars. var(--accent) is used      */
/* throughout so nothing is hard-coded to one lane color.    */
/* ═══════════════════════════════════════════════════════ */

[data-mode="platform"] .bl-hero {
  background-color: var(--color-midnight);
}

/* Frontier geometry sits in the same 448px composition box the
   petal hero used, so the shared responsive scale (max-width 1160px)
   and the under-900px hide rule still apply unchanged. */
[data-mode="platform"] .pf-orbit {
  position: relative;
  width: 448px;
  height: 448px;
}

[data-mode="platform"] .pf-orbit span {
  position: absolute;
}

/* Overlapping rings: two quiet neutral outlines behind one cyan
   accent ring, all crisp circles (no blobs, no swoosh). */
[data-mode="platform"] .pf-orbit__ring {
  border-radius: 50%;
}

[data-mode="platform"] .pf-orbit__ring--a {
  width: 340px;
  height: 340px;
  top: 20px;
  left: 20px;
  border: 2px solid rgba(255, 255, 255, 0.16);
}

[data-mode="platform"] .pf-orbit__ring--b {
  width: 248px;
  height: 248px;
  top: 156px;
  left: 156px;
  border: 2px solid rgba(255, 255, 255, 0.10);
}

/* The one cyan accent ring, overlapping the other two. */
[data-mode="platform"] .pf-orbit__ring--c {
  width: 184px;
  height: 184px;
  top: 72px;
  left: 150px;
  border: 2px solid var(--accent);
  opacity: 0.9;
}

/* Filled ink disc anchoring the overlap, adding depth on the
   midnight field. */
[data-mode="platform"] .pf-orbit__disc {
  width: 124px;
  height: 124px;
  top: 118px;
  left: 96px;
  border-radius: 50%;
  background-color: var(--color-obsidian);
}

/* Inclined-ascent line: lower-left to upper-right, precise, crossing
   the rings. The lane's signature device, in cyan. */
[data-mode="platform"] .pf-orbit__line {
  width: 320px;
  height: 2px;
  top: 312px;
  left: 60px;
  background: var(--accent);
  transform: rotate(-18deg);
  transform-origin: left center;
  opacity: 0.9;
}

/* Rare cyan nodes marking two ring intersections. */
[data-mode="platform"] .pf-orbit__node {
  border-radius: 50%;
  background: var(--accent);
}

[data-mode="platform"] .pf-orbit__node--1 {
  width: 14px;
  height: 14px;
  top: 63px;
  left: 235px;
}

[data-mode="platform"] .pf-orbit__node--2 {
  width: 9px;
  height: 9px;
  top: 236px;
  left: 328px;
}

/* ── Foundation "what's already built" list (2026-09-10, per Ean/Josh Studio reframe) ──
   Light-on-dark scannable grid ABOVE the Standard/Professional/Enterprise tier cards,
   flaunting the proven-foundation substance. .bl-outcomes is dark-text (for white
   sections) so it can't be reused here; this is its dark-band sibling. */
.bl-foundation__built {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-12) 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-10);
}
.bl-foundation__built li {
  position: relative;
  padding-left: var(--space-6);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.bl-foundation__built li strong {
  color: #FFFFFF;
  font-weight: var(--weight-bold);
}
.bl-foundation__built li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--color-gold);
}
@media (max-width: 640px) {
  .bl-foundation__built { grid-template-columns: 1fr; }
}