/* ==========================================================================
 * QynTro AI - Model Deck (#features)
 *
 * Picking a category powers a console up and brings every model in it online,
 * one bay at a time. Replaces the floating-output field that came before, and
 * before that five static banner PNGs weighing 5.5 MB - 4.1 MB of which was
 * fetched for panes that start hidden.
 *
 * ADDITIVE. Blade untouched. Two prefixes only: .qft- is the tab deck (kept
 * unchanged from the previous build) and .qcs- is the console. The original
 * .tab-content is hidden rather than removed, so Bootstrap's own tab machinery
 * keeps working underneath.
 *
 * SPECIFICITY: qyntro-premium.css already styles these buttons through
 * `.frontend-body #features .features-nav-menu .features-nav-menu-inner
 * .nav-tabs .nav-link` (1 id + 5 classes). The .qft- rules repeat that chain
 * and add .qft-tab so they win. Shortening the selector silently loses to it.
 * The .qcs- rules style elements this stylesheet owns outright, so a plain
 * #features scope is enough for them.
 *
 * NO `transform` ON .nav-link, EVER: qyntro-premium.js gives these buttons the
 * qp-tilt treatment, which writes an inline transform on every mousemove. Any
 * transform declared here is dead the moment the cursor touches the button, so
 * hover and active states are built from colour, border and shadow only.
 *
 * DEPLOY ORDER MATTERS: upload FIRST, then bump ?v=. 7-day cache.
 * ========================================================================== */

/* The banners never become visible, whatever happens to the JS. Paired with the
   src-stripping in qyntro-tabs.js, which is what actually stops the download.
   .qft-live goes on #features ITSELF, so this is a compound selector, not a
   descendant one - written with a space it matches nothing at all. */
.frontend-body #features.qft-live .tab-content,
#features.qft-live .tab-content { display: none !important; }

/* The theme leaves 96px under this section, sized for the banner panes that
   used to end it. The console has its own border and corner brackets, so its
   bottom edge already reads as a finish - stacked with the next section's own
   96px of lead-in that came to 186px of empty page. Trimmed to 24px, which
   leaves the 120px break between sections and nothing more.
   #features.qft-live is one id + one class, so it outranks the theme's plain
   #features wherever the two files happen to load in relation to each other. */
#features.qft-live { padding-bottom: 24px; }
@media (max-width: 768px) {
	/* The theme drops to 48px here; keep the cut in proportion. */
	#features.qft-live { padding-bottom: 16px; }
}

/* The model band sits directly above this section with 12px of its own padding,
   which left 32px between it and the heading - close enough that the two read
   as one block. And the theme gives the heading 80px of clearance before the
   tabs, which is tight for a heading this large. Both open up here rather than
   in the theme's own file, so the section keeps its spacing whatever else
   changes upstream. */
#features.qft-live { padding-top: 40px; }
#features.qft-live .features-nav-menu { margin-top: 30px; }

/* ==========================================================================
 * THE DECK
 * ========================================================================== */
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab {
	position: relative;
	overflow: hidden;
	padding: 16px 14px 15px;
	text-align: center;
}

/* A light pass across the active tab. Uses `left` rather than a transform for
   the reason in the header note. */
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 55%;
	background: linear-gradient(100deg, transparent, rgba(209, 254, 23, .13), transparent);
	pointer-events: none;
	opacity: 0;
	z-index: 0;
}
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab.active::before {
	opacity: 1;
	animation: qft-sheen 3.6s ease-in-out infinite;
}
@keyframes qft-sheen {
	0%        { left: -70%; }
	55%, 100% { left: 130%; }
}

