.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.twocol>*{min-width:0}
.twocol h3{font-size:var(--fs-md);margin-bottom:12px}

/* The tick and cross carry meaning, so they are drawn rather than
   typed: a literal character would be read aloud by a screen reader
   before every item, and the list already says which column it is
   in. aria-hidden is not available on a pseudo-element, but
   generated content is not announced by any current screen reader,
   which is the behaviour wanted here. */
.tick,
.cross{list-style:none;padding:0;margin:0}
.tick li,
.cross li{position:relative;padding:0 0 12px 28px;font-size:var(--fs-base);color:var(--ink-2);line-height:1.5}
.tick li::before,
.cross li::before{position:absolute;left:0;top:.08em;width:18px;height:18px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1}
.tick li::before{content:"\2713";background:var(--teal-tint);color:var(--teal-dark)}
.cross li::before{content:"\2192";background:var(--surface-2);color:var(--ink-2)}

.listing-bar{border-bottom:1px solid var(--line)}

@media(max-width:900px){
  .twocol{grid-template-columns:1fr;gap:28px}
}

/* The fee paragraph. Standing content while the gated table waits on the three
   fee items; the gate box slots back in directly beneath it. */
.lead-para{max-width:68ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.6}