.doc p, .doc li { max-width: 58ch; }
.plat-tabs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.6rem; padding: 0; list-style: none;
}
.plat-tab {
  font: inherit; font-weight: 600; font-size: .875rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .75rem 1.1rem;
  color: var(--cream-dim); background: var(--deep);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.plat-tab:hover { color: var(--cream); border-color: rgba(147,166,198,.6); }
.plat-tab[aria-selected="true"] {
  color: var(--night); background: var(--beam); border-color: var(--beam);
}
.plat-tab[aria-selected="true"]:hover { color: var(--night); background: var(--beam); }
.plat-card { margin: 0 0 1.4rem; }
.plat-card > h2:first-child { margin-top: 0; }
.plat-card + .plat-card { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.plat-card[hidden] + .plat-card { border-top: 0; padding-top: 0; }
.plat-steps { counter-reset: shag; list-style: none; padding-left: 0; margin: 0 0 1rem; }
.plat-steps > li {
  counter-increment: shag; position: relative;
  padding-left: 2.2rem; margin: .7rem 0; color: var(--ink-soft);
}
.plat-steps > li::before {
  content: counter(shag);
  position: absolute; left: 0; top: .1rem;
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  color: var(--night); background: var(--beam); border-radius: 50%;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1;
  padding: .9rem 1.4rem; border-radius: var(--r-md); border: 1px solid transparent;
  background: #0b7285; color: #fff; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.btn:hover { background: #0d7f92; text-decoration: none; }
@media (hover:hover) and (pointer:fine) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(147,166,198,.6); }
.btn-ghost:hover { background: transparent; border-color: var(--beam); color: var(--beam); }
.doc a.btn { color: #fff; text-decoration: none; }
.doc a.btn-ghost { color: var(--cream); }
.doc a.btn-ghost:hover { color: var(--beam); }
.plat-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1rem; }
.plat-note {
  border-left: 3px solid var(--warn); background: rgba(210,153,34,.06);
  border-radius: var(--r-md); padding: .8rem 1rem; margin: 0 0 1rem;
}
.doc .plat-note { color: var(--warn-ink); }
.doc .plat-note b { color: #fff; }
.doc .plat-link-block { color: var(--cream-dim); }
.plat-link-block { margin-top: 2.2rem; }
.plat-danger { border-left-color: var(--bad); background: rgba(250,82,82,.07); }
.doc .plat-danger { color: var(--red-ink); }
.doc .callout p { color: var(--cream-dim); }
.doc .callout b { color: #fff; }
.plat-link-top { margin-top: 1.6rem; }