/* ═══════════════════════════════════════════════════════════════
   StockFaves - 100% Fluid Full-Width Landing Page Design System
   Color Palette & Typography from Redmondsoft PowerLink:
   Navy (#0A1F44), Energy Blue (#0061FF), Green Power (#00C853),
   Amber (#FFB300), Clean Slate & Inter Typography
   ═══════════════════════════════════════════════════════════════ */

:root {
	--navy: #0A1F44;
	--navy-dark: #061329;
	--navy-light: #132b59;
	--energy-blue: #0061FF;
	--energy-blue-hover: #0052d6;
	/* --green-power is the green for LIGHT grounds. #059669 read at only
	   3.77:1 on white, under the 4.5:1 WCAG AA floor for body text, so it is
	   two steps darker at the same hue: 4.99:1 on white, and 4.55:1 on the
	   darkest ground it lands on (#f1f5f9, the ETF/bond card metric strips).
	   --green-accent is the same green for DARK grounds. No single value
	   clears AA against both white and navy, so navy sections take the
	   lighter one (6.4:1 on #0A1F44), not the darker. Pick by background. */
	--green-power: #047f59;
	--green-power-hover: #047857;
	--green-accent: #10b981;
	--green-btn: #00C853;
	--green-btn-hover: #00b047;
	--up-dark: #00C853;
	--down-dark: #f87171;
	--amber: #b45309;
	--rose: #dc2626;

	--bg-body: #f8fafc;
	--bg-white: #ffffff;
	--bg-gray-light: #f1f5f9;
	--border-light: #e2e8f0;
	--border-subtle: #edf2f7;

	--text-navy: #0A1F44;
	--text-body: #334155;
	--text-muted: #475569;
	--text-white: #ffffff;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	/* Referenced in three places and never defined, so those rules were
	   silently rendering square corners. */
	--radius-xl: 18px;
	--radius-2xl: 20px;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(10, 31, 68, 0.06);
	--shadow-lg: 0 10px 25px -3px rgba(10, 31, 68, 0.08), 0 4px 6px -2px rgba(10, 31, 68, 0.04);
	--shadow-xl: 0 20px 35px -5px rgba(10, 31, 68, 0.12);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	background-color: var(--bg-body);
	color: var(--text-navy);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body {
	overflow-x: hidden;
	width: 100%;
	background-color: var(--bg-body);
}

/* ── 100% Fluid Width Layout Utility ───────────────────────── */
.fluid-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

@media (min-width: 1600px) {
	.fluid-container {
		max-width: 1560px;
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

@media (max-width: 640px) {
	.fluid-container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ── Navigation (PowerLink Style) ──────────────────────────── */
.navbar {
	background: var(--bg-white);
	border-bottom: 1px solid var(--border-light);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-sm);
	width: 100%;
}

.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text-navy);
}

.brand-icon-svg,
.brand-icon-img {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: block;
}

.brand-text {
	font-size: 1.45rem;
	font-weight: 900;
	color: var(--navy);
	letter-spacing: -0.03em;
}

.brand-text .highlight {
	color: var(--green-power);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
}

.nav-link {
	font-size: 0.88rem;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.18s ease;
	white-space: nowrap;
	position: relative;
}

/* Hover marker is an absolutely positioned rule, not a border or padding, so
   the link never reflows and the row cannot jitter under the cursor. */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	border-radius: 2px;
	background: var(--energy-blue);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.18s ease;
}

.nav-lucide-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #1e293b;
	stroke: #1e293b;
	stroke-width: 2.2;
	opacity: 0.95;
	transition: opacity 0.18s ease, stroke 0.18s ease, color 0.18s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
	color: var(--energy-blue);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after {
	transform: scaleX(1);
}

.nav-link:hover .nav-lucide-icon,
.nav-link:focus-visible .nav-lucide-icon {
	stroke: var(--energy-blue);
	color: var(--energy-blue);
	opacity: 1;
}

.nav-link.active {
	color: var(--energy-blue);
	font-weight: 700;
}

.nav-link.active .nav-lucide-icon {
	stroke: var(--energy-blue);
	color: var(--energy-blue);
	opacity: 1;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

@media (max-width: 1120px) {
	.nav-menu {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		background: #ffffff;
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 24px;
		gap: 10px;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid var(--border-light);
		display: none;
		z-index: 1000;
	}

	.nav-menu.open {
		display: flex;
	}

	.nav-link {
		width: 100%;
		padding: 10px 14px;
		border-radius: 8px;
		font-size: 0.95rem;
	}

	.nav-link:hover,
	.nav-link:focus-visible {
		background: var(--bg-gray-light);
	}

	.nav-link::after {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
	border: none;
}

.btn-navy {
	background: var(--navy);
	color: var(--text-white);
}

.btn-navy:hover {
	background: #061530;
	box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.18);
}

.btn-green {
	background: var(--green-btn);
	color: var(--navy);
	box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3);
}

.btn-green:hover {
	background: var(--green-btn-hover);
	box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3), 0 0 0 3px rgba(0, 200, 83, 0.25);
}

/* The secondary card CTA — "Explore ETFs →", "Explore Funds →" and the rest.
   IT LIVED IN stock.css AND THE LANDING PAGE DOES NOT LOAD stock.css, so on index.html these four
   matched no variant at all: bare `.btn` has no background and no colour, so they rendered as plain
   text beside the one card whose CTA uses `.btn-green` and IS defined here. That is the misalignment
   — four unstyled links against one filled button, on a row meant to be uniform.
   Defined here, in the stylesheet every page loads, and removed from stock.css so there is one
   definition rather than two that can drift apart. */
.btn-energy-blue {
	background: var(--energy-blue, #0061FF);
	color: #ffffff;
	font-weight: 700;
	border-radius: var(--radius-md, 10px);
	border: none;
	cursor: pointer;
}

.btn-energy-blue:hover {
	background: var(--energy-blue-hover, #0052d6);
	box-shadow: 0 4px 14px rgba(0, 97, 255, 0.25);
}

.btn-blue {
	background: var(--energy-blue);
	color: var(--text-white);
	box-shadow: 0 4px 14px rgba(0, 97, 255, 0.25);
}

.btn-blue:hover {
	background: var(--energy-blue-hover);
	box-shadow: 0 4px 14px rgba(0, 97, 255, 0.25), 0 0 0 3px rgba(0, 97, 255, 0.22);
}

.btn-outline-white {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.7);
	color: var(--text-white);
}

.btn-outline-white:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
}

.btn-lg {
	padding: 14px 28px;
	font-size: 1rem;
	border-radius: 10px;
}

/* ── TV Broadcast Continuous Moving Ticker Strip ───────────── */
.ticker-strip {
	background: #061329;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 9px 0;
	font-size: 0.84rem;
	width: 100%;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ticker-strip:hover .ticker-track {
	animation-play-state: paused;
}

.ticker-track {
	min-height: 34px;
	display: flex;
	align-items: center;
	gap: 36px;
	width: max-content;
	animation: tvTickerScroll 130s linear infinite;
	will-change: transform;
}

@keyframes tvTickerScroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	flex-shrink: 0;
	transition: background 0.2s ease;
	text-decoration: none;
	color: inherit;
}

a.ticker-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* An index level has no profile page of its own, so its chip goes to the
   screener rather than to /stocks/<label> — which is how the Nifty Midcap
   index chip used to open the Motilal Oswal Midcap 150 ETF. It is a link like
   any other chip and inherits the same pointer and hover. */

.ticker-label {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}

.ticker-val {
	font-weight: 700;
	color: #ffffff;
	font-family: var(--font-mono);
	font-size: 0.84rem;
}

.ticker-change {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: var(--font-mono);
}

.ticker-change.up {
	background: rgba(0, 200, 83, 0.2);
	color: var(--up-dark);
}

.ticker-change.down {
	background: rgba(239, 68, 68, 0.2);
	color: var(--down-dark);
}

@keyframes flashGreen {
	0% { background-color: rgba(0, 200, 83, 0.4); color: #00C853; }
	100% { background-color: transparent; }
}

@keyframes flashRed {
	0% { background-color: rgba(239, 68, 68, 0.4); color: #EF4444; }
	100% { background-color: transparent; }
}

.flash-up {
	animation: flashGreen 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	border-radius: 4px;
}

.flash-down {
	animation: flashRed 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	border-radius: 4px;
}

.live-pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--green-power);
	box-shadow: 0 0 8px var(--green-power);
	animation: livePulse 1.5s infinite ease-in-out;
}

@keyframes livePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.35); opacity: 0.6; }
}

