/* Feature pages (/features/*) — the site's hero and feature-row primitives
   carry the layout. This only covers the markdown elements a `body` field can
   produce that the copy column does not already style. */

.feature-copy ul, .feature-copy ol {
  margin: var(--pf-space-4) 0; padding-left: 22px;
  color: var(--pf-text-s); font-size: var(--t-body-lg);
}
.feature-copy ul { list-style: disc; }
.feature-copy ol { list-style: decimal; }
.feature-copy li + li { margin-top: var(--pf-space-2); }
.feature-copy li::marker { color: var(--pf-text-t); }
.feature-copy h4 { font-size: var(--t-h4); margin: var(--pf-space-6) 0 var(--pf-space-3); }
.feature-copy strong,
.feature-list strong { color: var(--pf-text-p); font-weight: 500; }
.feature-copy code,
.feature-list code {
  font-family: var(--pf-mono); font-size: .9em;
  background: var(--pf-bg-card); border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-sm); padding: 1px 6px;
}
.feature-copy a,
.feature-list a {
  color: var(--pf-cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--pf-cyan-border);
  transition: border-color .15s ease;
}
.feature-copy a:hover,
.feature-list a:hover { border-bottom-color: var(--pf-cyan); }

/* A full-width row: copy above a grid of named descriptions.
   `feature-row`'s gap is sized for two side-by-side columns; stacked, it would
   apply that same distance between the copy and the list, so it is dropped and
   the list sets its own. */
.feature-row-full { grid-template-columns: 1fr; gap: 0; }
/* A row's padding separates it from the row next to it. At the start of a
   section there is no row above, and at the end none below; in both cases the
   section, or its head, already sets that gap. */
.feature-row:first-child,
.section-head + .feature-row { padding-top: 0; }
.feature-row:last-child { padding-bottom: 0; }
.feature-row-full .feature-copy { max-width: 940px; }

.feature-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--pf-space-6) var(--pf-space-16);
}
/* Space for the copy above, when the row has any. */
.feature-copy + .feature-list { margin-top: var(--pf-space-8); }
@media (max-width: 860px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list dt {
  position: relative;
  display: flex; align-items: center; gap: var(--pf-space-3);
  color: var(--pf-text-p); font-size: var(--t-h4); font-weight: 500;
  padding-top: var(--pf-space-3); border-top: 0.5px solid var(--pf-border);
}
/* A cyan line that fills across the rule above each name. `--line-on` runs 0 to
   1 as site.js lights it, and defaults to 1 so it is simply drawn without JS. */
.feature-list dt::after {
  content: '';
  position: absolute; top: -0.5px; left: 0; right: 0; height: 0.5px;
  background: var(--pf-cyan);
  transform: scaleX(var(--line-on, 1));
  transform-origin: left center;
}
/* `--dot-on` runs 0 to 1 as site.js lights the dots. It defaults to 1, so the
   dots are simply on without JS and under prefers-reduced-motion. */
.feature-list dt::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pf-cyan); box-shadow: 0 0 0 3px var(--pf-cyan-dim);
  /* `--dot-on` is the animation; `--dot-max` is how bright this dot ever gets,
     so an entry that has not shipped stays a little dimmer once lit. */
  opacity: calc(var(--dot-on, 1) * var(--dot-max, 1));
  transform: scale(var(--dot-on, 1));
}
.feature-list dt.is-soon { --dot-max: .5; }
.feature-list dd { color: var(--pf-text-s); font-size: var(--t-body); margin-top: var(--pf-space-2); }

/* Marks a list entry that has not shipped yet. */
.feature-list .soon {
  margin-left: auto;
  font-family: var(--pf-mono); font-size: var(--t-mono-sm);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  color: var(--pf-text-s);
  border: 0.5px solid var(--pf-border-md);
  border-radius: var(--pf-radius-pill);
  padding: 2px 8px;
}