.qft-ico {
	display: block;
	margin: 0 auto 10px;
	width: 30px;
	height: 30px;
	color: var(--qp-text-muted, #8b949e);
	transition: color .3s ease, filter .3s ease;
	position: relative;
	z-index: 1;
}
.qft-ico svg { display: block; width: 100%; height: 100%; }

.qft-label {
	display: block;
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.25;
}

.qft-count {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-top: 9px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .09em;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .07);
	color: var(--qp-text-muted, #8b949e);
	transition: all .3s ease;
}
/* Fewer than three models reads as a shortfall next to "16 MODELS", so those
   categories advertise that they are new instead of how few they are. */
.qft-count.qft-new {
	background: rgba(255, 61, 154, .14);
	border-color: rgba(255, 61, 154, .4);
	color: #ff7ab8;
}

.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab:hover .qft-ico {
	color: var(--qp-lime, #d1fe17);
}
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab.active .qft-ico {
	color: var(--qp-lime, #d1fe17);
	filter: drop-shadow(0 0 10px rgba(209, 254, 23, .6));
}
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab.active .qft-count {
	background: rgba(209, 254, 23, .16);
	border-color: rgba(209, 254, 23, .45);
	color: var(--qp-lime, #d1fe17);
}

/* Countdown to the next tab. */
.qft-rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .07);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 2;
}
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab.active .qft-rail { opacity: 1; }
.qft-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, rgba(209, 254, 23, .5), var(--qp-lime, #d1fe17));
	box-shadow: 0 0 12px rgba(209, 254, 23, .8);
}
.frontend-body #features .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.qft-tab.active.qft-running .qft-fill {
	animation: qft-fill var(--qft-dur, 8s) linear forwards;
}
@keyframes qft-fill { from { width: 0; } to { width: 100%; } }
/* Paused on hover and whenever the section is off-screen. */
.qft-deck-paused .qft-fill { animation-play-state: paused !important; }
@keyframes qfw-rise {
	from { transform: translate3d(0, 26px, 0) scale(.86); }
	to   { transform: none; }
}
@keyframes qfw-bob {
	from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
	to   { transform: translate3d(0, var(--y, -20px), 0) rotate(calc(var(--r, 0deg) * -1)); }
}
@keyframes qfw-eq { from { height: 8%; } to { height: var(--h, 60%); } }
@keyframes qfw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes qfw-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* ==========================================================================
 * MODEL DECK — the "cold start" console (.qcs-*)
 *
 * Replaces the floating-output field that used to live here. The section's job
 * is to make "every AI model, one subscription" feel true, so this shows the
 * WHOLE roster of the chosen category coming online, rather than a sample of
 * what the models produce.
 *
 * Everything is prefixed .qcs- and scoped under #features, so nothing here can
 * reach the rest of the page. No font-family anywhere on purpose: the deck
 * inherits the site's face, and shipping one would flash the wrong type on load.
 * ========================================================================== */
#features .qcs {
	position: relative;
	margin-top: 26px;
	border: 1px solid #1b2126;
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(209,254,23,.05) 0%, rgba(0,0,0,0) 58%),
		linear-gradient(180deg, #0b0e11 0%, #07090b 100%);
	overflow: hidden;
	contain: paint;
}

/* Corner brackets. Instrument-panel language: they frame the readout without
   adding another border weight. */
#features .qcs-cnr {
	position: absolute;
	width: 16px; height: 16px;
	border: 1px solid rgba(209,254,23,.55);
	pointer-events: none;
}
#features .qcs-cnr.tl { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
#features .qcs-cnr.tr { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }
#features .qcs-cnr.bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
#features .qcs-cnr.br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* Power rail across the top: fills as the category comes online. */
#features .qcs-rail {
	position: absolute; top: 0; left: 0; right: 0;
	height: 2px;
	background: rgba(255,255,255,.05);
}
#features .qcs-rail i {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, rgba(209,254,23,.35), #d1fe17);
	box-shadow: 0 0 14px rgba(209,254,23,.55);
	transition: width .45s cubic-bezier(.25,.8,.3,1);
}

/* One sweep per category change - the "power on" gesture. */
#features .qcs-scan {
	position: absolute; left: 0; right: 0; top: -160px;
	height: 160px; pointer-events: none; opacity: 0;
	background: linear-gradient(180deg, rgba(209,254,23,0) 0%, rgba(209,254,23,.10) 55%, rgba(209,254,23,0) 100%);
}
#features .qcs-scan.run { animation: qcs-scan 900ms cubic-bezier(.3,.7,.3,1); }
@keyframes qcs-scan {
	0%   { top: -160px; opacity: 0; }
	12%  { opacity: 1; }
	100% { top: 100%;   opacity: 0; }
}

