/* Platform page · three-level model.
   Stacked full-width bands with a left rail label. The brokerage band
   sits deepest (dark). Extends the shared system only; nothing here
   overrides platform.css globals. */

/* ── Hero ─────────────────────────────────────────────── */
.plat-hero{ padding-block:var(--s-24) var(--s-20); }
.plat-hero .lede{ margin-top:var(--s-5); max-width:52ch; }

/* ── Levels: stacked bands ────────────────────────────── */
.levels-sec{ border-top:1px solid var(--rule); }
.levels-head{ padding-block:var(--s-16) var(--s-12); max-width:none; }
.levels-head .lede{ margin-top:var(--s-4); }

.level{ border-top:1px solid var(--rule); }
.level-1{ background:var(--paper); }
.level-2{ background:var(--sunk); }
.level-3{ background:var(--ink); border-top-color:var(--ink); color:#C7CBD1; }

.level-in{
  display:grid; grid-template-columns:220px minmax(0,1fr);
  gap:var(--s-10); padding-block:var(--s-12);
}
.level-3 .level-in{ padding-block:var(--s-16); }

/* Left rail */
.level-num{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.level-rail h3{
  font-size:var(--fs-4); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; margin-top:var(--s-2);
}
.level-sub{ font-size:var(--fs-2); color:var(--ink-3); margin-top:var(--s-2); max-width:24ch; }
.level-tag{
  display:inline-block; margin-top:var(--s-3);
  font-size:var(--fs-1); font-weight:600; line-height:1.4;
  padding:2px var(--s-2); border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r); color:var(--paper);
}

/* Band body */
.level-desc{ font-size:var(--fs-3); color:var(--ink-2); max-width:60ch; }
.level-dl{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-10); margin-top:var(--s-6);
}
.level-dl dt{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  padding-bottom:var(--s-2); border-bottom:1px solid var(--rule-firm);
}
.level-dl ul{ list-style:none; }
.level-dl li{
  padding-block:var(--s-2); border-bottom:1px solid var(--rule);
  font-size:var(--fs-2); color:var(--ink-2);
}
.level-dl li:last-child{ border-bottom:0; }
.level-note{ margin-top:var(--s-6); max-width:70ch; }

/* Brokerage band: dark surface overrides */
.level-3 .level-num{ color:#9AA0A8; }
.level-3 .level-rail h3{ color:var(--paper); }
.level-3 .level-sub{ color:#9AA0A8; }
.level-3 .level-desc{ color:#C7CBD1; }
.level-3 .level-dl dt{ color:#9AA0A8; border-bottom-color:rgba(255,255,255,.3); }
.level-3 .level-dl li{ color:#C7CBD1; border-bottom-color:rgba(255,255,255,.12); }
.level-3 .level-note{ color:#9AA0A8; }
.level-3 :focus-visible{ outline-color:var(--paper); }

/* ── Flow: four bordered rows ─────────────────────────── */
.flow{
  list-style:none; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--paper); overflow:hidden;
}
.flow-row{
  display:grid; grid-template-columns:20px minmax(0,1fr);
  gap:var(--s-4); padding:var(--s-5) var(--s-6);
  border-top:1px solid var(--rule); align-items:start;
}
.flow-row:first-child{ border-top:0; }
.flow-row .ico{ margin-top:var(--s-4); }
.flow-step{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.flow-row h3{ font-size:var(--fs-3); margin-top:var(--s-1); }
.flow-row p:last-child{ font-size:var(--fs-2); color:var(--ink-2); margin-top:var(--s-1); max-width:70ch; }

/* ── Cross-links ──────────────────────────────────────── */
.deeper{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6); }
.deeper-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--paper); padding:var(--s-6);
}
.deeper-item p{ font-size:var(--fs-2); color:var(--ink-2); max-width:52ch; }
.deeper-item .link{ display:inline-flex; align-items:center; min-height:24px; margin-top:auto; }

/* ── Final CTA ────────────────────────────────────────── */
.plat-cta{ text-align:center; display:grid; justify-items:center; }
.plat-cta .lede{ margin-top:var(--s-4); }
.plat-cta .actions{ justify-content:center; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:900px){
  .plat-hero{ padding-block:var(--s-16) var(--s-12); }
  .level-in{ grid-template-columns:1fr; gap:var(--s-6); }
  .level-3 .level-in{ padding-block:var(--s-12); }
  .level-sub{ max-width:none; }
  .deeper{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .level-dl{ grid-template-columns:1fr; gap:var(--s-6); }
}