/* features.html — the shipped-vs-next rail and the kit list.

   The rail used to sit in the middle of the home-page sections in the single
   stylesheet, which is how it stayed there long after it stopped being on the
   home page at all. */

/* ── The rail: shipped vs next ──────────────────────────────────
   Two lists on a hairline. A filled dot is something you can check elsewhere on
   this page; a hollow one is a promise. That difference is the whole component,
   which is why it isn't a card grid — cards would give a roadmap the same weight
   as a feature. No accent here: the one in this stretch of page belongs to the
   calendar below. */

.rail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 56px); max-width: 940px; margin: 0 auto; }
/* On the features page the shipped column is the four card groups above it, so
   the rail is left holding one list. Centred and capped rather than stretched:
   a 940px line of 15px text is a worse read than the column it replaced. */
.rail--solo { grid-template-columns: minmax(0, 620px); justify-content: center; }
.rail__ct { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; margin: 0 0 18px; }
/* The date each column is promising. Filled on the one that has a date it has to
   keep, outlined on the one that is a target — the difference between the two
   lists is exactly the difference between those two tags. */
.rail__when { display: inline-block; vertical-align: 2px; margin-left: 8px; white-space: nowrap; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-ctl); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
/* NOTE: nothing sets .is-now — not features.html, not any script. The current
   item in the shipped-vs-next rail therefore never renders as current, so these
   two rules are inert today. Left in place deliberately: the fix is to add the
   class in the markup, which is a decision about what "now" is, not a cleanup. */
.rail__when.is-now { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.rail__list { list-style: none; margin: 0; padding: 2px 0 2px 26px; display: grid; gap: 15px; border-left: 1px solid var(--line); }
.rail__i { position: relative; color: var(--ink-70); font-size: 15.5px; line-height: 1.55; }
.rail__i::before {
  content: ''; position: absolute; left: -30px; top: .45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line-ctl);
}
.rail__i.is-now::before { background: var(--ink); border-color: var(--ink); }
.rail__i b { color: var(--ink); font-weight: 700; }
.rail__note { margin: 20px 0 0 26px; color: var(--ink-50); font-size: 14px; line-height: 1.5; }

/* ── Features page ──────────────────────────────────────────────
   The long list, in the same cards the landing page uses for its short one —
   this page is longer, not a different product. The group headings are the only
   new part: they carry the order you meet the features in, which is the reason
   the list is readable at four times the length. */

.kit { padding-top: clamp(120px, 14vw, 170px); }
.kit__group + .kit__group { margin-top: clamp(36px, 4.4vw, 60px); }
.kit__ct { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; margin: 0 0 20px; }
.kit__note { max-width: 68ch; margin: clamp(36px, 4.4vw, 60px) auto 0; color: var(--ink-50); font-size: 14px; line-height: 1.6; }

/* ── Breakpoints ─────────────────────────────────────────────── */

@media (max-width: 720px) {
  .rail { grid-template-columns: 1fr; }
}