.intro-frontier { margin: 28px 0; padding: 20px; border: 0; border-radius: 12px; background: #fff; }
.frontier-example-heading { color: #c44c20; font-size: 13px; font-weight: 700; letter-spacing: .04em; margin-bottom: 22px; }
.frontier-example-scroll { overflow-x: auto; }
.frontier-example-graph { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 24px 130px 130px; column-gap: 40px; row-gap: 10px; min-width: 680px; position: relative; }
.frontier-example-column { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #747d90; }
.frontier-example-graph > svg { position: absolute; top: 34px; left: 0; width: 100%; height: 270px; pointer-events: none; }
.frontier-example-graph > svg path { fill: none; stroke: #aeb4c1; stroke-width: 1.5; }
.frontier-example-card { z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 13px; border: 1px solid #e1e4eb; border-left: 3px solid #d94f19; border-radius: 7px; background: #f7f8fb; }
.frontier-example-card.active { border-left-color: #5065ff; }
.frontier-example-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 10px; }
.frontier-example-meta span:first-child { color: #4e63e7; font-weight: 700; }
.frontier-example-meta span:last-child { color: #737c8f; }
.frontier-example-card strong { color: #20232b; font-size: 14px; line-height: 1.3; }
.frontier-example-reason { color: #737c8f; font-size: 11px; line-height: 1.4; }
.intro-frontier figcaption { color: #737c8f; font-size: 11px; margin-top: 14px; }
.frontier-example-card[data-position="frontier-position-1"] { grid-area: 2 / 1; }
.frontier-example-card[data-position="frontier-position-2"] { grid-area: 2 / 2; }
.frontier-example-card[data-position="frontier-position-3"] { grid-area: 3 / 2; }
.frontier-example-card[data-position="frontier-position-4"] { grid-area: 2 / 3; }
.frontier-example-card[data-position="frontier-position-5"] { grid-area: 3 / 3; }