.features-body { --header-height: var(--main-header-height); --tower-stage-height: clamp(calc(var(--space-12) * 6), 42vh, calc(var(--space-12) * 9)); padding-top: var(--header-height); background: var(--background); color: var(--foreground); }
.features-main, .features-footer { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); }
.features-main { padding-block: var(--space-8); }
.features-main h1, .features-main h2 { margin: 0; font-weight: 500; overflow-wrap: anywhere; text-wrap: balance; }
.features-main h1 { font-size: var(--fs-display-xl); line-height: var(--lh-display); word-break: keep-all; overflow-wrap: normal; }
.features-main p { margin: 0; }
.features-main a, .features-footer a { color: inherit; text-underline-offset: var(--space-1); }
.features-intro { margin-bottom: var(--space-8); }
.features-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); border-block: 1px solid var(--border-strong); padding-block: var(--space-8); }
.features-lead h2 { font-size: var(--fs-display-lg); line-height: var(--lh-display); }
.features-lead h2 a { text-decoration: none; }
.features-action { display: inline-flex; gap: var(--space-3); align-items: center; min-height: var(--control-h-m); font-size: var(--fs-sm); font-weight: 600; }
.features-action { margin-top: var(--space-3); }
.features-preview { list-style: none; padding: 0; margin: 0; }
.features-preview li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.features-preview li a { font-size: var(--fs-body-lg); }
.features-preview li span { font-size: var(--fs-xs); color: var(--muted-foreground); }
.tower-intro { padding-bottom: var(--space-6); }
.tower-comparison { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
#tower-comparison-panel { width: 100%; min-width: 0; max-width: 100%; }
.tower-controls { width: fit-content; }
.tower-controls[hidden], .tower-detail[hidden], [data-tower-details][hidden] { display: none; }
.tower-controls .tab-trigger[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }
.tower-chart { margin: var(--space-4) 0; }
[data-tower-boot="pending"] .tower-illustration, [data-tower-boot="pending"] .tower-chart-value { opacity: 0; }
[data-tower-boot="pending"] .tower-chart-bar { transform: scaleY(0); }
.tower-lineup-scroll { overflow-x: auto; overflow-y: hidden; padding-top: var(--space-8); scroll-snap-type: x proximity; }
.tower-chart ol { display: flex; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.tower-chart-column { flex: 1 0 calc(var(--space-8) * 4); min-width: 0; text-align: center; scroll-snap-align: center; scroll-margin-top: var(--header-height); }
.tower-chart-track { height: var(--tower-stage-height); position: relative; display: flex; justify-content: center; align-items: flex-end; border-bottom: 1px solid var(--border-strong); }
.tower-art-pending { display: block; width: 100%; height: 100%; }
.tower-illustration { display: block; flex-shrink: 0; height: 100%; width: auto; overflow: visible; transform: scale(var(--art-scale, 1)); transform-origin: center bottom; }
.tower-outline { opacity: 0; transition: opacity .2s ease; }
[data-theme="dark"] .tower-outline, [data-theme="hc-dark"] .tower-outline { filter: invert(1); }
.tower-chart-column:hover .tower-outline, .tower-chart-column:focus-within .tower-outline { opacity: 1; }
.tower-chart-bar { position: absolute; inset-block: 0; inset-inline-start: var(--space-3); width: 1px; border-inline-start: 1px dashed var(--foreground); transform-origin: center bottom; transform: scaleY(var(--tower-ratio)); pointer-events: none; }
.tower-chart-bar::before { content: ""; position: absolute; top: 0; left: calc(var(--space-2) * -1); width: var(--space-4); border-top: 1px solid var(--foreground); }
.tower-chart-value { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: var(--space-2); font-size: var(--fs-h3); font-weight: 600; font-variant-numeric: tabular-nums; transform: translateY(calc(var(--label-ratio, var(--tower-ratio)) * var(--tower-stage-height) * -1)); pointer-events: none; }
.tower-chart-column h2 { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-body); }
.tower-column-meta { margin-top: var(--space-1) !important; font-size: var(--fs-xs); color: var(--muted-foreground); }
.tower-chart-column .btn { margin-top: var(--space-1); font-size: var(--fs-xs); }
.tower-detail { border-top: 1px solid var(--border-strong); padding-block: var(--space-4); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.tower-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tower-detail h2 { font-size: var(--fs-h3); }
.tower-detail dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-12) * 3), 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.tower-detail dt { font-size: var(--fs-xs); color: var(--muted-foreground); }
.tower-detail dd { margin: var(--space-1) 0 0; font-size: var(--fs-sm); line-height: var(--lh-body); }
.features-footer { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.features-footer a { display: inline-flex; align-items: center; min-height: var(--control-h-m); }
@media (max-width: 640px) {
  .features-main, .features-footer { padding-inline: var(--space-4); }
  .features-main h1 { font-size: var(--fs-display-lg); }
  .features-lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .tower-chart ol { gap: var(--space-3); }
  .tower-chart-column { flex-basis: calc(var(--space-8) * 4); }
}
@media (prefers-reduced-motion: reduce) { .tower-outline { transition: none; } }