/* subscription calculator (sample C, months 1, 2, 3, 6, 12) */
.subsec { padding: 0 0 16vh; min-height: 72vh; display: flex; align-items: center }
.subsec > .wrap { width: 100%; padding-top: 6vh; padding-bottom: 6vh; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 70px; align-items: center }
.subsec h2 { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.03; letter-spacing: -.045em; margin: 0 } .subsec h2 em { font-style: normal; color: #1f7f97; background: none; -webkit-text-fill-color: currentColor }
.subsec .num { font-variant-numeric: tabular-nums }
.srev { margin-top: 36px; max-width: 360px } .srev .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #6b7280 } .srev .row b { font-size: 22px; color: #15171a; letter-spacing: -.02em }
.srev input[type=range] { width: 100%; accent-color: #1f7f97; margin-top: 12px }
.snote { font-size: 12px; color: #9aa0a6; margin-top: 14px; max-width: 360px; line-height: 1.5 }
.scols { display: flex; gap: 16px; align-items: flex-end; height: 380px }
.scols > div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center }
.scols b { font-size: clamp(14px, 1.3vw, 19px); letter-spacing: -.02em; font-weight: 700; white-space: nowrap } .scols span { font-size: 13px; color: #8a9099; margin-top: 4px }
.scols i { display: block; width: 100%; max-width: 80px; margin: 12px 0; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #dbe7ea, #eef4f6); transition: height .6s cubic-bezier(.2,.8,.2,1) }
.scols .mid i { background: linear-gradient(180deg, #a9cbd4, #d6e7ec) }
.scols .last b { color: #1f7f97; font-size: clamp(16px, 1.6vw, 23px) }
.scols .last i { background: linear-gradient(180deg, #1f7f97, #0f4c5e); box-shadow: 0 0 0 6px rgba(31,127,151,.12), 0 20px 40px rgba(15,76,94,.25) }
@media (max-width: 900px) { .subsec > .wrap { grid-template-columns: 1fr; gap: 40px } .scols { gap: 8px; height: 300px } .scols b { font-size: 12px } .scols span { font-size: 11px } }

/* background D: soft shade at the bottom (like under the globe) + a slow dot wave */
.subsec { position: relative; overflow: hidden }
.subsec > .wrap { position: relative; z-index: 1 }
.subsec .sbg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(246,248,250,0) 0%, rgba(233,237,240,.35) 50%, #e4eaed 82%, rgba(246,248,250,0) 100%) }
.subsec canvas.wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 45%, #000 75%, transparent) }