.product-demo { margin-top: 32px; border: 1px solid var(--line, #2a424d); border-radius: 22px; padding: clamp(14px, 3vw, 30px); background: #0c1d27; }
.product-demo-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 18px; color: #adbec6; font-size: 12px; }
.product-demo-label span:first-child { color: #81d3e7; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }
.product-demo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-demo-card { appearance: none; width: 100%; min-width: 0; border: 1px solid #355360; border-radius: 14px; padding: 17px; color: #f0f6f5; background: #102630; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, background .15s; }
.product-demo-card:hover { border-color: #81d3e7; }
.product-demo-card[aria-selected="true"] { border-color: #81d3e7; background: #153342; box-shadow: inset 0 3px #81d3e7; }
.product-demo-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a8d7e7; font-weight: 700; }
.product-demo-card-title svg { width: 31px; height: 31px; flex: none; }
.product-demo-card[data-demo-card="wind"] svg { color: #85dfb2; }
.product-demo-card strong { display: block; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.035em; }
.product-demo-card strong span { font-size: 14px; font-weight: 550; letter-spacing: 0; }
.product-demo-card-subtitle { font-size: 12px; line-height: 1.6; color: #adbec6; }
.product-demo-card-action { margin-top: auto; font-size: 12px; color: #81d3e7; }
.product-demo-detail { margin-top: 18px; padding: clamp(15px, 2.6vw, 28px); border: 1px solid #355360; border-radius: 14px; background: #081923; }
.product-demo-detail-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.product-demo-kicker { font-size: 11px; font-weight: 650; color: #a8d7e7; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.product-demo-detail h3 { font-size: clamp(21px, 3vw, 28px); line-height: 1.2; }
.product-demo-explanation { margin-top: 13px; font-size: 14px; max-width: 72ch; }
.product-demo-chart-label { display: flex; justify-content: space-between; gap: 10px; color: #adbec6; font-size: 11px; margin-top: 24px; }
.product-demo-chart { width: 100%; height: auto; overflow: visible; }
.product-demo-chart text { fill: #adbec6; font: 11px ui-sans-serif, system-ui, sans-serif; }
.product-demo-line { fill: none; stroke: #85dfb2; stroke-width: 2.3; stroke-linejoin: round; }
.product-demo-gust-line { fill: none; stroke: #b8d1d9; stroke-width: 1.5; stroke-dasharray: 5 4; }
.product-demo-key { display: inline-block; width: 13px; height: 2px; background: #85dfb2; vertical-align: middle; margin-left: 8px; }
.product-demo-key.gust { background: #b8d1d9; }
.product-demo-data { margin-top: 12px; border-top: 1px solid #2a424d; padding-top: 15px; font-size: 12px; color: #adbec6; }
.product-demo-data summary { cursor: pointer; width: fit-content; padding-block: 5px; }
.product-demo-table-wrap { overflow-x: auto; margin-top: 12px; }
.product-demo-data table { width: 100%; border-collapse: collapse; text-align: left; }
.product-demo-data caption { text-align: left; padding-bottom: 10px; }
.product-demo-data th, .product-demo-data td { padding: 7px; border-bottom: 1px solid #2a424d; }
.product-demo button:focus-visible, .product-demo summary:focus-visible, .product-demo-detail:focus-visible { outline: 3px solid #78e4cf; outline-offset: 3px; }
@media (max-width: 600px) {
  .product-demo-tabs { gap: 7px; }
  .product-demo-card { padding: 13px 9px; gap: 10px; }
  .product-demo-card-title { font-size: 13px; }
  .product-demo-card-title svg { width: 20px; height: 20px; }
  .product-demo-card strong { font-size: 27px; }
  .product-demo-card strong span { display: block; font-size: 11px; margin-top: 4px; }
  .product-demo-card-subtitle { display: none; }
  .product-demo-card-action { font-size: 10px; line-height: 1.5; }
  .product-demo-detail { padding: 14px 10px; }
  .product-demo-chart text { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .product-demo-card { transition: none; } }