.company-hero,
.company-insights,
.profile-nav,
.chart-container {
    --company-accent: var(--accent-primary, #FFA500);
    --company-rule: var(--border-color);
}

.company-hero {
    --company-hero-panel: #11161c;
    --company-hero-ink: #e8edf2;
    --company-hero-muted: #74818d;
    --company-hero-fallback: #242c34;
    --company-hero-up: #47c47a;
    --company-hero-down: #ef6662;
    display: grid;
    width: 100%;
    min-height: 124px;
    grid-template-columns: minmax(4.5rem, .55fr) 80px minmax(18rem, 2.6fr) minmax(9rem, 1fr);
    grid-template-areas:
        "rank logo company cap"
        "support support support support";
    align-items: center;
    row-gap: clamp(1rem, 2vw, 1.5rem);
    column-gap: clamp(.75rem, 1.5vw, 1.25rem);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--company-hero-muted) 24%, transparent);
    border-radius: 20px;
    margin-bottom: 1rem;
    background: var(--company-hero-panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12), inset 0 1px rgba(255, 255, 255, .025);
    color: var(--company-hero-ink);
    direction: rtl;
}

body.light .company-hero {
    --company-hero-panel: #f9fafb;
    --company-hero-ink: #12171d;
    --company-hero-muted: #697580;
    --company-hero-fallback: #e1e6ea;
    --company-hero-up: #16804b;
    --company-hero-down: #bd3d3d;
}

.company-hero-identity {
    min-width: 0;
    grid-area: company;
    direction: rtl;
    text-align: start;
}

html[lang="en"] .company-hero-identity,
html[lang="en"] .company-hero-metric,
html[lang="en"] .company-hero,
html[lang="en"] .company-hero-support > div {
    direction: ltr;
}

.company-hero-logo {
    display: grid;
    width: 80px;
    height: 80px;
    grid-area: logo;
    place-items: center;
    justify-self: end;
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    background: #fff;
}

.company-hero-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    transform: scale(1.04);
}

.company-hero-logo:not(.is-fallback) {
    background: transparent;
}

.company-hero-logo.is-fallback {
    background: var(--company-hero-fallback);
    color: var(--company-hero-muted);
    font-size: 1.45rem;
    font-weight: 700;
}

.company-hero-identity p {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 0 0 .15rem;
    color: var(--company-hero-muted);
    font-size: .68rem;
    font-weight: 600;
}

.company-hero-identity p span {
    font-weight: 400;
}

.company-hero-identity p > bdi {
    color: var(--company-hero-ink);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}

.company-hero-name {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.25rem, 2.3vw, 1.9rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.025em;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.company-hero-metric {
    min-width: 0;
    align-self: center;
    direction: rtl;
    text-align: center;
}

.company-hero-metrics { display: contents; }

.company-hero-cap { grid-area: cap; }
.company-hero-rank {
    grid-area: rank;
}

.company-hero-metric > span {
    display: block;
    margin-bottom: .28rem;
    color: var(--company-hero-muted);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
}

.company-hero-metric > strong {
    display: block;
    color: var(--company-hero-ink);
    font-family: inherit;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.05em;
    white-space: nowrap;
}

.company-hero-support {
    display: grid;
    min-width: 0;
    grid-area: support;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin: 0;
    padding-block: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--company-hero-muted) 18%, transparent);
    direction: ltr;
}

.company-hero-support > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: .35rem;
    padding-inline: .75rem;
    direction: rtl;
    text-align: center;
}

.company-hero-support > div + div {
    border-left: 1px solid color-mix(in srgb, var(--company-hero-muted) 14%, transparent);
}

.company-hero-support dt {
    color: var(--company-hero-muted);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
}

.company-hero-support dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--company-hero-ink);
    font-size: clamp(.9rem, 1.35vw, 1.08rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-hero-return.up dd { color: var(--company-hero-up); }
.company-hero-return.down dd { color: var(--company-hero-down); }

.profile-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-bottom: 1px solid var(--company-rule);
    margin-bottom: 1.5rem;
    overflow: visible;
}

.profile-nav .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .7rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    font: inherit;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s;
}

.profile-nav .nav-link:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.profile-nav .nav-link.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-muted);
}

.chart-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-inline: 0;
    border-radius: 0;
    padding: clamp(.9rem, 1.6vw, 1.5rem) var(--layout-pad);
    margin-inline: calc(50% - 50vw);
    margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}

.chart-container h2,
.chart-container h3 {
    margin-bottom: 1rem;
}

.chart-container p {
    color: var(--text-secondary);
}

.chart-header {
    margin-bottom: 2.5rem;
}

.chart-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.chart-ranges button {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    padding: .35rem .75rem;
}

.chart-ranges button:hover,
.chart-ranges button.active {
    border-color: var(--text-muted);
    color: var(--text-primary);
    background: var(--hover-bg);
}