#features .qcs-inner {
	position: relative;
	display: grid;
	grid-template-columns: 232px 1fr;
	gap: 24px;
	padding: 26px 24px;
}

/* ---- left rail: the readout ---- */
#features .qcs-side { border-right: 1px solid #14181c; padding-right: 22px; }
#features .qcs-lbl {
	font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: #8b949e;
}
#features .qcs-big {
	display: flex; align-items: baseline; gap: 8px;
	margin: 6px 0 14px;
	font-size: 58px; font-weight: 700; line-height: 1;
	color: #d1fe17;
	font-variant-numeric: tabular-nums;
}
#features .qcs-big small {
	font-size: 15px; font-weight: 600; color: #59626b;
}

/* Segmented meter - one segment per model, so the bar itself states the count. */
#features .qcs-meter { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; }
#features .qcs-seg {
	/* Flexible so one segment reads as a bar rather than a stray dot. */
	flex: 1 1 9px; min-width: 9px; max-width: 16px;
	height: 12px; border-radius: 2px;
	background: #1a1f24;
	transition: background .25s ease, box-shadow .25s ease;
}
#features .qcs-seg.on {
	background: #d1fe17;
	box-shadow: 0 0 9px rgba(209,254,23,.6);
}
#features .qcs-read {
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: #8b949e; min-height: 15px;
}
#features .qcs-read.done { color: #d1fe17; }

#features .qcs-facts { margin-top: 20px; border-top: 1px solid #14181c; padding-top: 14px; }
#features .qcs-fact {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px; padding: 5px 0;
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6f7880;
}
#features .qcs-fact b { color: #e9edf0; font-weight: 600; letter-spacing: .02em; }
#features .qcs-fact b.pink { color: #ff7ab8; }

/* ---- right: the bays ---- */
/* Video has 16 bays and Music has 1, so the console cannot be one fixed height
   without either inflating short rosters into slabs or leaving a dead band under
   them. It ANIMATES between them instead: qyntro-tabs.js measures the grid and
   writes a pixel height, and the change rides along with the power-up sequence
   rather than snapping the page around a reader's cursor. */
#features .qcs-bays {
	display: grid;
	/* Four tracks, always - Video's 16 models divide into exactly four rows, and
	   any other count leaves a ragged last row wherever the browser happens to
	   fit a fifth column. The track minimum is a share of the container rather
	   than a pixel width so the count cannot drift with the viewport.

	   auto-fit, not auto-fill: a track with nothing in it COLLAPSES. Music has a
	   single model, and in a fixed four-column grid that model sat in a narrow
	   sliver with three empty columns beside it. Collapsing lets it take the full
	   width instead, and every other roster is unaffected because its tracks are
	   all occupied. */
	grid-template-columns: repeat(auto-fit, minmax(calc((100% - 30px) / 4), 1fr));
	grid-auto-rows: auto;
	/* The grid stretches to whichever is taller, itself or the readout rail
	   beside it, so a short roster is centred in that space rather than left
	   hanging from the top of it. */
	align-content: center;
	gap: 10px;
	overflow: hidden;
	transition: height .5s cubic-bezier(.3,.8,.3,1);
}

/* One model in the category: centre it, since it holds the whole row on its
   own and a label pinned to the left edge of a full-width card reads as an
   accident. */
#features .qcs-bays.is-solo .qcs-bay {
	align-items: center;
	text-align: center;
	padding: 22px 13px;
}
#features .qcs-bays.is-solo .qcs-nm { font-size: 21px; letter-spacing: -.01em; min-height: 0; }
#features .qcs-bays.is-solo .qcs-idx { display: none; }
#features .qcs-bays.is-solo .qcs-st { margin-top: 10px; }
#features .qcs-bay {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #1b2126;
	border-radius: 11px;
	background: #0c1013;
	padding: 12px 13px 11px;
	min-height: 74px;
	opacity: .34;
	transform: translateY(6px);
	transition: opacity .4s ease, transform .4s cubic-bezier(.25,.8,.3,1),
	            border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
