/* plan/370 — board LandingWeb. Only what the shared kit (/lib/site.css) does not already have. */
.hero h1 { font-size: 28px; line-height: 1.3; }
.hero .lead { font-size: 15px; }
.btn .sub { display: block; font-size: 12px; font-weight: 400; opacity: .9; }
a.btn { text-decoration: none; color: inherit; } a.btn.primary { color: hsl(var(--primary-fg)); }
.shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.shots img { flex: none; width: 46%; max-width: 220px; border-radius: 18px; border: 1px solid hsl(var(--border)); scroll-snap-align: start; }
.feat { display: flex; gap: 12px; align-items: flex-start; }
.feat i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: hsl(var(--primary) / .12); color: hsl(var(--primary));
  display: grid; place-items: center; font-style: normal; font-weight: 700; }
.cmp { display: flex; align-items: center; padding: 7px 0; border-top: 1px solid hsl(var(--border)); }
.cmp > span { width: 76px; text-align: center; } .cmp > span:first-child { flex: 1; width: auto; text-align: start; }
.cmp.hd { border-top: 0; font-weight: 700; } .cmp .pro { color: hsl(var(--primary)); font-weight: 700; }
.kv { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid hsl(var(--border)); }
.kv > :first-child { flex: 1; white-space: nowrap; } .kv code { direction: ltr; unicode-bidi: isolate; font-size: 12px; word-break: break-all; }
.step { display: flex; gap: 10px; align-items: flex-start; }
.step b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-fg)); text-align: center; line-height: 24px; font-size: 13px; }
footer { text-align: center; padding: 8px 0 24px; }