:root{
    --bg:#f7f8fa;
    --card:#ffffff;
    --text:#0f172a; /* slate-900 */
    --muted:#64748b; /* slate-500 */
    --line:#3b82f6; /* blue-500 */
    --accent:#16a34a; /* green-600 */
    --warning:#ef4444; /* red-500 */
    --shadow:0 0.625rem 1.875rem rgba(2,6,23,.08);
    --radius: 1rem;
}

* {
    box-sizing: border-box;
}

/* Hero Section */
.hero-new {
    background-image:
            linear-gradient(to bottom, rgba(124, 122, 122, 0.63) 0%, rgba(124, 122, 122, 0.63) 100%),
            url('/static/images/new_hero_bg_1024x640_small.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: #fff;
    padding: 6rem 2rem;
    position: relative;
}

.hero-new-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-new h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-new p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.home-new--left-content
{
    text-align: left;
}

.cta-buttons .btn {
    margin: 0 0.5rem;
}

/* About Section */
.about {
    background: #f9fafb;
    text-align: center;
    padding: 1rem;
}

.about p
{
    font-size: 1.2rem;
    width: 60%;
    margin: 1rem auto;
}

/*
Begin matt add
 */
.home-new--left-content
{
    width: 30rem;
}
.home-new--right-content
{
    align-items: center;
    border-radius: 0.8rem;
    display: flex;
    height: 15rem;
    justify-content: center;
    margin-top: 4rem;
    padding: 1rem 2rem;
    text-align: center;
    max-width: 20rem;
    width: 20rem;
    background: rgba(185,28,28,0.6);
}

img.hero_logo
{
    height: auto;
    max-height: 100%;
    max-width: 100%;
}

.flex
{
    display: flex;
}

.flex--center
{
    justify-content: center;
}
.flex--space-around
{
    justify-content: space-around;
}

nav.navbar-new
{
    background-color: rgba(185,28,28, 1);
    padding: 0.7rem 1rem;
    line-height: 2rem;
    height: 3.625rem;
}

.navbar-new-el
{
    height: 2rem;
}
a.navbar-new-item
{
    color: rgb(248, 249, 250);
    padding: 0 0.25rem;
}

a.navbar-new-logo
{
    margin-right: 1rem;

}
img.navbar-new-logo
{
    max-height: 100%;
    width: auto;
}

.col-62
{
    width:

50%
}
/*
Begin exercise detail
 */
.exercise-container{
    max-width:1200px;
    margin: 0 auto;
    padding:0 20px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.exercise-container--header
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.shell{
    display:grid;grid-template-columns:1.5fr .65fr;gap:22px;
}
@media (max-width: 980px){ .shell{grid-template-columns:1fr;}}
.title{font-size:24px;font-weight:700;letter-spacing:.2px;}
.subtitle{color:var(--muted);font-weight:500;margin-top:4px;font-size:14px;}
.actions{display:flex;gap:10px;}

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card .hd
{
    align-items:center;
    padding: 1.125rem 1.25rem;
    border-bottom:0.0625rem solid #eef2f7;
}
.card .hd h3
{
    margin:0;
    letter-spacing: 0.01875rem;
}
.card .bd
{
    padding: 1.25rem;
}

/* Chart placeholder */
.chart-wrap{position:relative;height:380px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#f1f5f9 0%,#fff 40%);}
.zone{position:absolute;left:0;right:0;}
.zone.target{top:60px;bottom:90px;background:rgba(22,163,74,.10);} /* green */
.zone.above{top:0;height:60px;background:rgba(239,68,68,.08);}  /* red */
.zone.below{height:90px;bottom:0;background:transparent;border-top:1px dashed #e2e8f0;}
.chart-line{position:absolute;inset:0;padding:18px 12px;}
svg{display:block;width:100%;height:100%;}
.legend{display:flex;gap:12px;align-items:center;margin-top:10px;color:var(--muted);font-size:12px;}
.dot{width:10px;height:10px;border-radius:999px;background:var(--line);display:inline-block;}

/* Right column */
.kpis{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.kpi{
    background:#f8fafc;border:1px solid #eef2f7;
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin: 0.5rem 0;
}
.kpi .label{font-size:12px;color:var(--muted);}
.kpi .value{font-size:22px;font-weight:800;margin-top:2px;}

.zones{
    display:grid;
    gap:0.9rem;
    margin-top: 1.5rem;
}
.zrow
{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 0.5rem initial;
}
.zrow .zlabel{min-width:120px;color:var(--muted);font-size:12px;}
.bar{flex:1;height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden;}
.bar > span{display:block;height:100%;}
.bar .in{background:var(--accent);}
.bar .below{background:#0066ff;}
.bar .above{background:var(--warning);}

.exercise--chart_container
{
    height: 25rem;
}
#exercise_s3_links
{
    height: 1rem;
    line-height: 1rem;
}
/*
End exercise detail
 */