/* Product-story additions for the overview. */
.xylen-story-expansion { --story-line: rgba(116, 201, 230, .18); --story-muted: #91a5b6; padding: clamp(44px, 7vw, 104px) 0 20px; }
.story-section { position: relative; overflow: hidden; margin: 0 auto clamp(34px, 6vw, 78px); padding: clamp(26px, 5vw, 62px); border: 1px solid var(--story-line); border-radius: 28px; background: linear-gradient(135deg, rgba(12, 25, 37, .86), rgba(8, 14, 22, .88)); box-shadow: 0 28px 80px rgba(0, 0, 0, .16); }
.story-section::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(transparent, #13b6e8, #7356ea, transparent); opacity: .8; }
.story-heading { max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.story-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #55c9ed; font: 700 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .17em; text-transform: uppercase; }
.story-eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; box-shadow: 0 0 12px currentColor; }
.story-heading h2, .story-cta h2 { margin: 14px 0 12px; color: #f4f8fb; font-size: clamp(28px, 4vw, 48px); line-height: 1.06; letter-spacing: -.045em; }
.story-heading > p, .story-cta p { max-width: 690px; margin: 0; color: var(--story-muted); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; }
.story-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.story-step { position: relative; padding: 0 24px 10px 0; animation: story-arrive .65s both; animation-delay: calc(var(--step) * 90ms); }
.story-step-no { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(69, 197, 236, .45); border-radius: 50%; color: #7ee0fb; background: #0d2634; font: 700 12px ui-monospace, monospace; box-shadow: 0 0 26px rgba(27, 173, 218, .12); }
.story-step-line { position: absolute; top: 20px; left: 48px; right: 0; height: 1px; background: linear-gradient(90deg, rgba(65, 195, 233, .55), rgba(65, 195, 233, .06)); transform-origin: left; animation: story-line-grow .8s both; animation-delay: calc(var(--step) * 100ms + 180ms); }
.story-step h3 { margin: 24px 0 9px; color: #eff6fa; font-size: 17px; line-height: 1.35; }
.story-step p, .access-card p { margin: 0; color: var(--story-muted); font-size: 14px; line-height: 1.7; }
.story-caption { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; color: #71889b; font-size: 12px; }
.story-caption span { width: 7px; height: 7px; border-radius: 50%; background: #27c7e7; box-shadow: 0 0 14px #27c7e7; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.boundary-card { position: relative; min-height: 240px; padding: 28px; border: 1px solid var(--story-line); border-radius: 20px; background: rgba(255, 255, 255, .025); }
.boundary-card h3 { margin: 14px 0 18px; color: #f1f7fa; font-size: 20px; }
.boundary-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.boundary-card li { position: relative; padding-left: 22px; color: #a8b7c4; font-size: 14px; line-height: 1.65; }
.boundary-card li::before { position: absolute; left: 0; color: #57c9e8; content: "•"; }
.boundary-private li::before { color: #a990ff; }
.boundary-symbol { color: #63d7f3; font: 26px ui-monospace, monospace; }
.boundary-private .boundary-symbol { color: #b1a0ff; }
.access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.access-card { min-height: 190px; padding: 24px; border: 1px solid var(--story-line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.access-card:hover { transform: translateY(-5px); border-color: rgba(82, 204, 236, .5); background: rgba(22, 47, 62, .5); }
.access-card > span, .story-faq-item summary > span { color: #55c9ed; font: 700 11px ui-monospace, monospace; letter-spacing: .12em; }
.access-card h3 { margin: 30px 0 9px; color: #f1f7fa; font-size: 19px; }
.story-faq-list { border-top: 1px solid var(--story-line); }
.story-faq-item { border-bottom: 1px solid var(--story-line); }
.story-faq-item summary { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 8px; padding: 20px 4px; color: #edf4f8; font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; }
.story-faq-item summary::-webkit-details-marker { display: none; }
.story-faq-item summary i { position: relative; width: 18px; height: 18px; }
.story-faq-item summary i::before, .story-faq-item summary i::after { content: ""; position: absolute; top: 8px; left: 3px; width: 12px; height: 1px; background: #67d1ef; transition: transform .25s ease; }
.story-faq-item summary i::after { transform: rotate(90deg); }
.story-faq-item[open] summary i::after { transform: rotate(0); }
.story-faq-item > p { max-width: 760px; margin: -3px 0 22px 52px; color: var(--story-muted); font-size: 14px; line-height: 1.75; animation: story-faq-in .25s ease both; }
.story-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 5vw, 56px); border: 1px solid rgba(38, 183, 224, .36); border-radius: 24px; background: radial-gradient(ellipse at 0 100%, rgba(13, 153, 184, .2), transparent 55%), linear-gradient(120deg, #10222c, #121525 70%, #201938); }
.story-cta > div:first-child { max-width: 620px; }
.story-cta h2 { font-size: clamp(26px, 3.4vw, 40px); }
.story-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.story-cta-actions .btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; white-space: nowrap; }
.story-cta-actions .btn span { font-size: 18px; transition: transform .2s ease; }
.story-cta-actions .btn:hover span { transform: translate(2px, -2px); }
@keyframes story-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes story-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) { .story-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; } .story-step:nth-child(2) .story-step-line { display: none; } .story-cta { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { .xylen-story-expansion { padding-top: 36px; } .story-section { padding: 24px 20px; border-radius: 21px; } .story-route, .boundary-grid, .access-grid { grid-template-columns: 1fr; } .story-step { padding-right: 0; } .story-step-line { right: 0; } .story-step:nth-child(2) .story-step-line { display: block; } .story-step:nth-child(4) .story-step-line { display: none; } .boundary-card { min-height: 0; padding: 22px; } .access-card { min-height: 0; } .access-card h3 { margin-top: 17px; } .story-faq-item summary { grid-template-columns: 34px 1fr 20px; font-size: 15px; } .story-faq-item > p { margin-left: 42px; } .story-cta { padding: 26px 21px; } .story-cta-actions { width: 100%; flex-direction: column; } .story-cta-actions .btn { justify-content: space-between; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .story-step, .story-step-line, .story-faq-item > p { animation: none; } .access-card, .story-faq-item summary i::before, .story-faq-item summary i::after, .story-cta-actions .btn span { transition: none; } .access-card:hover { transform: none; } }