/* /features/storage — live disk-space counter widget + reworked feature cards.
   Brand tokens only (var(--accent) #2bb3f3 / var(--accent-dark) #042d4a); no
   hover-lift on the cards since they are not clickable targets. cortex-t5n0b93 */

/* --- Live counter widget ---
   The counter panel used to repeat the navy hero's background, so the hero and
   the counter read as one undifferentiated slab. It now uses the module's
   established light-panel alternation instead — the same accent-muted fill and
   navy hairline as .controlcenter-setup on /features/controlcenter — so navy
   hero -> pale panel -> white cards gives the page a rhythm. Contrast on the
   composited panel (#eef9fe): navy text 13.3:1, --text 9.1:1. cortex-waswdua */
.storage-live {
	position: relative;
	text-align: center;
	background: var(--accent-muted);
	border: 1px solid rgba(4, 45, 74, 0.12);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-5);
	margin-bottom: 28px;
	overflow: hidden;
}

/* Navy chip on the pale panel: white on navy is 14.2:1, and the accent dot
   keeps 6.0:1 against it. */
.storage-live__badge {
	display: inline-block;
	color: var(--accent-fg);
	background-color: var(--accent-dark);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
	margin-bottom: var(--space-4);
}

.storage-live__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-circle);
	background-color: var(--accent);
	margin-right: var(--space-2);
	vertical-align: middle;
	animation: storage-live-pulse 1.6s ease-in-out infinite;
}

@keyframes storage-live-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(43, 179, 243, 0.55); }
	50%      { opacity: 0.55; box-shadow: 0 0 0 7px rgba(43, 179, 243, 0); }
}

.storage-live__kicker {
	display: block;
	color: var(--text);
	font-size: calc(1.0em + 0.2vw);
	font-weight: 300;
	margin-bottom: var(--space-2);
}

/* Tabular figures are load-bearing, not decoration: the tail digits turn up to
   ~34 times a second, and proportional digits would make the line breathe in
   and out on every frame. nowrap keeps the figure on one line while the
   whole-part width changes during the count-up reveal. */
.storage-live__value {
	display: block;
	color: var(--accent-dark);
	font-weight: 700;
	line-height: 1.05;
	font-size: calc(3.0em + 2.4vw);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

/* The eight fast decimals. Smaller and dimmer so the headline still reads
   "47.1 GB" at a glance while the precision tail carries the motion.
   rgba(4,45,74,0.55) over the panel is 3.4:1 — AA for text this size. */
.storage-live__tail {
	font-size: 0.38em;
	font-weight: 600;
	letter-spacing: 0;
	color: rgba(4, 45, 74, 0.55);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.storage-live__meta {
	display: block;
	color: var(--text);
	font-size: calc(0.95em + 0.1vw);
	font-weight: 300;
	margin-top: var(--space-3);
}

/* Reduced motion: no pulsing dot, and no ticking decimals either. Dropping the
   precision tail leaves the static, familiar one-decimal figure ("47.1 GB");
   the script matches this by painting once and never starting a frame loop. */
@media (prefers-reduced-motion: reduce) {
	.storage-live__dot { animation: none; }
	.storage-live__tail { display: none; }
}

/* The nine-decimal figure is a long string — ease the type down on phones so it
   never overruns the panel. */
@media screen and (max-width: 767px) {
	.storage-live__value {
		font-size: calc(2.0em + 2.4vw);
	}
}

/* --- Reworked feature cards --- */
.storage-cards {
	margin-top: var(--space-2);
}

.storage-card {
	height: 100%;
	border: 1px solid #e4e8ec;
	border-radius: var(--radius-lg);
	background-color: #fff;
	padding: var(--space-6) var(--space-6) var(--space-5);
}

.storage-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-circle);
	background-color: var(--accent-muted);
	color: var(--accent-dark);
	margin-bottom: var(--space-4);
}

.storage-card__icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.storage-card__title {
	font-size: 1.6em;
	margin-bottom: var(--space-3);
	color: var(--accent-dark);
}

.storage-card__text {
	color: #555;
	line-height: 175%;
	margin-bottom: 0;
}

/* Equal-height cards side by side on tablet and up. */
@media screen and (min-width: 768px) {
	.storage-cards {
		display: flex;
		flex-wrap: wrap;
	}
	.storage-cards > [class*="col-"] {
		display: flex;
	}
}