/* =====================================================================
   Storage 360 — shared components for storage-360.html and the
   blog-storage360-*.html posts: screenshots, HTML/CSS diagrams,
   whitepaper banner, synthetic-data note.
   Site palette: navy #002d5b / #0b1c39, coral #ff656a.
   All diagram text is HTML (never scaled SVG text) so it stays >= 12px
   on phones and reflows instead of overflowing.
   ===================================================================== */

/* ---------- Screenshots ---------- */
.s3-figure { margin: 32px 0; }
.s3-figure a { display: block; }
.s3-figure img { width: 100%; height: auto; display: block; border: 1px solid #e3e7f2; border-radius: 10px; box-shadow: 0 10px 30px rgba(11, 28, 57, .10); background: #fff; transition: box-shadow .25s, transform .25s; }
.s3-figure a:hover img { box-shadow: 0 16px 40px rgba(11, 28, 57, .16); transform: translateY(-2px); }
.s3-figure figcaption { font-size: 13.5px; line-height: 1.6; color: #6b7390; margin-top: 10px; }
.s3-figure figcaption b { color: #0b1c39; }
.section-dark .s3-figure figcaption { color: rgba(255, 255, 255, .7); }
.section-dark .s3-figure figcaption b { color: #fff; }

/* Screenshot gallery (product page) */
.s3-shot { background: #fff; border: 1px solid #e6e9f5; border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all .25s; }
.s3-shot:hover { border-color: #ff656a; box-shadow: 0 14px 40px rgba(11, 28, 57, .10); transform: translateY(-3px); }
.s3-shot a { display: block; background: #f5f7fc; border-bottom: 1px solid #e6e9f5; }
.s3-shot img { width: 100%; height: 210px; object-fit: cover; object-position: top left; display: block; }
.s3-shot .cap { padding: 16px 18px 18px; }
.s3-shot .cap h6 { font-size: 15px; font-weight: 700; color: #191d34; margin-bottom: 4px; }
.s3-shot .cap p { font-size: 13.5px; line-height: 1.55; color: #5b6486; margin: 0; }

/* ---------- Diagram frame ---------- */
.s3-diagram { background: #fff; border: 1px solid #e3e7f2; border-radius: 12px; padding: 24px 24px 18px; margin: 30px 0; box-shadow: 0 4px 18px rgba(11, 28, 57, .05); }
.s3-diagram .dg-title { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #ff656a; margin-bottom: 4px; }
.s3-diagram .dg-head { font-size: 18px; font-weight: 800; color: #0b1c39; margin-bottom: 16px; line-height: 1.35; }
.s3-diagram .dg-foot { font-size: 12.5px; line-height: 1.55; color: #7a829e; margin: 14px 0 0; }

/* ---------- Horizontal flow (steps with arrows) ---------- */
.s3-flow { display: flex; align-items: stretch; gap: 8px; }
.s3-flow .step { flex: 1 1 0; min-width: 0; background: #f5f7fc; border: 1px solid #dfe4f2; border-radius: 10px; padding: 14px 14px 12px; font-size: 13.5px; line-height: 1.5; color: #3d4663; }
.s3-flow .step .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #ff656a; color: #fff; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.s3-flow .step b { display: block; font-size: 14.5px; color: #0b1c39; margin-bottom: 4px; line-height: 1.35; }
.s3-flow .step.dark { background: #0b1c39; border-color: #0b1c39; color: rgba(255, 255, 255, .82); }
.s3-flow .step.dark b { color: #fff; }
.s3-flow .step.hot { background: #fff4f4; border-color: rgba(255, 101, 106, .45); }
.s3-flow .arrow { align-self: center; color: #ff656a; font-size: 16px; flex: 0 0 auto; }
.s3-flow.loop-note + .loop-back { text-align: center; font-size: 13px; color: #7a829e; margin-top: 10px; }
.s3-flow.loop-note + .loop-back i { color: #ff656a; margin-right: 6px; }

/* ---------- Layered architecture stack ---------- */
.s3-stack .layer { display: flex; gap: 18px; align-items: flex-start; border-radius: 10px; padding: 14px 18px; border: 1px solid #dfe4f2; background: #f5f7fc; }
.s3-stack .layer .lbl { flex: 0 0 210px; }
.s3-stack .layer .lbl b { display: block; font-size: 15px; color: #0b1c39; line-height: 1.3; }
.s3-stack .layer .lbl small { display: block; font-size: 12.5px; color: #6b7390; margin-top: 3px; line-height: 1.45; }
.s3-stack .layer .chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.s3-stack .chips span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 16px; background: #fff; border: 1px solid #dfe4f2; color: #002d5b; line-height: 1.3; }
.s3-stack .layer.app { background: #fff4f4; border-color: rgba(255, 101, 106, .45); }
.s3-stack .layer.app .chips span { border-color: rgba(255, 101, 106, .35); }
.s3-stack .layer.ai { background: #eef2fb; }
.s3-stack .layer.lake { background: #0b1c39; border-color: #0b1c39; }
.s3-stack .layer.lake .lbl b { color: #fff; }
.s3-stack .layer.lake .lbl small { color: rgba(255, 255, 255, .7); }
.s3-stack .layer.lake .chips span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.s3-stack .join { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 92px; font-size: 12.5px; color: #6b7390; }
.s3-stack .join i { color: #ff656a; }
.s3-stack .boundary { border: 2px dashed rgba(0, 45, 91, .35); border-radius: 14px; padding: 12px; position: relative; margin-top: 6px; }
.s3-stack .boundary .tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #002d5b; background: #fff; padding: 0 8px; position: absolute; top: -10px; left: 16px; }

/* ---------- Horizontal bar chart (single series, HTML) ---------- */
.s3-bars .bar-row { display: grid; grid-template-columns: 190px 1fr 64px; gap: 12px; align-items: center; margin: 7px 0; font-size: 13.5px; color: #3d4663; }
.s3-bars .bar-row .k { line-height: 1.3; }
.s3-bars .bar-row .v { text-align: right; font-weight: 700; color: #0b1c39; font-variant-numeric: tabular-nums; }
.s3-bars .track { height: 14px; background: #eef1f8; border-radius: 3px; position: relative; }
.s3-bars .fill { height: 100%; background: #002d5b; border-radius: 0 4px 4px 0; min-width: 3px; }
.s3-bars .bar-row.hl .fill { background: #ff656a; }
.s3-bars .bar-row:hover .fill { filter: brightness(1.15); }
.s3-bars .ref { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #0b1c39; opacity: .55; }

/* ---------- Split bar (diverging: under / parity / over) ---------- */
.s3-split { display: flex; gap: 2px; height: 44px; border-radius: 6px; overflow: hidden; }
.s3-split > div { display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.s3-split .under { background: #2f6fb3; }
.s3-split .par { background: #8a93a8; }
.s3-split .over { background: #d9474d; }
.s3-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: #3d4663; }
.s3-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }

/* ---------- Waterfall (rows) ---------- */
.s3-wf .wf-row { display: grid; grid-template-columns: 200px 1fr 80px; gap: 12px; align-items: center; margin: 9px 0; font-size: 13.5px; color: #3d4663; }
.s3-wf .wf-row .v { text-align: right; font-weight: 700; color: #0b1c39; font-variant-numeric: tabular-nums; }
.s3-wf .wf-track { height: 22px; position: relative; }
.s3-wf .wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: #002d5b; }
.s3-wf .wf-bar.neg { background: #d9474d; }
.s3-wf .wf-bar.net { background: #1f8a5b; }

/* ---------- Insight anatomy ---------- */
.s3-anatomy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.s3-anatomy .card-mock { background: #fff; border: 1px solid #dfe4f2; border-left: 4px solid #2563eb; border-radius: 10px; padding: 18px 18px 14px; font-size: 14px; color: #3d4663; box-shadow: 0 6px 22px rgba(11, 28, 57, .07); }
.s3-anatomy .card-mock .row1 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.s3-anatomy .pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: #eef1f8; color: #0b1c39; }
.s3-anatomy .pill.risk { background: #fde8e9; color: #c4333a; }
.s3-anatomy .part { position: relative; padding: 6px 8px 6px 34px; border-radius: 6px; margin: 4px 0; line-height: 1.5; }
.s3-anatomy .part:hover { background: #fff4f4; }
.s3-anatomy .part .num, .s3-anatomy .legend .num { position: absolute; left: 6px; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: #ff656a; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.s3-anatomy .part.finding { font-weight: 800; color: #0b1c39; font-size: 15px; }
.s3-anatomy .part .conf { margin-left: auto; }
.s3-anatomy .legend { list-style: none; padding: 0; margin: 0; }
.s3-anatomy .legend li { position: relative; padding: 4px 0 10px 32px; font-size: 14px; line-height: 1.55; color: #3d4663; }
.s3-anatomy .legend li .num { left: 0; top: 6px; }
.s3-anatomy .legend li b { color: #0b1c39; }
.section-dark .s3-anatomy .legend li { color: rgba(255, 255, 255, .82); }
.section-dark .s3-anatomy .legend li b { color: #fff; }

/* ---------- Timeline (a morning with Storage 360) ---------- */
.s3-timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }
.s3-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 18px; position: relative; padding-bottom: 22px; }
.s3-timeline li::before { content: ''; position: absolute; left: 118px; top: 8px; bottom: -8px; width: 2px; background: #dfe4f2; }
.s3-timeline li:last-child::before { display: none; }
.s3-timeline .t { font-weight: 800; color: #ff656a; font-size: 15px; text-align: right; padding-top: 1px; }
.s3-timeline .body { position: relative; padding-left: 24px; }
.s3-timeline .body::before { content: ''; position: absolute; left: 9px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #ff656a; }
.s3-timeline .body b { display: block; color: #0b1c39; font-size: 16px; margin-bottom: 3px; }
.s3-timeline .body p { font-size: 14.5px; line-height: 1.6; color: #506172; margin: 0; }
.s3-timeline .body .who { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #002d5b; background: rgba(255, 101, 106, .1); border: 1px solid rgba(255, 101, 106, .25); padding: 2px 8px; border-radius: 12px; margin-bottom: 6px; }

/* ---------- Competitive position mini-diagram ---------- */
.s3-gap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s3-gap .g { border-radius: 10px; padding: 14px; border: 1px solid #dfe4f2; background: #f5f7fc; font-size: 13.5px; line-height: 1.5; color: #3d4663; }
.s3-gap .g b { display: block; font-size: 15px; color: #0b1c39; margin-bottom: 4px; }
.s3-gap .g .big { display: block; font-size: 26px; font-weight: 800; color: #002d5b; line-height: 1.1; margin-bottom: 6px; }

/* ---------- Whitepaper banner ---------- */
.s3-wp { display: flex; gap: 22px; align-items: center; background: linear-gradient(135deg, #0b1c39 0%, #002d5b 100%); border-radius: 14px; padding: 26px 28px; margin: 40px 0; color: #fff; box-shadow: 0 14px 40px rgba(11, 28, 57, .18); }
.s3-wp .ico { flex: 0 0 64px; height: 76px; border-radius: 8px; background: #fff; color: #ff656a; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 6px 6px 0 rgba(255, 101, 106, .55); }
.s3-wp .txt { flex: 1 1 auto; min-width: 0; }
.s3-wp .txt .lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #ff656a; margin-bottom: 4px; }
.s3-wp .txt h4 { color: #fff; font-size: 20px; font-weight: 800; margin: 0 0 6px; line-height: 1.3; }
.s3-wp .txt p { color: rgba(255, 255, 255, .75) !important; font-size: 14.5px !important; line-height: 1.6 !important; margin: 0 !important; }
.s3-wp .btn-wp { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #ff656a; color: #fff !important; font-weight: 700; font-size: 14.5px; padding: 13px 22px; border-radius: 8px; text-decoration: none !important; border: 2px solid #ff656a; transition: all .25s; white-space: nowrap; }
.s3-wp .btn-wp:hover { background: #e8555a; border-color: #e8555a; transform: translateY(-2px); }

/* ---------- Synthetic-data note ---------- */
.s3-note { font-size: 13px; line-height: 1.6; color: #6b7390; background: #f5f7fc; border: 1px dashed #cdd3e6; border-radius: 8px; padding: 10px 14px; margin: 18px 0; }
.s3-note i { color: #ff656a; margin-right: 6px; }
.section-dark .s3-note { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .75); }

/* ---------- Mobile swipe hint for wide tables ---------- */
.s3-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .s3-anatomy { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .s3-diagram { padding: 18px 16px 14px; }
    .s3-diagram .dg-head { font-size: 16.5px; }
    .s3-flow { flex-direction: column; }
    .s3-flow .arrow { transform: rotate(90deg); margin: -2px 0; }
    .s3-stack .layer { flex-direction: column; gap: 10px; }
    .s3-stack .layer .lbl { flex: 0 0 auto; }
    .s3-stack .join { padding-left: 10px; }
    .s3-bars .bar-row { grid-template-columns: 108px 1fr 52px; gap: 8px; font-size: 13px; }
    .s3-wf .wf-row { grid-template-columns: 118px 1fr 58px; gap: 8px; font-size: 13px; }
    .s3-split > div { font-size: 12.5px; }
    .s3-gap { grid-template-columns: 1fr; }
    .s3-timeline li { grid-template-columns: 58px 1fr; gap: 10px; }
    .s3-timeline li::before { left: 82px; }
    .s3-timeline .t { font-size: 13.5px; }
    .s3-wp { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
    .s3-wp .btn-wp { white-space: normal; }
    .s3-shot img { height: 180px; }
}
.s3-gap .g .li { display: block; position: relative; padding-left: 14px; margin-bottom: 5px; }
.s3-gap .g .li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #ff656a; }