/* Coming online is a single event, so it gets a single flash rather than a
   permanent glow - the eye follows the ignition down the grid and the finished
   state stays calm enough to read. */
#features .qcs-bay.on {
	opacity: 1;
	transform: none;
	border-color: #27303a;
	background: #0f1418;
	animation: qcs-ignite 700ms cubic-bezier(.2,.8,.3,1);
}
@keyframes qcs-ignite {
	0%   { box-shadow: 0 0 0 0 rgba(209,254,23,.30); border-color: rgba(209,254,23,.75); }
	100% { box-shadow: 0 0 0 14px rgba(209,254,23,0); border-color: #27303a; }
}
@media (hover: hover) {
	#features .qcs-bay.on:hover {
		border-color: #3a4652;
		background: #11171c;
	}
}
#features .qcs-bay.is-new.on {
	border-color: rgba(209,254,23,.45);
	box-shadow: 0 0 0 1px rgba(209,254,23,.12), 0 10px 26px rgba(209,254,23,.07);
}
#features .qcs-idx {
	font-size: 9px; letter-spacing: .14em; color: #4d555d;
	font-variant-numeric: tabular-nums;
}
/* Two lines are reserved whether or not the name needs them. Names wrap at some
   widths and not others - "Kling 2.1 Standard" is one line at 1440 and two at
   1180 - and without the reservation every bay in the grid grew with it, so the
   console changed height by 67px depending on the viewport AND on which tab was
   showing. Reserving the space makes a bay the same height everywhere, which is
   what lets the fixed console height below hold. */
#features .qcs-nm {
	margin-top: 5px;
	min-height: 2.5em;
	font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #e9edf0;
	overflow-wrap: anywhere;
}
#features .qcs-st {
	margin-top: 7px;
	display: flex; align-items: center; gap: 6px;
	font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #5d666e;
}
#features .qcs-bay.on .qcs-st { color: #8fa06a; }
#features .qcs-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: #333b42; flex: none;
}
#features .qcs-bay.on .qcs-dot {
	background: #d1fe17;
	box-shadow: 0 0 8px rgba(209,254,23,.7);
}
#features .qcs-tag {
	position: absolute; top: 10px; right: 11px;
	font-size: 8px; letter-spacing: .12em; font-weight: 700;
	color: #ff7ab8; border: 1px solid rgba(255,122,184,.45);
	border-radius: 20px; padding: 2px 6px;
	opacity: 0; transition: opacity .4s ease;
}
#features .qcs-bay.on .qcs-tag { opacity: 1; }

#features .qcs-foot {
	display: flex; align-items: center; gap: 8px;
	padding: 0 24px 20px;
	font-size: 11.5px; color: #6f7880;
}
#features .qcs-foot i {
	width: 5px; height: 5px; border-radius: 50%; background: #d1fe17; flex: none;
	box-shadow: 0 0 8px rgba(209,254,23,.6);
}

/* ---- responsive ---- */
@media (max-width: 860px) {
	#features .qcs-inner { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
	#features .qcs-side { border-right: 0; border-bottom: 1px solid #14181c; padding: 0 0 16px; }
	#features .qcs-big { font-size: 46px; }
	#features .qcs-bays.is-solo .qcs-nm { font-size: 19px; }
}

/* Phones. One column would stack Video's 16 bays into 1,450px of scrolling, so
   the track minimum drops to fit two across - still auto-fit, so Music's single
   model keeps the full width. */
@media (max-width: 620px) {
	#features .qcs-bays {
		grid-template-columns: repeat(auto-fit, minmax(calc((100% - 8px) / 2), 1fr));
		gap: 8px;
	}
	#features .qcs-bay { min-height: 66px; padding: 10px 11px 9px; }
	#features .qcs-nm { font-size: 12.5px; }
	#features .qcs-tag { top: 8px; right: 9px; }
}

/* ---- reduced motion: state without theatre ---- */
@media (prefers-reduced-motion: reduce) {
	#features .qcs-scan { display: none; }
	#features .qcs-bay,
	#features .qcs-seg,
	#features .qcs-rail i,
	#features .qcs-tag { transition: none; }
	#features .qcs-bay.on { animation: none; }
	#features .qcs-bays { transition: none; }
}