/* Feature pages. Colours, type and spacing come from tokens.css; shared pieces from styles.css and landing.css. */
.fp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding-top: var(--space-xl); color: var(--muted); font-size: var(--t-subhead-size); }
.fp-crumbs a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--ink-2); }
.fp-crumbs a:hover { color: var(--accent-ink); }
.fp-crumbs + .lp-hero { padding-top: var(--space-xxl); }
.fp-lead { max-width: 44rem; margin-top: var(--space-md); color: var(--ink-2); font-size: calc(var(--t-body-size) * 1.1); line-height: 1.6; }
.fp-lead a, .lp-note a, .lp-two-text a, .fp-points a { color: var(--accent-ink); }

/* Point cards */
.fp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.fp-points article { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); color: var(--ink-2); }
.fp-points h3 { color: var(--ink); }
.fp-points code { font-family: var(--mono); font-size: var(--t-subhead-size); overflow-wrap: anywhere; }

/* Network chips */
.fp-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; }
.fp-chips li { padding: var(--space-xxs) var(--space-md); border: 0; border-radius: var(--radius-pill); color: var(--ink); font-size: var(--t-subhead-size); font-weight: 600; background: var(--paper-deep); }
.lp-nets .fp-chips { flex: 1; }

/* Numbered follow-check steps */
.fp-steps { display: grid; gap: var(--space-md); max-width: 52rem; padding: 0; margin: 0; list-style: none; }
.fp-steps li { display: grid; grid-template-columns: var(--touch-min) minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: var(--space-lg) var(--space-xl); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); }
.fp-steps p { margin-top: var(--space-xxs); color: var(--ink-2); }

/* Assistant */
.fp-asks { display: grid; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; }
.fp-asks li { padding: var(--space-sm) var(--space-md); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); color: var(--ink); font-size: var(--t-body-size); line-height: 1.4; }
.fp-art-card { padding: var(--space-xxl); }
.fp-hero-art { display: block; width: 100%; height: auto; }

/* Features index cards */
.fp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding: 0; margin: var(--space-xxl) 0 0; list-style: none; }
.fp-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); }
.fp-card p { color: var(--ink-2); }
.fp-card .lp-shot { max-width: 11rem; margin-bottom: var(--space-sm); }
.fp-card .lp-tile-art { max-width: 11rem; margin-inline: 0; margin-bottom: var(--space-sm); }
.fp-card h3 a { color: var(--ink); text-decoration: none; }
.fp-card h3 a:hover { color: var(--accent-ink); }
.fp-card h3 a::after { content: ""; position: absolute; inset: 0; }
.fp-card { position: relative; }
.fp-card:focus-within { outline: var(--border-selected) solid var(--accent-ink); outline-offset: 2px; }
.fp-card h3 a:focus-visible { outline-color: transparent; }

/* Compare and more-features links */
.fp-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: var(--space-lg) 0 0; list-style: none; }
.fp-links a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-md); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); background: var(--paper-soft); color: var(--ink); font-size: var(--t-subhead-size); font-weight: 600; text-decoration: none; }
.fp-links a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.fp-more { padding-block: var(--space-xxl) var(--space-4xl); }

@media (max-width: 64rem) {
  .fp-points, .fp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .fp-points, .fp-cards { grid-template-columns: minmax(0, 1fr); }
  .fp-steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}