@layer components {

	/* Pin the investors landing body bg to a soft warm tint so the
	   white cards above it read as raised — without this override the
	   page bg falls back to --white and the off-white card-bg sinks
	   below the body, inverting the natural elevation hierarchy. */
	.investors-portal {
		--body-bg: var(--off-white);
		--card-bg: var(--white);
		background: var(--off-white);
	}

	.investors-portal__body {
		display: flex;
		flex-direction: column;
	}

	.investors-portal__body > .container {
		display: flex;
		flex-direction: column;
		gap: calc(var(--container-gap) * 2);
		min-inline-size: 0;
	}

	.investors-portal__intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--container-gap);
		align-items: start;
		padding-block-end: var(--space-m);
	}

	.investors-portal__intro-text {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap);
		min-inline-size: 0;
		max-inline-size: 70ch;
	}

	.investors-portal__intro-heading {
		margin: 0;
		font-size: var(--heading-block);
		font-weight: var(--weight-bold);
		line-height: 1.15;
		letter-spacing: var(--tracking-tight);
		color: var(--text-main);
	}

	.investors-portal__intro-body {
		color: var(--text-body);
		font-size: var(--text-m);
		line-height: 1.6;
	}

	.investors-portal__intro-body p {
		margin: 0;
	}

	.investors-portal__intro-body p + p {
		margin-block-start: var(--space-s);
	}

	.investors-portal__intro-meta {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		text-align: end;
		min-inline-size: 0;
	}

	.investors-portal__intro-meta-label {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-subtle);
	}

	.investors-portal__intro-meta-value {
		margin: 0;
		font-size: var(--text-s);
		font-weight: var(--weight-semibold);
		color: var(--text-main);
	}

	.investors-portal__dashboard {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
		gap: var(--grid-gap);
		align-items: stretch;
	}

	.dashboard-pdf-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--content-gap);
		padding: var(--space-xl);
		border-radius: var(--radius-l);
		background: var(--card-gradient-primary);
		color: var(--text-on-dark);
		min-inline-size: 0;
		box-shadow: var(--card-shadow);
	}

	.dashboard-pdf-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap);
		min-inline-size: 0;
	}

	.dashboard-pdf-card__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--secondary);
	}

	.dashboard-pdf-card__eyebrow-dot {
		flex-shrink: 0;
		inline-size: 6px;
		block-size: 6px;
		border-radius: var(--radius-full);
		background: var(--secondary);
	}

	.dashboard-pdf-card__thumb {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding: var(--space-s);
		min-block-size: 10rem;
		border-radius: var(--radius-m);
		background: color-mix(in oklch, var(--white) 8%, transparent);
		overflow: hidden;
	}

	.dashboard-pdf-card__thumb-image {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		opacity: 0.55;
	}

	.dashboard-pdf-card__tag {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding-block: var(--space-3xs);
		padding-inline: var(--space-s);
		border-radius: var(--radius-full);
		background: color-mix(in oklch, var(--primary-ultra-dark) 75%, transparent);
		color: var(--white);
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
	}

	.dashboard-pdf-card__tag .icon-meta {
		color: var(--secondary);
	}

	.dashboard-pdf-card__title {
		margin: 0;
		font-size: var(--heading-block);
		font-weight: var(--weight-bold);
		line-height: 1.15;
		letter-spacing: var(--tracking-tight);
		color: var(--white);
	}

	.dashboard-pdf-card__meta {
		margin: 0;
		font-size: var(--text-s);
		color: color-mix(in oklch, var(--white) 80%, transparent);
	}

	.dashboard-pdf-card__ctas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster-gap);
		min-inline-size: 0;
	}

	.dashboard-pdf-card__link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-s);
		font-weight: var(--weight-semibold);
		color: color-mix(in oklch, var(--white) 80%, transparent);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-default);
	}

	.dashboard-pdf-card__link:hover,
	.dashboard-pdf-card__link:focus-visible {
		color: var(--white);
	}

	.dashboard-stock-card {
		display: flex;
		flex-direction: column;
		gap: var(--content-gap);
		padding: var(--space-xl);
		border-radius: var(--radius-l);
		background: var(--white);
		border: 1px solid var(--border-subtle);
		min-inline-size: 0;
		box-shadow: var(--card-shadow);
	}

	.dashboard-stock-card__header {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		min-inline-size: 0;
	}

	.dashboard-stock-card__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--secondary);
	}

	.dashboard-stock-card__eyebrow-dot {
		flex-shrink: 0;
		inline-size: 6px;
		block-size: 6px;
		border-radius: var(--radius-full);
		background: var(--secondary);
	}

	.dashboard-stock-card__title {
		margin: 0;
		font-size: var(--heading-block);
		font-weight: var(--weight-bold);
		line-height: 1.15;
		letter-spacing: var(--tracking-tight);
		color: var(--text-main);
	}

	.dashboard-stock-card__listings {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-gap);
		flex: 1;
	}

	.dashboard-stock-card__listing {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--content-gap);
		padding: var(--space-l);
		border-radius: var(--radius-m);
		background: var(--white);
		border: 1px solid var(--border-subtle);
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-top {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-top-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-exchange {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-wide-caps);
		color: var(--text-muted);
	}

	.dashboard-stock-card__listing-id {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-medium);
		color: var(--text-subtle);
	}

	.dashboard-stock-card__listing-price-row {
		margin: 0;
		color: var(--primary-ultra-dark);
	}

	.dashboard-stock-card__listing-price {
		font-size: var(--heading-l);
		font-weight: var(--weight-bold);
		line-height: 1;
		letter-spacing: var(--tracking-tight);
		font-variant-numeric: tabular-nums;
	}

	/* Hanken Grotesk's ₹ glyph reads stretched and geometric next to numerals;
	   DM Sans (the body font) has a more proportionate, restrained rupee. We
	   keep the symbol inline with the numerals, scale it down ~78%, and nudge
	   it up a hair so the optical baseline still sits where it should. */
	.dashboard-stock-card__rupee {
		font-family: var(--font-body);
		font-size: 0.78em;
		font-weight: var(--weight-medium);
		margin-inline-end: 0.18em;
		vertical-align: 0.06em;
	}

	.dashboard-stock-card__listing-change {
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		gap: var(--space-2xs);
		margin: 0;
		padding-block: var(--space-3xs);
		padding-inline: var(--space-s);
		border-radius: var(--radius-full);
		background: color-mix(in oklch, var(--feedback-error) 8%, transparent);
		border: 1px solid var(--feedback-error);
		color: var(--feedback-error);
		font-size: var(--text-xs);
		font-weight: var(--weight-bold);
		font-variant-numeric: tabular-nums;
	}

	.dashboard-stock-card__listing-change[data-direction="up"] {
		background: color-mix(in oklch, var(--feedback-success) 8%, transparent);
		border-color: var(--feedback-success);
		color: var(--feedback-success);
	}

	.dashboard-stock-card__listing-meta-group {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-divider {
		inline-size: 100%;
		block-size: 1px;
		margin: 0;
		border: 0;
		background: var(--border-subtle);
	}

	.dashboard-stock-card__listing-meta {
		display: flex;
		justify-content: space-between;
		gap: var(--space-m);
		margin: 0;
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-stat {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		min-inline-size: 0;
	}

	.dashboard-stock-card__listing-stat--end {
		align-items: flex-end;
		text-align: end;
	}

	.dashboard-stock-card__listing-stat-label {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-wide-caps);
		text-transform: uppercase;
		color: var(--text-subtle);
	}

	.dashboard-stock-card__listing-stat-value {
		margin: 0;
		font-size: var(--text-s);
		font-weight: var(--weight-bold);
		color: var(--text-main);
		font-variant-numeric: tabular-nums;
	}

	.dashboard-stock-card__disclaimer {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--space-xs);
		margin: 0;
		font-size: var(--text-2xs);
		line-height: 1.5;
		color: var(--text-subtle);
	}

	.dashboard-stock-card__disclaimer .icon-meta {
		flex-shrink: 0;
		margin-block-start: 0.15em;
	}

	.investors-portal__section {
		display: flex;
		flex-direction: column;
		gap: var(--container-gap);
		min-inline-size: 0;
	}

	.investors-portal__section-head {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		min-inline-size: 0;
	}

	.investors-portal__section-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-s);
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-subtle);
	}

	.investors-portal__section-eyebrow-rule {
		flex-shrink: 0;
		inline-size: var(--space-l);
		block-size: 2px;
		background: var(--secondary);
	}

	.investors-portal__section-title {
		margin: 0;
		max-inline-size: 32ch;
		font-size: var(--heading-section);
		font-weight: var(--weight-bold);
		line-height: 1.2;
		letter-spacing: var(--tracking-tight);
		color: var(--text-main);
	}

	.tile-grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--grid-gap);
		min-inline-size: 0;
	}

	.tile-grid--financial   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tile-grid--governance  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.tile-grid--disclosures { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.tile-grid__item {
		display: flex;
		min-inline-size: 0;
	}

	.tile-grid__tile {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap);
		inline-size: 100%;
		padding-block: var(--space-l);
		padding-inline: var(--space-l);
		border-radius: var(--radius-l);
		background: var(--white);
		border: 1px solid var(--border-subtle);
		color: var(--text-main);
		text-decoration: none;
		transition:
			background-color var(--duration-fast) var(--ease-default),
			border-color     var(--duration-fast) var(--ease-default),
			transform        var(--duration-instant) var(--ease-default),
			box-shadow       var(--duration-fast) var(--ease-default);
		min-inline-size: 0;
	}

	.tile-grid__tile:hover,
	.tile-grid__tile:focus-visible {
		border-color: var(--primary-light);
		background: var(--surface-tinted);
		transform: translateY(var(--hover-lift));
		box-shadow: var(--card-shadow);
	}

	.tile-grid__tile:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-ring-offset);
	}

	.tile-grid__tile-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		min-inline-size: 0;
	}

	.tile-grid__tile-icon {
		color: var(--primary);
		transition: color var(--duration-fast) var(--ease-default);
	}

	.tile-grid__tile:hover .tile-grid__tile-icon,
	.tile-grid__tile:focus-visible .tile-grid__tile-icon {
		color: var(--primary-hover);
	}

	.tile-grid__tile-arrow {
		color: var(--text-subtle);
		transition: color var(--duration-fast) var(--ease-default),
					transform var(--duration-fast) var(--ease-default);
	}

	.tile-grid__tile:hover .tile-grid__tile-arrow,
	.tile-grid__tile:focus-visible .tile-grid__tile-arrow {
		color: var(--primary);
		transform: translate(2px, -2px);
	}

	.tile-grid__tile-title {
		font-size: var(--text-m);
		font-weight: var(--weight-semibold);
		line-height: 1.3;
		color: var(--text-main);
		min-inline-size: 0;
	}

	.tile-grid__tile-meta {
		font-size: var(--text-xs);
		font-weight: var(--weight-medium);
		color: var(--text-subtle);
		min-inline-size: 0;
	}

	.investors-portal__services {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: stretch;
	}

	.dividend-card {
		gap: var(--card-gap);
		padding: calc(var(--space-l) + var(--space-2xs));
		color: var(--text-main);
		text-decoration: none;
		min-inline-size: 0;
		transition:
			border-color var(--duration-fast) var(--ease-default),
			box-shadow   var(--card-transition),
			transform    var(--card-transition);
	}

	.dividend-card:hover,
	.dividend-card:focus-visible {
		border-color: var(--primary-light);
	}

	.dividend-card:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-ring-offset);
	}

	.dividend-card__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
	}

	.dividend-card__icon {
		color: var(--primary);
	}

	.dividend-card__period {
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-wide-caps);
		color: var(--text-subtle);
	}

	.dividend-card__title {
		font-size: var(--heading-card);
		font-weight: var(--weight-bold);
		line-height: 1.2;
		letter-spacing: var(--tracking-tight);
		color: var(--text-main);
	}

	.dividend-card__body {
		font-size: var(--text-s);
		line-height: 1.5;
		color: var(--text-body);
	}

	.dividend-card__divider {
		inline-size: 100%;
		block-size: 1px;
		background: var(--border-subtle);
	}

	.dividend-card__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
	}

	.dividend-card__foot-meta {
		font-size: var(--text-xs);
		font-weight: var(--weight-medium);
		color: var(--text-subtle);
	}

	.dividend-card__foot-cta {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-s);
		font-weight: var(--weight-semibold);
		color: var(--primary);
	}

	.dividend-card:hover .dividend-card__foot-cta,
	.dividend-card:focus-visible .dividend-card__foot-cta {
		color: var(--primary-hover);
	}

	.grievance-card {
		display: flex;
		flex-direction: column;
		gap: var(--card-gap);
		padding: calc(var(--space-l) + var(--space-2xs));
		border-radius: var(--radius-l);
		background: var(--primary);
		color: var(--text-on-primary);
		min-inline-size: 0;
		box-shadow: var(--card-shadow);
	}

	.grievance-card__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--primary-ultra-light);
	}

	.grievance-card__eyebrow-dot {
		flex-shrink: 0;
		inline-size: 6px;
		block-size: 6px;
		border-radius: var(--radius-full);
		background: var(--secondary);
	}

	.grievance-card__title {
		margin: 0;
		font-size: var(--heading-card);
		font-weight: var(--weight-bold);
		line-height: 1.2;
		letter-spacing: var(--tracking-tight);
		color: var(--white);
	}

	.grievance-card__body {
		margin: 0;
		font-size: var(--text-s);
		line-height: 1.5;
		color: color-mix(in oklch, var(--white) 80%, transparent);
	}

	.grievance-card__stats {
		display: flex;
		gap: var(--space-xl);
		margin: 0;
		padding-block-start: var(--space-2xs);
	}

	.grievance-card__stat {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--space-3xs);
		min-inline-size: 0;
	}

	.grievance-card__stat-label {
		margin: 0;
		font-size: var(--text-xs);
		font-weight: var(--weight-medium);
		color: var(--primary-ultra-light);
	}

	.grievance-card__stat-value {
		margin: 0;
		font-size: var(--heading-xs);
		font-weight: var(--weight-bold);
		line-height: 1;
		letter-spacing: var(--tracking-tight);
		color: var(--white);
		font-variant-numeric: tabular-nums;
	}

	.grievance-card__divider {
		inline-size: 100%;
		block-size: 1px;
		margin: 0;
		border: 0;
		background: color-mix(in oklch, var(--white) 14%, transparent);
	}

	.grievance-card__contact {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
	}

	.grievance-card__contact-label {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--primary-ultra-light);
	}

	.grievance-card__contact-name {
		margin: 0;
		font-size: var(--text-m);
		font-weight: var(--weight-bold);
		color: var(--white);
	}

	.grievance-card__contact-role {
		margin: 0;
		font-size: var(--text-s);
		font-weight: var(--weight-medium);
		color: color-mix(in oklch, var(--white) 80%, transparent);
	}

	.grievance-card__contact-channels {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-m);
		margin: 0;
		padding-block-start: var(--space-xs);
	}

	.grievance-card__contact-channel {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-s);
		font-weight: var(--weight-medium);
		color: var(--white);
		text-decoration: none;
		transition: opacity var(--duration-fast) var(--ease-default);
	}

	.grievance-card__contact-channel .icon-meta {
		color: var(--secondary);
	}

	.grievance-card__contact-channel:hover,
	.grievance-card__contact-channel:focus-visible {
		opacity: 0.85;
	}

	.grievance-card__cta {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		margin-block-start: auto;
		padding-block-start: var(--space-m);
		font-size: var(--text-m);
		font-weight: var(--weight-semibold);
		color: var(--white);
		text-decoration: none;
		border-block-start: 1px solid color-mix(in oklch, var(--white) 14%, transparent);
		transition: color var(--duration-fast) var(--ease-default);
	}

	.grievance-card__cta:hover,
	.grievance-card__cta:focus-visible {
		color: var(--primary-ultra-light);
	}

	@media (max-width: 64em) {
		.investors-portal__intro {
			grid-template-columns: minmax(0, 1fr);
		}

		.investors-portal__intro-meta {
			text-align: start;
		}

		.investors-portal__dashboard {
			grid-template-columns: minmax(0, 1fr);
		}

		.tile-grid--financial,
		.tile-grid--governance,
		.tile-grid--disclosures {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.investors-portal__services {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 48em) {
		.dashboard-pdf-card,
		.dashboard-stock-card,
		.dividend-card,
		.grievance-card {
			padding: var(--space-l);
		}

		.dashboard-stock-card__listings {
			grid-template-columns: minmax(0, 1fr);
		}

		.dashboard-stock-card__listing {
			padding: var(--space-m);
		}

		.tile-grid--financial,
		.tile-grid--governance,
		.tile-grid--disclosures {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.investors-portal__section-title {
			font-size: var(--heading-block);
		}

		.grievance-card__contact-channels {
			flex-direction: column;
			gap: var(--space-2xs);
		}
	}

	@media (max-width: 32em) {
		.tile-grid--financial,
		.tile-grid--governance,
		.tile-grid--disclosures {
			grid-template-columns: minmax(0, 1fr);
		}

		.dashboard-stock-card__listing-price {
			font-size: var(--heading-block);
		}
	}

}