/* ── Hero Section (PowerLink Clean Layout + High Impact) ────── */
.hero-section {
	position: relative;
	width: 100%;
	min-height: auto;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #0A1F44 0%, #061329 60%, #030814 100%);
	color: var(--text-white);
	padding: 36px 0 88px;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -50px;
	width: 650px;
	height: 650px;
	background: radial-gradient(circle, rgba(0, 97, 255, 0.25) 0%, rgba(0, 200, 83, 0.1) 50%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 992px) {
	.hero-content {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 200, 83, 0.15);
	border: 1px solid rgba(0, 200, 83, 0.35);
	color: #34d399;
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 0.84rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.hero-title {
	font-size: 3.4rem;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #ffffff;
	margin-bottom: 20px;
}

.hero-title .text-green {
	color: var(--green-accent);
}

.hero-title .text-blue {
	color: #38bdf8;
}

.hero-desc {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
	margin-bottom: 36px;
	max-width: 620px;
}

@media (max-width: 992px) {
	.hero-desc {
		margin: 0 auto 36px;
	}
}

.hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

@media (max-width: 992px) {
	.hero-actions {
		justify-content: center;
	}
}

/* ── Hero Live Preview Mockup Card ──────────────────────────── */
.hero-mockup-card {
	background: rgba(19, 43, 89, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--radius-2xl);
	/* Kept tight so the tile type can be large. */
	padding: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	/* Fills whatever the index strip leaves of the column (see .hero-mockup-wrap). */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Nine tiles, three across. Their natural height is kept under the headline
   column's, so the card never sets the hero's height — it only stretches to
   fill it, and the rows share the stretch equally. */
.markets-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 8px;
}

.mkt-tile {
	background: rgba(6, 19, 41, 0.6);
	/* Small, so the space goes to the figures instead: the card's own
	   padding and the grid gap were cut for the same reason. */
	padding: 6px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mkt-label,
.mkt-price,
.mkt-move {
	display: block;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mkt-label {
	font-size: clamp(0.68rem, 0.42vw + 0.3rem, 0.84rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.62);
}

.mkt-price {
	margin: 3px 0 2px;
	font-size: clamp(1.02rem, 0.87vw + 0.35rem, 1.4rem);
	font-weight: 800;
	color: #ffffff;
	font-family: var(--font-mono);
}

.mkt-move {
	font-size: clamp(0.72rem, 0.5vw + 0.3rem, 0.9rem);
	font-weight: 700;
	font-family: var(--font-mono);
	color: rgba(255, 255, 255, 0.82);
}

.mkt-move.up   { color: #34d399; }
.mkt-move.down { color: #f87171; }

/* A level with a ticker behind it opens its chart; GIFT NIFTY, which has no
   chartable feed, links to its source page (data-href) instead. Both
   attributes are set by the paint code. */
.mkt-tile[data-ticker],
.hero-index-strip .hix[data-ticker],
.hero-index-strip .hix[data-href] {
	cursor: pointer;
}

.mkt-tile[data-ticker] {
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mkt-tile[data-ticker]:hover,
.mkt-tile[data-ticker]:focus-visible {
	border-color: rgba(56, 189, 248, 0.5);
	background: rgba(6, 19, 41, 0.9);
	outline: none;
}

.hero-index-strip .hix[data-ticker]:hover .hix-name,
.hero-index-strip .hix[data-ticker]:focus-visible .hix-name,
.hero-index-strip .hix[data-href]:hover .hix-name,
.hero-index-strip .hix[data-href]:focus-visible .hix-name {
	color: #ffffff;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

.hero-index-strip .hix[data-ticker]:focus-visible,
.hero-index-strip .hix[data-href]:focus-visible {
	outline: 2px solid rgba(56, 189, 248, 0.7);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Index chart popup ──────────────────────────────────────── */
.ixc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(3, 8, 20, 0.72);
}

.ixc-backdrop[hidden] { display: none; }

/* Wide rather than tall: the candles and the MACD pane both need the room. */
.ixc-panel {
	width: min(1500px, 100%);
	height: min(calc(100vh - 32px), 780px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px 18px;
	color: #ffffff;
	background: linear-gradient(160deg, #0f2550 0%, #061329 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-2xl);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.ixc-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ixc-heading {
	flex: 1 1 auto;
	min-width: 0;
}

.ixc-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ixc-sub {
	margin-top: 2px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ixc-quote {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--font-mono);
	white-space: nowrap;
}

.ixc-price {
	font-size: 1.25rem;
	font-weight: 800;
}

.ixc-move {
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
}

.ixc-move.up   { color: #34d399; }
.ixc-move.down { color: #f87171; }

.ixc-close {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.ixc-close:hover,
.ixc-close:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

.ixc-ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ixc-range {
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
	font: 700 0.78rem var(--font-sans);
	cursor: pointer;
}

.ixc-range:hover { background: rgba(255, 255, 255, 0.12); }

.ixc-range.active {
	background: var(--energy-blue);
	border-color: var(--energy-blue);
	color: #ffffff;
}

.ixc-canvas-wrap {
	position: relative;
	/* Fills whatever the panel has left under the head and ranges. */
	flex: 1 1 auto;
	min-height: 300px;
}

.ixc-canvas-wrap .sfc-host {
	position: absolute;
	inset: 0;
}

.ixc-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.65);
	pointer-events: none;
}

.ixc-status[hidden] { display: none; }

@media (max-width: 600px) {
	.ixc-panel { height: auto; max-height: calc(100vh - 32px); padding: 14px; }
	.ixc-head { flex-wrap: wrap; }
	.ixc-quote {
		order: 3;
		width: 100%;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}
	.ixc-canvas-wrap { flex: none; min-height: 0; height: 260px; }
}

/* "+56.00 (+0.11%)" — the brackets only when both halves are present. */
.mkt-pts + .mkt-pct::before { content: " ("; }
.mkt-pts + .mkt-pct::after  { content: ")"; }

.mkt-price.tick { animation: hixFlash 0.45s ease; }

/* ── 4-Card Floating Highlight Section (PowerLink Style) ───── */
.floating-cards-section {
	position: relative;
	z-index: 20;
	margin-top: -48px;
	width: 100%;
}

.highlight-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.highlight-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.highlight-grid {
		grid-template-columns: 1fr;
	}
}

.hl-card {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	padding: 28px 24px;
	text-align: center;
	box-shadow: var(--shadow-lg);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hl-card:hover {
	box-shadow: var(--shadow-xl);
	border-color: var(--energy-blue);
}

.hl-icon-wrap {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hl-title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 8px;
}

.hl-desc {
	font-size: 0.88rem;
	color: var(--text-body);
	line-height: 1.5;
}

/* ── Our Impact / Key Numbers Banner ───────────────────────── */
.impact-section {
	padding: 42px 0 16px;
	width: 100%;
}

.impact-banner {
	background: linear-gradient(135deg, #0A1F44 0%, #061329 60%, #030814 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-2xl);
	padding: 26px 32px;
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}

.impact-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--energy-blue), var(--green-power), var(--amber));
}

.impact-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.impact-tag-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 97, 255, 0.2);
	border: 1px solid rgba(0, 97, 255, 0.35);
	color: #60a5fa;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 999px;
}

.impact-sub-badge {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
}

.impact-stats-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

@media (max-width: 992px) {
	.impact-stats-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.impact-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

.impact-card-item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 16px 12px;
	text-align: center;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.impact-card-item:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(0, 200, 83, 0.4);
}

.impact-card-item .impact-number {
	font-size: 1.85rem;
	font-weight: 900;
	color: #ffffff;
	font-family: var(--font-mono);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 6px;
	display: block;
}

.impact-card-item .impact-number.green {
	color: var(--green-accent);
}

.impact-card-item .impact-number.blue {
	color: #60a5fa;
}

.impact-card-item .impact-number.amber {
	color: var(--amber);
}

.impact-card-item .impact-label {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
	line-height: 1.3;
	display: block;
}

/* ── Section General ────────────────────────────────────────── */
.section {
	padding: 42px 0;
	width: 100%;
}

.section-head {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 32px;
}

/* Two of these headings need ~970px on one line and were breaking across
   two in an 800px column. The HEADING gets the room; the subtitle keeps a
   narrower measure, because a 1000px line of body copy is hard to track. */
@media (min-width: 1100px) {
	.section-head {
		max-width: 1000px;
	}

	.section-head .section-sub {
		max-width: 780px;
		margin-left: auto;
		margin-right: auto;
	}
}

.section-tag {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--energy-blue);
	margin-bottom: 10px;
	display: block;
}

.section-title {
	font-size: 2.35rem;
	font-weight: 900;
	color: var(--navy);
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.section-sub {
	font-size: 1.05rem;
	color: var(--text-body);
	line-height: 1.6;
}

/* ── Why StockFaves (6-Grid with PowerLink Round Badges) ─────── */
.why-grid-wrap {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

@media (max-width: 1024px) {
	.why-grid-wrap {
		flex-direction: column;
	}
}

.why-main-card {
	flex: 1;
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	padding: 40px;
	box-shadow: var(--shadow-md);
}

.why-icons-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin-top: 24px;
}

@media (max-width: 900px) {
	.why-icons-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 500px) {
	.why-icons-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.why-item {
	text-align: center;
}

.why-item:hover .why-circle-icon {
	background: #dbeafe;
	box-shadow: 0 0 0 4px rgba(0, 97, 255, 0.12);
}

.why-circle-icon {
	width: 52px;
	height: 52px;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	margin: 0 auto 10px;
	background: #eff6ff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--energy-blue);
	font-size: 20px;
}

.why-item-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
}

.why-side-cta {
	background: var(--navy);
	border-radius: var(--radius-2xl);
	padding: 40px;
	color: var(--text-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-width: 320px;
}

.side-cta-title {
	font-size: 1.85rem;
	font-weight: 900;
	margin-bottom: 20px;
	line-height: 1.2;
}

/* ── Deep Feature Columns (Simply Wall St + Trade Ideas) ────── */
.features-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

@media (max-width: 992px) {
	.features-container {
		grid-template-columns: 1fr;
	}
}

.feature-box {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	padding: 36px 30px;
	box-shadow: var(--shadow-md);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-box:hover {
	border-color: var(--energy-blue);
	box-shadow: var(--shadow-xl);
}

.fb-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.fb-badge.blue {
	background: #eff6ff;
	color: var(--energy-blue);
}

.fb-badge.green {
	background: #f0fdf4;
	color: #147c3b;
}

.fb-badge.amber {
	background: #fffbeb;
	color: #b45309;
}

.feature-box h3 {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 12px;
}

.feature-box p {
	font-size: 0.94rem;
	color: var(--text-body);
	line-height: 1.6;
}

/* ── Comparison Table (PowerLink Clean Data Styling) ────────── */
#preview {
	padding-bottom: 12px;
}

#comparison {
	padding-top: 16px;
	padding-bottom: 32px;
}

#comparison .section-head {
	margin-bottom: 24px;
}

.compare-container {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	overflow-x: auto;
	box-shadow: var(--shadow-lg);
}

.table-fluid {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.94rem;
}

.table-fluid th {
	padding: 20px 24px;
	background: #f8fafc;
	border-bottom: 2px solid var(--border-light);
	color: var(--navy);
	font-weight: 800;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.table-fluid th.brand-col {
	background: #eff6ff;
	color: var(--energy-blue);
}

.table-fluid td {
	padding: 16px 24px;
	border-bottom: 1px solid var(--border-light);
	color: var(--text-body);
}

.table-fluid td.brand-col {
	background: #f8faff;
	font-weight: 700;
	color: var(--navy);
}

.icon-yes {
	color: var(--green-power);
	font-weight: bold;
	font-size: 1.1rem;
}

.icon-no {
	color: var(--text-muted);
}

/* ── Redmondsoft Contact & Company Info ─────────────────────── */
.contact-section {
	background: #ffffff;
	border-top: 1px solid var(--border-light);
	padding: 20px 0;
	width: 100%;
}

.contact-card-wrap {
	display: grid;
	/* The right pane holds two short lines — an address and a number — and had
	   40% of the width for them, so it ran mostly empty while the copy on the
	   left wrapped early and pushed the whole band taller than it needed to be.
	   The contact details are sized to their content; the text takes the rest,
	   and the section loses the height the imbalance was costing. */
	grid-template-columns: minmax(0, 1fr) minmax(280px, 26%);
	gap: 32px;
	align-items: center;
	background: var(--navy);
	border-radius: var(--radius-2xl);
	padding: 48px;
	color: var(--text-white);
}

@media (max-width: 900px) {
	.contact-card-wrap {
		grid-template-columns: 1fr;
		padding: 32px;
	}
}

.contact-info-list {
	background: rgba(6, 19, 41, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.c-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.c-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 97, 255, 0.2);
	color: #38bdf8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.c-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
	display: block;
}

.c-val {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s;
}

.c-val:hover {
	color: var(--green-power);
}

/* ── FAQ Section (SEO Rich Snippets Ready) ──────────────────── */
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 36px;
}

@media (max-width: 768px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

.faq-item {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.faq-item:hover {
	border-color: var(--energy-blue);
	box-shadow: var(--shadow-md);
}

.faq-q {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.faq-q-icon {
	color: var(--green-power);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.faq-a {
	font-size: 0.9rem;
	color: var(--text-body);
	line-height: 1.6;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
	background: #030a17;
	color: rgba(255, 255, 255, 0.6);
	padding: 60px 0 30px;
	font-size: 0.88rem;
	width: 100%;
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.footer-links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: #ffffff;
}

.footer-legal {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.65;
	margin-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 18px;
}

.footer-legal p {
	margin: 0;
}

.footer-legal strong {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Interactive Screener Preview (#preview) ────────────────── */
.preview-wrap-card {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.preview-toolbar {
	background: #f8fafc;
	border-bottom: 1px solid var(--border-light);
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.preview-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.p-tab-btn {
	background: #ffffff;
	border: 1px solid var(--border-light);
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	transition: all 0.2s ease;
}

.p-tab-btn:hover {
	border-color: var(--energy-blue);
	color: var(--energy-blue);
}

.p-tab-btn.active {
	background: var(--navy);
	color: #ffffff;
	border-color: var(--navy);
}

.p-search-input {
	padding: 8px 14px 8px 34px;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	font-size: 0.85rem;
	outline: none;
	width: 260px;
	font-family: var(--font-sans);
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 10px center;
}

.p-search-input:focus {
	border-color: var(--energy-blue);
	box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.1);
}

.preview-table-container {
	overflow-x: auto;
	width: 100%;
}

.preview-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.9rem;
}

.preview-table th {
	padding: 14px 20px;
	background: #f8fafc;
	border-bottom: 2px solid var(--border-light);
	color: var(--text-body);
	font-size: 0.76rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.preview-table td {
	padding: 14px 20px;
	border-bottom: 1px solid var(--border-light);
	color: var(--navy);
	white-space: nowrap;
}

.preview-table tr {
	cursor: pointer;
	transition: background 0.15s ease;
}

.preview-table tr:hover,
.preview-table tr.selected {
	background: #f0f7ff;
}

.badge-signal {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.badge-signal.strong-buy {
	background: rgba(0, 200, 83, 0.15);
	color: #007d34;
	border: 1px solid rgba(0, 200, 83, 0.3);
}

.badge-signal.btst {
	background: rgba(0, 97, 255, 0.15);
	color: #005aec;
	border: 1px solid rgba(0, 97, 255, 0.3);
}

.badge-signal.buy {
	background: rgba(255, 179, 0, 0.15);
	color: #b45309;
	border: 1px solid rgba(255, 179, 0, 0.3);
}

.badge-signal.sell {
	background: rgba(220, 38, 38, 0.12);
	color: #b91c1c;
	border: 1px solid rgba(220, 38, 38, 0.28);
}

/* The rulebook has not judged this stock. It reads as absent, not as a weak
   buy — a greyed-out verdict is still a verdict if it is coloured like one. */
.badge-signal.unrated {
	background: rgba(100, 116, 139, 0.1);
	color: #5f6e83;
	border: 1px dashed rgba(100, 116, 139, 0.35);
	font-weight: 700;
}

/* A factor the rulebook could not verify. The track is struck through rather
   than left looking like a score of zero. */
.rp-meter.rp-unknown {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.14) 0 4px,
		transparent 4px 8px
	);
}

.preview-inspector-bar {
	background: #0A1F44;
	color: #ffffff;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.radar-preview-grid {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.rp-factor {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rp-label {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	font-weight: 700;
}

.rp-meter {
	width: 90px;
	height: 6px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	overflow: hidden;
}

.rp-fill {
	height: 100%;
	background: var(--green-power);
	border-radius: 4px;
}

/* ── Mobile Responsive Enhancements & Top Margin Fixes ──────── */
@media (max-width: 900px) {
	.nav-menu {
		display: none;
	}
	.navbar-inner {
		height: 56px;
	}
	.brand-text {
		font-size: 1.2rem;
	}
	.brand-icon-img,
	.brand-icon-svg {
		width: 28px;
		height: 28px;
	}
	.nav-actions .btn {
		padding: 7px 12px;
		font-size: 0.8rem;
	}
}

@media (max-width: 768px) {
	.fluid-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.hero-section {
		padding: 24px 0 36px;
		min-height: auto;
	}
	.hero-content {
		gap: 24px;
	}
	.hero-badge {
		padding: 4px 12px;
		font-size: 0.75rem;
		margin-bottom: 12px;
	}
	.hero-title {
		font-size: 1.85rem;
		line-height: 1.18;
		margin-bottom: 12px;
	}
	.hero-desc {
		font-size: 0.9rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}
	/* Side by side rather than stacked: the pair on one row saves a whole
	   button's height above the index strip. Two equal grid columns, not
	   flex — flex sized each to its label, so the longer one sat tight to
	   its edges while the other had room to spare. The green one gets a
	   transparent border to match the outline one's 2px, so the text inset
	   is identical. */
	.hero-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}
	.hero-actions .btn {
		padding: 12px 8px;
		font-size: 0.82rem;
		white-space: nowrap;
	}
	.hero-actions .btn-green { border: 2px solid transparent; }
	.hero-mockup-card {
		padding: 16px;
		border-radius: var(--radius-xl);
	}
	.markets-grid {
		gap: 6px;
	}
	.mkt-tile {
		padding: 8px;
	}
	.mkt-price {
		font-size: 0.9rem;
	}
	/* A third of a phone is ~100px: the percent stays, the points go. */
	.mkt-pts { display: none; }
	.mkt-pts + .mkt-pct::before,
	.mkt-pts + .mkt-pct::after { content: none; }
	.floating-cards-section {
		margin-top: 18px;
	}
	.highlight-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.hl-card {
		padding: 18px;
	}
	.section {
		padding: 30px 0;
	}
	.section-head {
		margin-bottom: 20px;
	}
	.section-title {
		font-size: 1.6rem;
		line-height: 1.25;
	}
	.section-sub {
		font-size: 0.88rem;
		line-height: 1.5;
	}
	.why-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.features-container {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.strategies-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.preview-toolbar {
		padding: 12px 14px;
		gap: 12px;
	}
	.preview-tabs {
		overflow-x: auto;
		width: 100%;
		flex-wrap: nowrap;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.p-tab-btn {
		white-space: nowrap;
		padding: 6px 12px;
		font-size: 0.78rem;
		flex-shrink: 0;
	}
	.p-search-input {
		width: 100%;
	}
	.preview-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.preview-table-wrap table {
		min-width: 800px;
	}
	.compare-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.table-fluid {
		min-width: 600px;
	}
	.preview-inspector-bar {
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.preview-inspector-bar .btn {
		width: 100%;
		justify-content: center;
	}
	.radar-preview-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	.impact-section {
		padding: 12px 0 12px;
	}
	.impact-banner {
		padding: 20px 16px;
	}
	.impact-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.contact-section {
		padding: 12px 0;
	}
	.contact-box {
		padding: 24px 16px;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.contact-card-wrap {
		padding: 24px 18px;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.footer {
		padding: 32px 0 24px;
	}
	.footer-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 16px;
		font-size: 0.82rem;
	}
	.disclaimer-box {
		padding: 14px 16px;
		font-size: 0.75rem;
		line-height: 1.55;
	}
}

/* Too narrow for two halves to hold their labels: stack them again. */
@media (max-width: 340px) {
	.hero-actions { grid-template-columns: 1fr; }
}

/* ── Institutional Legal & Content Pages (LocalMu Clean Style) ─ */
.legal-page-wrap {
	/* Matches .fluid-container so every page shares one content width — the
	   landing page and the standalone pages must never differ. */
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/* Left/right stay at 2rem to line up with .fluid-container (the nav and
	   footer sit on that grid); top and bottom match each other. */
	padding: 20px 2rem;
}

@media (min-width: 1600px) {
	.legal-page-wrap {
		max-width: 1560px;
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.84rem;
	color: #5f6368;
	margin-bottom: 16px;
}
.breadcrumbs a {
	color: #5f6368;
	text-decoration: none;
	transition: color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.breadcrumbs a:hover {
	color: #1f1f1f;
}
.breadcrumbs span.sep {
	color: #9aa0a6;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
}
.breadcrumbs span.current {
	color: #1f1f1f;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Lucide icons, inlined as SVG — the site has no build step and no icon
   library, so the paths travel with the markup and cost no extra request.
   `currentColor` lets each crumb keep the colour its own rule already sets,
   including the hover transition on the link. */
.breadcrumbs .crumb-icon {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}
.breadcrumbs span.sep .crumb-icon {
	width: 14px;
	height: 14px;
}

.legal-header-box {
	margin-bottom: 20px;
}
.legal-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: #202124;
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.legal-subtitle {
	font-size: 0.95rem;
	font-weight: 500;
	color: #5f6368;
	/* No cap. It was 680px, sized for the old 1240px page; on the widened
	   layout that broke a one-line subtitle onto two for no reason. */
	line-height: 1.5;
}

.legal-card {
	background: #ffffff;
	border: 1px solid #dadce0;
	border-radius: 16px;
	padding: 26px 30px;
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
	width: 100%;
}
@media (max-width: 768px) {
	.legal-page-wrap {
		padding: 14px 14px;
	}
	.legal-title {
		font-size: 1.4rem;
	}
	.legal-card {
		padding: 18px 14px;
		border-radius: 12px;
	}
}

.legal-section {
	margin-bottom: 28px;
}
.legal-section:last-child {
	margin-bottom: 0;
}
.legal-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.legal-section-icon {
	font-size: 1.25rem;
	color: #00873a;
}
.legal-section h2 {
	font-size: 1.2rem;
	font-weight: 800;
	color: #202124;
	margin: 0;
}
.legal-section p {
	font-size: 0.92rem;
	color: #3c4043;
	line-height: 1.7;
	margin-bottom: 12px;
}
.legal-section ul {
	margin: 10px 0 16px 20px;
	color: #3c4043;
	font-size: 0.9rem;
	line-height: 1.65;
}
.legal-section li {
	margin-bottom: 6px;
}

.legal-alert {
	background: #fffbeb;
	border: 1px solid #fef3c7;
	border-left: 4px solid #f59e0b;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 0.88rem;
	color: #92400e;
	font-weight: 500;
	line-height: 1.6;
	margin: 16px 0;
}

.legal-grid-rules {
	display: grid;
	/* auto-fit rather than a hard 2, so the widened page fills across instead
	   of stretching two boxes to ~700px each for one sentence of text. */
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 14px;
	margin: 16px 0;
}
@media (max-width: 768px) {
	.legal-grid-rules {
		grid-template-columns: 1fr;
	}
}
.legal-rule-box {
	background: #f8f9fa;
	border: 1px solid #dadce0;
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.legal-rule-num {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #dadce0;
	font-size: 0.76rem;
	font-weight: 800;
	color: #00873a;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.legal-rule-text strong {
	display: block;
	font-size: 0.84rem;
	font-weight: 800;
	color: #202124;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}
.legal-rule-text span {
	font-size: 0.86rem;
	color: #5f6368;
	line-height: 1.45;
}

.legal-cta-banner {
	background: #f8f9fa;
	border: 1px solid #dadce0;
	border-radius: 14px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 32px;
}
@media (max-width: 768px) {
	.legal-cta-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 18px;
	}
	.legal-cta-banner .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── Account Pill & Mobile Nav Drawer ───────────────────────── */
/* Injected by landing.js once /auth/me confirms a session; the slot stays
   empty (and takes no space) for signed-out visitors. */
.account {
	position: relative;
}

.account-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 12px 5px 5px;
	border: 1px solid var(--border-light);
	border-radius: 50px;
	background: var(--bg-white);
	font-family: var(--font-sans);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-btn:hover {
	border-color: var(--energy-blue);
	box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.08);
}

.account-avatar {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--energy-blue);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1;
	overflow: hidden;
}

.account-avatar.has-photo {
	background-color: var(--border-light);
}

.account-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-caret {
	color: #9ca3af;
	flex-shrink: 0;
}

.account-menu {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 232px;
	max-width: min(280px, calc(100vw - 2rem));
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-lg);
	padding: 6px;
	z-index: 120;
}

.account-menu.open {
	display: block;
}

.account-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 6px;
}

.account-head-name {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--navy);
}

.account-head-email {
	font-size: 0.78rem;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-item {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-body);
	text-decoration: none;
}

.account-item:hover {
	background: #f3f4f6;
	color: var(--navy);
}

.account-signout {
	color: var(--red, #dc2626);
}

.account-signout:hover {
	background: #fef2f2;
	color: var(--red, #dc2626);
}

/* Hamburger — hidden on desktop, where .nav-menu is already a full row. */
.nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	background: var(--bg-white);
	cursor: pointer;
	flex-shrink: 0;
}

.nav-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 3px auto;
	border-radius: 2px;
	background: var(--navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.open span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
	opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 900px) {
	.nav-toggle {
		display: block;
	}
	/* Overrides the display:none the mobile block above applies to .nav-menu:
	   below 900px the links live in this drawer instead of the navbar row. */
	.nav-menu.open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg-white);
		border-top: 1px solid var(--border-light);
		border-bottom: 1px solid var(--border-light);
		box-shadow: var(--shadow-lg);
		padding: 8px 2rem 14px;
		max-height: calc(100vh - 56px);
		overflow-y: auto;
		z-index: 110;
	}
	.nav-menu.open .nav-link {
		padding: 13px 2px;
		font-size: 0.95rem;
		border-bottom: 1px solid var(--border-light);
	}
	.nav-menu.open .nav-link:last-child {
		border-bottom: none;
	}
	.nav-actions {
		gap: 10px;
	}
	.account-name,
	.account-caret {
		display: none;
	}
	.account-btn {
		padding: 4px;
		border-radius: 50%;
	}
	.account-menu {
		right: 0;
	}
}

@media (max-width: 768px) {
	.nav-menu.open {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Under ~420px the brand wordmark plus a full-text CTA plus the avatar no
   longer fit on one line, so the CTA drops to its icon-free short form. */
@media (max-width: 420px) {
	.nav-actions .btn {
		padding: 7px 10px;
		font-size: 0.74rem;
	}
	.brand-text {
		font-size: 1.05rem;
	}
}

/* ── Mobile: touch targets ──────────────────────────────────
   Footer and inline links render 17-20px tall, well under the ~44px a
   fingertip needs. Padding is added only below 900px so the desktop footer
   keeps its current tight rhythm. */
@media (max-width: 900px) {
	.footer-links {
		gap: 4px 20px;
	}
	.footer-links a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 2px 0;
	}
	.contact-card a,
	.legal-page-wrap a {
		padding: 3px 0;
		display: inline-block;
	}
	/* Inline "Trade" chips in the preview table sit at 27px. */
	.preview-table .btn,
	.table-fluid .btn {
		min-height: 34px;
	}
}

@media (max-width: 900px) {
	.breadcrumbs a,
	.c-val {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* The navbar CTA reads "Launch Screener ⚡" until the bar gets crowded — on a
   390px screen the brand, the account avatar, the CTA and the hamburger no
   longer share one line and the CTA wrapped onto two. Below 560px it falls
   back to the short label rather than wrapping. */
.cta-short { display: none; }

@media (max-width: 560px) {
	.nav-actions .cta-long { display: none; }
	.nav-actions .cta-short { display: inline; }
	.nav-actions .btn { white-space: nowrap; }
}

/* ── Angel One Execution Section (#execution) ───────────────── */
.exec-section {
	background: linear-gradient(160deg, #0b1729 0%, #10233f 55%, #0d1b30 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.exec-section .section-tag {
	background: rgba(0, 200, 83, 0.15);
	border: 1px solid rgba(0, 200, 83, 0.35);
	color: #34d399;
}

/* Signal → decision → order, read left to right on a desktop and top to
   bottom on a phone, where the arrows are dropped rather than rotated. */
.exec-flow {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 18px;
	margin-top: 44px;
}

.exec-step {
	flex: 1 1 0;
	min-width: 0;
	background: rgba(19, 43, 89, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-xl, 16px);
	padding: 26px 24px;
}

.exec-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--green-power);
	color: #ffffff;
	font-weight: 900;
	font-size: 0.95rem;
	margin-bottom: 14px;
}

.exec-step h3 {
	font-size: 1.08rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 9px;
}

.exec-step p {
	font-size: 0.9rem;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.74);
}

.exec-arrow {
	align-self: center;
	flex-shrink: 0;
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.35);
}

.exec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 22px;
}

.exec-card {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg, 12px);
	padding: 22px;
}

.exec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(56, 189, 248, 0.14);
	font-size: 1.1rem;
	margin-bottom: 13px;
	/* Four of these tiles hold emoji, which paint their own colour, but two
	   hold plain text glyphs — the rupee sign and the multiplication sign.
	   Those take colour, and with none set they inherited the global navy and
	   were invisible on a navy tile. */
	color: #ffffff;
}

/* The markup is h3, not h4 — this rule targeted h4 only, so the heading
   never got its colour and fell back to the inherited navy, invisible on the
   dark card. Both tags are covered now. */
.exec-card h3,
.exec-card h4 {
	font-size: 0.98rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 7px;
}

.exec-card p {
	font-size: 0.87rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.exec-note {
	margin-top: 26px;
	padding: 16px 20px;
	border-radius: var(--radius-lg, 12px);
	background: rgba(251, 191, 36, 0.08);
	border: 1px solid rgba(251, 191, 36, 0.28);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.86rem;
	line-height: 1.65;
}

.exec-note strong {
	color: #fbbf24;
}

@media (max-width: 992px) {
	.exec-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.exec-flow {
		flex-direction: column;
	}
	/* Rotating the arrows to point down costs a line of height each and adds
	   nothing once the steps are already stacked in order. */
	.exec-arrow {
		display: none;
	}
}

@media (max-width: 640px) {
	.exec-grid {
		grid-template-columns: 1fr;
	}
	.exec-step {
		padding: 20px 18px;
	}
	.exec-card {
		padding: 18px 16px;
	}
	.exec-note {
		padding: 14px 16px;
	}
}

/* ── Portfolio Analysis & Signals ────────────────────────────────
	 The sample view on the left, what it does on the right. On a phone the
	 sample leads and the points follow, because the picture is what explains
	 the feature and the prose only supports it. */
.pf-promo-section {
	scroll-margin-top: 84px;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
}

.pf-promo-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.pf-promo-card {
	background: #ffffff;
	border: 1px solid var(--border-light);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
	padding: 20px 20px 16px;
	overflow: hidden;
}

.pf-promo-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.pf-promo-title { display: block; font-size: 1.02rem; font-weight: 800; color: var(--navy); }
.pf-promo-sub { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.pf-promo-tag {
	flex-shrink: 0;
	padding: 3px 10px;
	border: 1px dashed rgba(15, 23, 42, 0.25);
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* The bifurcation strip, exactly as the real screen carries it. */
.pf-promo-splits {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	background: #f8fafc;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	margin-bottom: 14px;
}
.pf-promo-split-label {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.pf-promo-divider { width: 1px; height: 14px; background: var(--border-light); margin: 0 4px; }

.pf-promo-chip {
	padding: 2px 9px;
	border: 1px solid var(--border-light);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.72rem;
	color: var(--text-body);
	white-space: nowrap;
}
.pf-promo-chip strong { font-family: var(--font-mono, monospace); margin-left: 3px; color: var(--navy); }
.pf-promo-chip.is-buy  { border-color: rgba(22, 163, 74, 0.35); background: rgba(22, 163, 74, 0.08); color: #147c3b; }
.pf-promo-chip.is-buy strong { color: #147c3b; }
.pf-promo-chip.is-hold { border-color: rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.08); color: #af5109; }
.pf-promo-chip.is-hold strong { color: #af5109; }
.pf-promo-chip.is-sell { border-color: rgba(190, 24, 44, 0.3); background: rgba(190, 24, 44, 0.07); color: #a13a48; }
.pf-promo-chip.is-sell strong { color: #a13a48; }

.pf-promo-table-wrap { overflow-x: auto; }

.pf-promo-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pf-promo-table thead th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--border-light);
	text-align: left;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}
.pf-promo-table td {
	padding: 10px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
	white-space: nowrap;
}
.pf-promo-table tbody tr:last-child td { border-bottom: none; }
.pf-promo-table th.num, .pf-promo-table td.num { text-align: right; font-family: var(--font-mono, monospace); }
.pf-promo-table td strong { display: block; color: var(--navy); font-weight: 800; }
.pf-promo-table td span { display: block; font-size: 0.7rem; color: var(--text-muted); }
.pf-promo-table td.num.up { color: #147c3b; font-weight: 700; }
.pf-promo-table td.num.down { color: #a13a48; font-weight: 700; }

.pf-promo-pill {
	display: inline-block !important;
	padding: 2px 8px;
	border-radius: 5px;
	background: rgba(37, 99, 235, 0.08);
	color: #1d4ed8 !important;
	font-size: 0.68rem !important;
	font-weight: 700;
}
.pf-promo-pill.etf { background: rgba(124, 58, 237, 0.1); color: #6d28d9 !important; }

.pf-promo-cap {
	display: inline-block !important;
	padding: 2px 7px;
	border-radius: 5px;
	background: #f1f5f9;
	color: #334155 !important;
	font-size: 0.66rem !important;
	font-weight: 700;
}

.pf-promo-sig {
	display: inline-block !important;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.7rem !important;
	font-weight: 800;
}
.pf-promo-sig.is-buy  { background: rgba(22, 163, 74, 0.1); color: #147c3b !important; }
.pf-promo-sig.is-hold { background: rgba(217, 119, 6, 0.1); color: #af5109 !important; }
.pf-promo-sig.is-sell { background: rgba(190, 24, 44, 0.09); color: #a13a48 !important; }
.pf-promo-basis { display: block; margin-top: 3px; font-size: 0.64rem !important; color: var(--text-muted) !important; }

.pf-promo-note {
	margin: 12px 2px 0;
	font-size: 0.7rem;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ── What it does ──────────────────────────────────────────── */
.pf-promo-points { display: flex; flex-direction: column; gap: 18px; }

.pf-promo-point { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
.pf-promo-point .pf-promo-icon { grid-column: 1; grid-row: 1 / span 2; }
.pf-promo-point h3 { grid-column: 2; grid-row: 1; }
.pf-promo-point p { grid-column: 2; grid-row: 2; }
.pf-promo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #f1f5f9;
	font-size: 1rem;
}
.pf-promo-point h3 { margin: 2px 0 4px; font-size: 0.98rem; font-weight: 800; color: var(--navy); }
.pf-promo-point p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--text-body); }

.pf-promo-brokers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pf-promo-broker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid var(--border-light);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.74rem;
	color: var(--text-muted);
}
.pf-promo-broker.is-live { border-color: rgba(22, 163, 74, 0.35); background: rgba(22, 163, 74, 0.07); color: #147c3b; font-weight: 700; }
.pf-promo-broker .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pf-promo-cta { align-self: flex-start; margin-top: 6px; }

@media (max-width: 1024px) {
	.pf-promo-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
	.pf-promo-card { padding: 14px 12px 12px; border-radius: 12px; }
	.pf-promo-head { flex-direction: column; gap: 6px; }
	.pf-promo-table { font-size: 0.76rem; }
	.pf-promo-table td, .pf-promo-table thead th { padding: 8px 8px; }
	.pf-promo-point { grid-template-columns: 28px 1fr; gap: 10px; }
	.pf-promo-icon { width: 28px; height: 28px; font-size: 0.86rem; }
	.pf-promo-cta { width: 100%; text-align: center; }
}

/* ── Rulebook page (/rulebook) ───────────────────────────────── */
.rb-hero {
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
	border-radius: 16px;
	padding: 34px 40px;
	margin-bottom: 20px;
	color: #ffffff;
}
.rb-hero-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green-accent);
	background: rgba(0, 200, 83, 0.12);
	border: 1px solid rgba(0, 200, 83, 0.35);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 14px;
}
.rb-hero h2 {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: #ffffff;
}
.rb-hero p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}
.rb-hero-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 24px;
}
.rb-hero-stat {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 14px 16px;
}
.rb-hero-stat strong {
	display: block;
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--green-accent);
	line-height: 1.1;
}
.rb-hero-stat span {
	display: block;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 4px;
	line-height: 1.4;
}

/* Four decision axes */
.rb-axes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 4px;
}
.rb-axis {
	background: #f8f9fa;
	border: 1px solid #dadce0;
	border-radius: 12px;
	padding: 16px;
}
.rb-axis-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 10px;
	background: rgba(0, 200, 83, 0.12);
	color: #00873a;
}
.rb-axis-tag.blue { background: rgba(0, 97, 255, 0.1); color: var(--energy-blue); }
.rb-axis-tag.amber { background: rgba(255, 179, 0, 0.14); color: #92400e; }
.rb-axis-tag.rose { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
.rb-axis strong {
	display: block;
	font-size: 0.9rem;
	font-weight: 800;
	color: #202124;
	line-height: 1.4;
	margin-bottom: 6px;
}
.rb-axis span {
	font-size: 0.85rem;
	color: #5f6368;
	line-height: 1.55;
}

/* Ordered decision pipeline */
.rb-pipeline {
	list-style: none;
	margin: 14px 0 4px;
	padding: 0;
	display: grid;
	/* The pipeline is seven steps and it is ORDERED, so it reads as a sequence
	   only when the whole sequence is on one line. auto-fit wrapped it to 5+2,
	   which put step 6 under step 1 and broke the reading order it depends on.
	   The spec has exactly seven — see rules/rulebook.md A2 — so the count is
	   fixed and can be laid out as one. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
}

@media (max-width: 1400px) {
	/* Below this, seven columns squeeze the text past readability, so the
	   sequence breaks into two even rows rather than a ragged one. */
	.rb-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.rb-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.rb-pipeline { grid-template-columns: 1fr; gap: 8px; }
	.rb-pipeline li { height: auto; }
}
.rb-pipeline li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid #e8eaed;
	border-left: 3px solid var(--energy-blue);
	border-radius: 10px;
	padding: 14px 16px;
	/* Equal-height boxes across the row, so the grid reads as a set rather
	   than as seven differently sized offcuts. */
	height: 100%;
}

@media (max-width: 560px) {
	/* One column on a phone: a 260px minimum would give two cramped columns
	   at 360px, which is worse than the stack it replaced. */
	.rb-pipeline { grid-template-columns: 1fr; gap: 8px; }
	.rb-pipeline li { height: auto; }
}
.rb-pipeline li > span {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--navy);
	color: #ffffff;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.rb-pipeline li > div {
	font-size: 0.88rem;
	color: #5f6368;
	line-height: 1.55;
}
.rb-pipeline li strong {
	display: block;
	font-size: 0.88rem;
	font-weight: 800;
	color: #202124;
	margin-bottom: 2px;
}

/* Engine cards */
.rb-engine {
	border: 1px solid #dadce0;
	border-top: 4px solid var(--energy-blue);
	border-radius: 14px;
	padding: 24px 26px;
	margin: 20px 0;
	background: #ffffff;
}
.rb-engine.intraday { border-top-color: var(--amber); }
.rb-engine.longterm { border-top-color: var(--green-power); }
.rb-engine.portfolio { border-top-color: var(--energy-blue); }
.rb-engine > header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.rb-engine-icon {
	font-size: 1.6rem;
	line-height: 1;
}
.rb-engine h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: #202124;
	margin: 0;
}
.rb-engine-horizon {
	font-size: 0.8rem;
	font-weight: 600;
	color: #5f6368;
}
.rb-engine-lead {
	font-size: 0.92rem;
	color: #3c4043;
	line-height: 1.7;
	margin-bottom: 16px;
}
.rb-engine-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 16px;
}
.rb-engine-cols h4 {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #202124;
	margin: 0 0 8px;
}
.rb-engine-cols ul {
	margin: 0 0 0 18px;
	padding: 0;
	font-size: 0.87rem;
	color: #5f6368;
	line-height: 1.6;
}
.rb-engine-cols li { margin-bottom: 6px; }
.rb-engine-note {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.87rem;
	color: #5f6368;
	line-height: 1.65;
	margin-top: 10px;
}
.rb-engine-note strong { color: #202124; }
.rb-engine-note.veto {
	background: #fef2f2;
	border-color: #fecaca;
	border-left: 4px solid var(--rose);
	color: #7f1d1d;
}
.rb-engine-note.veto strong { color: #7f1d1d; }

/* Prohibition lists */
ul.rb-no {
	list-style: none;
	margin-left: 0;
	padding: 0;
}
ul.rb-no li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 6px;
}
ul.rb-no li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--rose);
	font-weight: 800;
	font-size: 0.8rem;
}
ul.rb-no-wide {
	columns: 2;
	column-gap: 32px;
	margin-top: 12px;
}
ul.rb-no-wide li { break-inside: avoid; }

/* Long-term vs portfolio disagreement sample */
.rb-disagree {
	background: var(--navy-dark);
	border-radius: 12px;
	padding: 18px 20px;
	margin-top: 14px;
}
.rb-disagree-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 12px;
}
.rb-disagree-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.rb-disagree p {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
	margin: 12px 0 0;
}
.rb-pill {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
}
.rb-pill.blue { background: rgba(0, 97, 255, 0.22); color: #93c5fd; }
.rb-pill.amber { background: rgba(255, 179, 0, 0.2); color: #fcd34d; }

/* Decision matrix */
.rb-matrix-wrap {
	overflow-x: auto;
	margin: 16px 0;
	border: 1px solid #dadce0;
	border-radius: 12px;
}
.rb-matrix {
	width: 100%;
	min-width: 660px;
	border-collapse: collapse;
	font-size: 0.85rem;
}
.rb-matrix th,
.rb-matrix td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid #e8eaed;
	border-right: 1px solid #e8eaed;
	line-height: 1.45;
}
.rb-matrix thead th {
	background: var(--navy);
	color: #ffffff;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: none;
	border-right-color: rgba(255, 255, 255, 0.12);
}
.rb-matrix .rb-corner {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
.rb-matrix tbody th {
	background: #f8f9fa;
	font-weight: 800;
	color: #202124;
	white-space: nowrap;
}
.rb-matrix tr:last-child th,
.rb-matrix tr:last-child td { border-bottom: none; }
.rb-matrix th:last-child,
.rb-matrix td:last-child { border-right: none; }
.rb-matrix td { font-weight: 600; }
.rb-matrix td.buy { background: #ecfdf5; color: #065f46; }
.rb-matrix td.buy-soft { background: #f0fdf4; color: #147c3b; }
.rb-matrix td.hold { background: #fffbeb; color: #92400e; }
.rb-matrix td.watch { background: #f8f9fa; color: #5f6368; }
.rb-matrix td.avoid { background: #fef2f2; color: #b91c1c; }
.rb-matrix td.sell { background: #fee2e2; color: #7f1d1d; }
.rb-matrix-veto th { background: #fee2e2 !important; color: #7f1d1d !important; }

/* Validation stat tiles */
.rb-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 16px 0 20px;
}
.rb-stat {
	background: #f8f9fa;
	border: 1px solid #dadce0;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
}
.rb-stat strong {
	display: block;
	font-family: var(--font-mono);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.1;
}
.rb-stat span {
	display: block;
	font-size: 0.78rem;
	color: #5f6368;
	margin-top: 6px;
	line-height: 1.4;
}

.rb-note {
	font-size: 0.86rem !important;
	color: #5f6368 !important;
}

@media (max-width: 900px) {
	.rb-hero-stats,
	.rb-axes,
	.rb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-engine-cols { grid-template-columns: 1fr; gap: 16px; }
	ul.rb-no-wide { columns: 1; }
}

@media (max-width: 768px) {
	.rb-hero { padding: 22px 20px; border-radius: 12px; }
	.rb-hero h2 { font-size: 1.2rem; }
	.rb-engine { padding: 18px 16px; }
	.rb-disagree { padding: 16px; }
}

/* ── 1-Click Trading steps: badge and heading share a line ──
   The numbered badge sat on a line of its own above the heading and cost a
   whole row of height per step, at every width. The grid puts them side by
   side and drops the copy underneath, using the markup as it already stands
   (span, h3, p). */
.exec-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"num title"
		"body body";
	align-items: center;
	column-gap: 12px;
}
.exec-num {
	grid-area: num;
	margin-bottom: 0;
}
.exec-step h3 {
	grid-area: title;
	margin-bottom: 0;
}
.exec-step p {
	grid-area: body;
	margin-top: 10px;
}

/* ── Mobile: broker chips stay on one line ────────────────────
   Three chips wrapped onto two rows at 380px and cost a whole row of height.
   They shrink instead — the row is short enough to hold all three once the
   PAN chip is gone. */
@media (max-width: 640px) {
	.pf-promo-brokers {
		flex-wrap: nowrap;
		gap: 6px;
	}
	.pf-promo-broker {
		padding: 4px 9px;
		font-size: 0.67rem;
		white-space: nowrap;
	}
}

/* ── Mobile: the comparison table ─────────────────────────────
   .compare-container already scrolls horizontally, but at desktop padding the
   first two columns alone filled a phone screen, so the third and fourth were
   invisible with nothing to suggest they existed. Tighter cells fit
   Capability + StockFaves with the next column edge showing, which is what
   makes a horizontal scroll discoverable. */
@media (max-width: 768px) {
	.compare-container {
		-webkit-overflow-scrolling: touch;
	}
	.table-fluid {
		font-size: 0.8rem;
		min-width: 560px;
	}
	.table-fluid th {
		padding: 12px 12px;
		font-size: 0.7rem;
		letter-spacing: 0.03em;
	}
	.table-fluid td {
		padding: 10px 12px;
	}
	.icon-yes,
	.icon-no {
		font-size: 0.95rem;
	}
}

/* ── Compact footer ───────────────────────────────────────────
   Was one flat list of thirteen links, which on a phone became six rows of
   wrapped text with no grouping to read it by. Now: brand and copyright on
   one row, then three labelled groups whose links wrap inline. */
.footer-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 14px;
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 1.15rem;
	font-weight: 900;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.footer-brand-accent { color: var(--green-accent); }

.footer-copy {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.85);
}

/* Pushed right on desktop; falls back into the flow on a phone rather than
   being hidden, because it is the footer's only call to action. */
.footer-cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--green-btn);
	color: #06281a;
	font-size: 0.76rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}
.footer-cta:hover { background: var(--green-btn-hover); }

.footer-groups {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 16px;
}

.footer-group-label {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #34d399;
	margin-bottom: 6px;
}

/* Links wrap inline inside their group instead of stacking one per row. */
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	max-width: 100%;
}

.footer-links a {
	font-size: 0.83rem;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	transition: color 0.2s;
	/* A 24px line keeps every link a legitimate tap target without changing
	   how large the text looks. */
	line-height: 24px;
}

.footer-links a:hover { color: #ffffff; }

@media (max-width: 900px) {
	.footer {
		padding: 32px 0 22px;
	}
	.footer-top {
		gap: 8px 12px;
	}
	.footer-cta {
		margin-left: 0;
		width: 100%;
		justify-content: center;
		height: 38px;
		font-size: 0.82rem;
	}
	.footer-groups {
		justify-content: flex-start;
		gap: 14px 28px;
		padding-top: 14px;
	}
	.footer-legal {
		margin-top: 14px;
		padding-top: 14px;
	}
}

@media (max-width: 640px) {
	.footer-brand { font-size: 1.05rem; }
	.footer-copy { font-size: 0.72rem; }
	.footer-links { gap: 0 14px; }
	.footer-links a { font-size: 0.8rem; }
}

/* ── Mobile: the screener preview table ───────────────────────
   Eleven columns at desktop padding meant a phone saw the symbol and the
   price and nothing else — the Quant Signal, which is the entire point of the
   preview, sat several screens to the right of a scroll nobody knew was
   there. The descriptive columns are hidden below 768px so symbol, price,
   change, signal and the action button all fit without scrolling.

   display:none does NOT renumber :nth-child, so the cell indices the page's
   JavaScript writes into (5, 7, 8, 9 for the fundamentals and 10 for the
   signal) stay correct — the values are still set, just not shown here. */
@media (max-width: 768px) {
	.preview-table th:nth-child(1),
	.preview-table td:nth-child(1),
	.preview-table th:nth-child(5),
	.preview-table td:nth-child(5),
	.preview-table th:nth-child(6),
	.preview-table td:nth-child(6),
	.preview-table th:nth-child(7),
	.preview-table td:nth-child(7),
	.preview-table th:nth-child(8),
	.preview-table td:nth-child(8),
	.preview-table th:nth-child(9),
	.preview-table td:nth-child(9) {
		display: none;
	}

	.preview-table {
		font-size: 0.82rem;
	}
	.preview-table th {
		padding: 10px 10px;
		font-size: 0.65rem;
		letter-spacing: 0.02em;
	}
	.preview-table td {
		padding: 10px 10px;
	}
	/* The company name under the symbol is what makes that column wide. The
	   ticker identifies the row on its own at this size, so the sub-line and
	   its line break both go. */
	.preview-table td:nth-child(2) br,
	.preview-table td:nth-child(2) span {
		display: none;
	}
}

/* ── Mobile: the sample holdings table ────────────────────────
   Weight and Gain are the two columns a sample portfolio can afford to lose;
   Holding, Sector · Size and Signal are what the section is demonstrating. */
@media (max-width: 640px) {
	.pf-promo-table th:nth-child(4),
	.pf-promo-table td:nth-child(4),
	.pf-promo-table th:nth-child(5),
	.pf-promo-table td:nth-child(5) {
		display: none;
	}
	.pf-promo-table {
		font-size: 0.78rem;
	}
	.pf-promo-table thead th,
	.pf-promo-table td {
		padding: 8px 7px;
	}
}

/* The statutory notice is the first thing in the card on every standalone
   page, so its own top margin just stacked on the card's padding. */
.legal-card > .legal-alert:first-child {
	margin-top: 0;
}

/* ── 1-Click Trading feature cards: icon and heading share a line ──
   Same shape as the numbered steps above — the icon tile had a row to itself
   above the heading. Identical markup order (span.exec-icon, h3, p), so the
   same grid applies. */
.exec-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"body body";
	align-items: center;
	column-gap: 12px;
}
.exec-icon {
	grid-area: icon;
	margin-bottom: 0;
}
.exec-card h3,
.exec-card h4 {
	grid-area: title;
	margin-bottom: 0;
}
.exec-card p {
	grid-area: body;
	margin-top: 10px;
}


/* ── Live index strip above the hero preview card ─────────────
   In normal flow inside .fluid-container, NOT absolutely positioned: an
   absolute strip anchored to the card escaped the container and was clipped
   by the top of the hero. It is the first row of the right-hand column, so
   it lines up with the card's left edge and with the headline on the left. */
.hero-mockup-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	/* Stretched to the row the headline column sets, so the markets card can
	   fill it. The hero grid centres its items; this one opts out. */
	align-self: stretch;
	/* Load-bearing: without it the nowrap strip below sets a 675px floor for
	   this grid column and every sibling in the hero overflows with it. */
	min-width: 0;
	/* The strip's type is sized off this column's width (cqi), not the
	   window's, so NIFTY and GIFT NIFTY always fit one line side by side. */
	container-type: inline-size;
}

/* NIFTY on the card's left edge, GIFT NIFTY on its right, so the strip is
   exactly as wide as the markets card below it. */
.hero-index-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	/* The least the two may close to; space-between usually gives more. The
	   type below scales with the column (cqi) and leaves ~5% spare, because
	   Firefox sets this mono face a little wider than Chrome does. */
	gap: 4px 0.6rem;
	white-space: normal;
	/* The bottom margin was 20px before the breadth row moved in under it;
	   the two margins together now cost what that one gap used to. */
	margin: 10px 0 12px 0;
	font-family: var(--font-mono, ui-monospace, monospace);
	line-height: 1;
}

/* ── NSE breadth row ───────────────────────────────────────────
   One line under the index strip and built to its measure: "MARKET STATS"
   and the traded count in the strip's own label-and-figure type, starting
   on NIFTY's left edge, then advances, declines and unchanged as three
   equal badges running out to GIFT NIFTY's right edge. The type is sized
   off the column (cqi) like the strip's, so the row holds one line at every
   desktop width. */
.hero-breadth {
	display: grid;
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 6px 8px;
	margin: 0 0 14px 0;
	font-family: var(--font-mono, ui-monospace, monospace);
	line-height: 1;
	white-space: nowrap;
	min-width: 0;
}

.hero-breadth.hidden { display: none; }

/* Plain text, not a pill: the same name and figure styles as NIFTY above. */
.hero-breadth .hbr-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	margin-right: 4px;
}

.hero-breadth .hbr-name {
	font-size: clamp(0.66rem, 1.98cqi, 0.8rem);
	font-weight: 800;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.75);
}

.hero-breadth .hbr-total {
	font-size: clamp(0.85rem, 2.7cqi, 1.1rem);
	font-weight: 800;
	color: #ffffff;
}

/* Tinted pills, the same greens and reds as the ticker's change badges. */
.hero-breadth .hbr-badge {
	display: inline-flex;
	justify-content: center;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: clamp(0.7rem, 2.2cqi, 0.9rem);
	font-weight: 700;
	border: 1px solid transparent;
	overflow: hidden;
}

.hero-breadth .hbr-badge.adv  { color: #34d399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); }
.hero-breadth .hbr-badge.dec  { color: #f87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.28); }
.hero-breadth .hbr-badge.unch { color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }

/* Once the card is too narrow for all four on a line — a phone, or the
   tighter two-column hero — the count takes its own line, as NIFTY
   and GIFT NIFTY do there, and the three badges share the one below.
   Keyed to the card's width, not the window's, since that is what they
   have to share. */
@container (max-width: 560px) {
	.hero-breadth { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero-breadth .hbr-stat { grid-column: 1 / -1; justify-self: start; margin-right: 0; }
	.hero-breadth .hbr-badge { font-size: 0.72rem; gap: 3px; padding: 4px 3px; }
}

/* The mono face draws ▲ ▼ ● at about half its cap height, so they are set
   larger than the digits beside them to read at the same weight. */
.hero-breadth .hbr-mark { font-size: 1.25em; line-height: 1; }
.hero-breadth .hbr-n { color: #ffffff; font-weight: 800; }
.hero-breadth .hbr-pct { opacity: 0.9; }
.hero-breadth .hbr-pct:empty { display: none; }

/* Its own item rather than a ::before on GIFT, so space-between puts it
   midway between the two levels instead of against GIFT's name. Only for
   the pair on one line: without GIFT, or once the column is too narrow to
   hold both (they wrap below ~510px), it has nothing to separate. */
.hero-index-strip .hix-sep {
	color: rgba(255, 255, 255, 0.28);
	font-weight: 400;
}

.hero-index-strip:has(#hixGift.hidden) .hix-sep { display: none; }

@container (max-width: 510px) {
	.hero-index-strip .hix-sep { display: none; }
}

.hero-index-strip .hix {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	white-space: nowrap;
}

.hero-index-strip .hix-name {
	font-size: clamp(0.66rem, 1.98cqi, 0.8rem);
	font-weight: 800;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.75);
}

.hero-index-strip .hix-price {
	font-size: clamp(0.85rem, 2.7cqi, 1.1rem);
	font-weight: 800;
	color: #ffffff;
}

.hero-index-strip .hix-move {
	font-size: clamp(0.72rem, 2.22cqi, 0.93rem);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
}

.hero-index-strip .hix-move.up   { color: #34d399; }
.hero-index-strip .hix-move.down { color: #f87171; }

/* A refreshed value ticks once so a glance can tell it is live. */
@keyframes hixFlash { from { opacity: 0.45; } to { opacity: 1; } }
.hero-index-strip .hix-price.tick { animation: hixFlash 0.45s ease; }

/* A cell with no feed behind it is removed, not left showing dashes — an
   empty "GIFT NIFTY --" reads as the number being zero. */
.hero-index-strip .hix.hidden { display: none; }

@media (max-width: 900px) {
	/* One line is a desktop luxury — the pair needs ~675px and a phone has
	   358px. Two rows rather than a hero forced wider than the screen, which
	   is what a nowrap strip did: it set a 675px floor on its grid column and
	   dragged the headline and buttons off the side with it.

	   These are the numbers read first and most often, so they are centred on
	   their own rows to match the centred headline and full-width buttons
	   around them, and each row is a grid so NIFTY and GIFT NIFTY line up
	   name-under-name and figure-under-figure instead of ragging. */
	/* The strip owns the three columns and each row borrows them through
	   subgrid. Two independent grids, one per row, each sized to its own
	   content and centred on its own, so a longer name pushed its row right
	   and nothing lined up. */
	.hero-index-strip {
		display: grid;
		grid-template-columns: auto auto auto;
		justify-content: center;
		align-items: baseline;
		white-space: normal;
		gap: 6px 8px;
		margin: 4px 0 16px 0;
	}

	.hero-index-strip .hix {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		align-items: baseline;
		white-space: nowrap;
	}

	.hero-breadth {
		row-gap: 8px;
		margin: 0 0 16px 0;
	}
	/* Centred here, where the NIFTY rows above it are. */
	.hero-breadth .hbr-stat { justify-self: center; }

	/* The divider only separates two cells sharing one line. */
	.hero-index-strip .hix-sep { display: none; }

	/* Sized off the window so the two rows fill the width a phone gives
	   them (~92% of it on the longest move) instead of stopping short of
	   either edge. The floors are the old fixed sizes. */
	.hero-index-strip .hix-name  { font-size: clamp(0.78rem, 3.5vw, 1rem); text-align: right; }
	.hero-index-strip .hix-price { font-size: clamp(1.06rem, 4.8vw, 1.35rem); text-align: right; }
	.hero-index-strip .hix-move  { font-size: clamp(0.9rem, 4.05vw, 1.15rem); }
}

/* A phone: the whole breadth reading on one line — the label, then
   advances and declines. Unchanged is dropped here to make the room; it is
   a few percent and still counted in both shares. */
@media (max-width: 600px) {
	.hero-breadth {
		grid-template-columns: auto repeat(2, minmax(0, 1fr));
		gap: 0 6px;
	}
	.hero-breadth .hbr-stat { grid-column: auto; justify-self: start; gap: 5px; margin-right: 2px; }
	/* The label alone, at NIFTY's size: the traded count is dropped here. */
	.hero-breadth .hbr-name  { font-size: clamp(0.78rem, 3.5vw, 1rem); }
	.hero-breadth .hbr-total { display: none; }
	/* "MARKET" alone: dropping "STATS" buys the two badges larger type. */
	.hero-breadth .hbr-name-rest { display: none; }
	.hero-breadth .hbr-badge { font-size: clamp(0.8rem, 4vw, 1.05rem); gap: 4px; padding: 4px 4px; }
	.hero-breadth .hbr-badge.unch { display: none; }

	/* The index rows spread to the card's edges, so they share both edges
	   with the breadth row under them: GIFT NIFTY and MARKET STATS start
	   on the left edge, the moves and the last badge end on the right. */
	.hero-index-strip { justify-content: space-between; }
	.hero-index-strip .hix-move { text-align: right; }
}

/* The asset-class card headings are links to their hubs. They keep the
   heading's own colour so the card still reads as a card, not as a list of
   blue links, and announce themselves on hover. */
.hl-card-title-link {
	color: inherit;
	text-decoration: none;
}

.hl-card-title-link:hover,
.hl-card-title-link:focus-visible {
	color: var(--energy-blue, #0061FF);
	text-decoration: underline;
}

/* The asset-class card footer: the action, then the fact it carries,
   stacked. Five cards across leave ~275px each, and a button beside a caption
   in that space ellipsised every caption on the row. Stacked, each card shows
   its label in full and all five line up with each other. */
.hl-card-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.hl-card-foot > .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.hl-card-foot > span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* The live quote line inside each asset-class card. Empty until the fetch
   lands, and it takes no space until then — a card that reserves a blank
   strip for data that may never arrive looks broken while it waits. */
.hl-quote-row {
	display: none;
}

.hl-quote-row.is-live {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--border-light, #e2e8f0);
}

.hl-quote {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-mono, ui-monospace, monospace);
	line-height: 1.2;
}

.hlq-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: var(--text-muted, #64748b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hlq-value {
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--text-navy, #0A1F44);
	white-space: nowrap;
}

.hlq-move {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--text-muted, #64748b);
	white-space: nowrap;
	min-width: 52px;
	text-align: right;
}

.hlq-move.up   { color: var(--green-power, #047f59); }
.hlq-move.down { color: #dc2626; }

/* A small spinner for any figure still being fetched.
   The hero card and the index strip ship with em dashes in the markup so a
   crawler and a JS-less reader see something, but a live visitor met a grid of
   dashes for the first second or two and read it as a broken page rather than
   a loading one. The spinner says "coming", which a dash does not.

   Inline-block and sized in em, so it sits on the text baseline it replaces
   and matches whatever type size it lands in. */
.sf-spin {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	vertical-align: -0.08em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.45;
	animation: sfSpin 0.7s linear infinite;
}

@keyframes sfSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	/* Still shows something is pending, without the movement. */
	.sf-spin { animation: none; opacity: 0.3; }
}

/* A level whose source stamped it more than half an hour ago. GIFT trades
   almost around the clock, so an old print is a close, not a quote — dimmed
   so it reads as held rather than live. The figure stays legible: hiding it
   would be worse than showing it quietly. */
.hero-index-strip .hix.is-stale { opacity: 0.62; }

.hero-index-strip .hix.is-stale .hix-move {
	color: rgba(255, 255, 255, 0.6);
}

/* The short-term engine card. The other two carry a horizon colour on their
   top edge; this one sat undocumented, so it never had one. */
.rb-engine.shortterm { border-top-color: #7c3aed; }

/* ── Minimum readable label size on a phone ───────────────────
   An audit at 390px found 64 text nodes under 11.5px — none of them body
   copy, all of them micro-labels: the quote-row captions, the portfolio
   promo table's annotations, the hero card's stat labels and the footer
   group headings, ranging from 9.9px to 11.2px.

   No standard mandates a size, but sub-11px uppercase on a phone is at the
   edge of legible, and these are the labels that say what each number IS.
   A floor rather than a rewrite: each keeps its relative weight, and nothing
   that already clears the line is touched. */
@media (max-width: 600px) {
	.hlq-label,
	.hlq-move,
	.mkt-label,
	.footer-group-label,
	.pf-promo-pill,
	.pf-promo-cap,
	.pf-promo-sig,
	.pf-promo-basis,
	.pf-promo-split-label,
	.pf-promo-broker,
	.pf-promo-tag,
	.pf-promo-note {
		font-size: 11.5px !important;
	}
}

/* The company name under each ticker in the screener preview. 0.78rem is
   11.2px once the root shrinks on a phone — the last text on the page below
   the readable floor. */
@media (max-width: 600px) {
	.pf-sub-name,
	.pf-promo-table td span { font-size: 11.5px !important; }
}

/* The bond hub's highlight lists and the rulebook pills. */
@media (max-width: 600px) {
	.rb-pill,
	.rb-corner,
	.security-highlights li {
		font-size: 11.5px !important;
	}
}

/* The comparison table's column headers on the home page — the last text
   there under the floor. */
@media (max-width: 600px) {
	.comparison-table th,
	.comparison-table td,
	table.comp-table th,
	.brand-col {
		font-size: 11.5px !important;
	}
}

/* Table headers on a phone. The screener-preview and portfolio-promo tables
   set theirs at 10.2–10.4px inline; these are column labels, so they are the
   text that has to stay readable when the values beside them are terse. */
@media (max-width: 600px) {
	table th { font-size: 11.5px !important; }
}