.chart-hover-value-panel,
.chart-hover-date-panel {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: fit-content;
    max-width: min(320px, 100%);
    margin: 0;
    padding: .48rem .72rem;
    border: 1px solid var(--company-rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    min-height: 0;
    color: var(--text-secondary);
    pointer-events: none;
    transition: left .08s ease-out, top .08s ease-out, opacity .12s ease-out;
    white-space: nowrap;
}

.chart-hover-value-panel {
    z-index: 7;
    direction: ltr;
}

.chart-hover-date-panel {
    z-index: 8;
    color: var(--text-primary);
    font-family: 'Roboto Mono', 'Vazirmatn', monospace;
    font-size: .78rem;
}

.chart-hover-value-panel strong {
    color: var(--text-primary);
    font-family: 'Roboto Mono', 'Vazirmatn', monospace;
}

.chart-hover-value-panel [data-chart-hover-change] {
    direction: ltr;
    font-family: 'Roboto Mono', 'Vazirmatn', monospace;
    font-size: .82rem;
}

.chart-narrative {
    margin-top: 1rem;
    color: var(--text-secondary);
    line-height: 1.9;
}

.company-insights {
    background: var(--bg-secondary);
    border: 1px solid var(--company-rule);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.company-insights h1 {
    margin: 0;
    font-family: 'IBM Plex Sans Arabic', 'Vazirmatn', sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.5;
}

.company-narrative {
    margin-top: .75rem;
}

.company-narrative p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.95;
}

.company-narrative p + p {
    margin-top: .65rem;
}

.company-narrative hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--company-rule);
}

.chart-container a,
.company-insights a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.chart-container a:hover,
.company-insights a:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: .08em;
    text-underline-offset: .22em;
}

.chart-container a:focus-visible,
.company-insights a:focus-visible,
.profile-nav .nav-link:focus-visible,
.chart-ranges button:focus-visible {
    outline: 2px solid var(--company-accent);
    outline-offset: 3px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 460px;
    overflow: visible;
}

#company-chart,
#shareholders-chart {
    width: 100%;
    height: 100%;
}

.shareholders-chart-wrap {
    position: relative;
    min-height: 560px;
    height: 58vw;
    max-height: 720px;
    padding: .75rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-tertiary) 58%, transparent);
}

.shareholders-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shareholders-heading h2 {
    margin-bottom: .35rem;
}

.price-performance-section h2 {
    margin-bottom: .85rem;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.performance-card {
    display: grid;
    gap: .25rem;
    padding: .75rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-tertiary) 86%, transparent);
}

.performance-card span {
    color: var(--text-muted);
    font-size: .78rem;
}

.performance-card strong {
    direction: ltr;
    font-family: 'Roboto Mono', 'Vazirmatn', monospace;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .company-hero-identity {
        justify-self: start;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .company-hero {
        grid-template-columns: minmax(4rem, .5fr) 72px minmax(12rem, 2fr) minmax(8.5rem, .9fr);
        row-gap: 1.25rem;
        column-gap: .75rem;
        padding: 1rem;
    }

    .company-hero-logo {
        width: 72px;
        height: 72px;
    }

    .company-hero-name { font-size: clamp(1.2rem, 4vw, 1.7rem); }
    .company-hero-metric > strong { font-size: clamp(1.05rem, 3.5vw, 1.5rem); }
}

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

    .company-hero {
        width: auto;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "logo company"
            "metrics metrics"
            "support support";
        row-gap: 1.25rem;
        column-gap: .75rem;
        margin-inline: calc(0px - var(--layout-pad));
        border-inline: 0;
        border-radius: 0;
        padding: 1.25rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
        box-shadow: none;
        direction: rtl;
    }

    html[lang="en"] .company-hero {
        direction: ltr;
    }

    .company-hero-logo {
        width: 72px;
        height: 72px;
        margin-inline-start: .25rem;
        border-radius: 14px;
    }

    .company-hero-identity {
        align-self: center;
        padding-inline-start: .75rem;
    }

    .company-hero-name {
        font-size: clamp(1.2rem, 6vw, 1.45rem);
        line-height: 1.45;
    }

    .company-hero-metric > strong { font-size: clamp(1.05rem, 5.5vw, 1.35rem); }

    .company-hero-metrics {
        display: flex;
        grid-area: metrics;
        border-top: 1px solid color-mix(in srgb, var(--company-hero-muted) 18%, transparent);
        direction: inherit;
    }

    .company-hero-metrics > .company-hero-metric {
        flex: 1;
        padding-block: .25rem 0;
        text-align: right;
    }

    html[lang="en"] .company-hero-metrics > .company-hero-metric {
        text-align: left;
    }

    .company-hero-rank {
        padding-inline-start: .75rem;
        padding-inline-end: .5rem;
        border-inline-start: 1px solid color-mix(in srgb, var(--company-hero-muted) 14%, transparent);
    }

    .company-hero-cap { padding-inline-end: .75rem; }
    .company-hero-cap > strong { font-size: clamp(1.35rem, 7vw, 1.7rem); }

    .company-hero-support {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-block: 1rem 0;
        direction: ltr;
    }

    .company-hero-support > div {
        padding-inline: .2rem;
        text-align: center;
    }

    .company-hero-support dt { font-size: clamp(.62rem, 2.7vw, .72rem); }
    .company-hero-support dd { font-size: clamp(.75rem, 3.2vw, .9rem); }

    .chart-hover-value-panel,
    .chart-hover-date-panel {
        max-width: min(240px, 100%);
        padding: .38rem .58rem;
        font-size: .78rem;
    }

    .chart-canvas-wrap {
        height: 560px;
    }

    .shareholders-chart-wrap {
        width: auto;
        min-height: 0;
        height: clamp(300px, 100vw, 560px);
        max-height: 560px;
        margin-inline: calc(0px - var(--layout-pad));
        padding: .5rem;
        padding-left: max(.5rem, env(safe-area-inset-left));
        padding-right: max(.5rem, env(safe-area-inset-right));
        border-inline: 0;
        border-radius: 0;
    }

    #shareholders-chart {
        touch-action: none;
    }

    .shareholders-heading {
        display: grid;
        grid-template-columns: 1fr;
    }

    .company-insights {
        border-radius: 14px;
    }

}