/* :root { 
    --bg-main: #051F40; 
    --bg-sec: #ffffff; 
    --bg-cont:#f2f2f3;
    --text-main: #FFFFFF; 
    --text-sec: #051F40; 
    --accent-main: #73a001; 
    --accent-sec: #F4F2EE; 
    --smalltext-main: #c2c2c2; 
    --smalltext-sec: #818181; 
    --accent-warn: #d9822b;} */

    :root { 
    --bg-main: #131313; 
    --bg-sec: #ffffff; 
    --bg-cont:#f2f2f3;
    --text-main: #FFFFFF; 
    --text-sec: #131313; 
    --accent-main: #198b02; 
    --accent-sec: #F4F2EE; 
    --smalltext-main: #c2c2c2; 
    --smalltext-sec: #818181; 
    --accent-warn: #FF009D;}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; }
html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--bg-cont); color: var(--text-sec); text-align: center; }
.primary_container { background: var(--bg-sec); color: var(--text-sec); width:100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 20%; margin: 0 auto; }
.primary_container.rev { background: var(--bg-main); color: var(--text-main); width:100%; padding: 2rem 15%; }
.primary_container.left { align-items: flex-start; text-align: left; padding: 2rem 25%;}
.primary_container.hero { background: var(--bg-main); color: var(--text-main); width:100%; padding:0 25%; gap: 0.25rem; position: sticky; top: 0; z-index: 10;}
.primary_container.accent { background: var(--accent-main); color: var(--accent-sec); width:100%; margin-bottom:2rem; padding: 3rem 0; }
.primary_container > img { width: 100%; border-radius: 1rem; }
.hero-txt {font-size:1.125rem; font-weight:600; text-transform: uppercase; margin-bottom:0.5rem; margin-top:0.5rem;}
.hero-txt.sm { font-size: 0.85rem; text-decoration: underline; cursor: pointer; }

#apply { scroll-margin-top: 6rem; }

.btn { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; text-align: center; background: var(--accent-main); color: var(--text-main); border: 0.1rem solid var(--accent-main); border-radius: 2rem; padding: 0.4rem 1rem; cursor: pointer; height:3rem; font-size:1.25rem; font-weight:bold; }
.btn.top{border-radius:1rem; font-size:2rem;}
.btn.rev { background: var(--text-sec); color: var(--accent-main); border: 0.1rem solid var(--text-sec); }
.btn.hero {border-radius: 1rem; width:100%; background:var(--bg-main); color:var(--accent-sec); border:none; margin-top:2rem;}
.btn.cta {text-transform: uppercase; height:1.5rem; font-size:1rem;}
.btn.txt { display: inline; height: auto; padding: 0 0.1rem; background: none; color: var(--smalltext-sec); border: none; border-radius: 0; font-size: 0.8rem; font-weight: normal; }

.highlight-btn { display: block; width: fit-content; margin: 0 auto; text-align: center; background: color-mix(in srgb, var(--accent-main) 20%, transparent); color: var(--accent-main); border: 0.1rem solid var(--accent-main); border-radius: 99rem; padding: 0.4rem 1rem; cursor: none; height: 3rem; font-size: 1.25rem; font-weight: bold; }
.highlight-btn.dark, .highlight-btn.light {background:var(--bg-main); color: var(--text-main); border:none;height: 2rem; font-size:1rem; margin-top:1rem; text-transform:uppercase; }
.highlight-btn.light{background:none; color:var(--accent-main); padding: 0 0; }

.highlight-btn.stack { height: auto; font-size: 0.85rem; text-transform: uppercase; width:90%; margin-top:2rem; gap:0; padding:0.25rem 1rem; line-height:1rem; color: var(--accent-main);}
.highlight-btn.stack strong { font-size: 2rem; line-height: 2.5rem; }

.highlight-btn.nobg { height: auto; padding: 0.5rem 0.5rem; font-size: 0.85rem; line-height: 1rem; text-transform: uppercase; border-radius:0.5rem; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(75, 133, 0, 0.1)); color:var(--text-sec); border:none; width:100%; margin-bottom:0; margin-top:0;}

h1, .bigtext{font-size:3rem; font-weight:700; line-height:3.5rem;}
h2{font-size:2rem; font-weight:700; line-height:2.5rem;}

.prom { white-space: nowrap; color: var(--accent-main); }
.prom.rev{color: var(--text-sec);}

p{font-size:1rem;}
.small-txt {font-size:1rem; color:var(--smalltext-sec); }
.bold{font-weight:bold; font-size:1.25rem; width:90%;}
.small-txt.rev {color:var(--smalltext-main)}
.small-txt strong { color: var(--accent-main); font-size: 1.5rem; line-height: 1; }
.small-txt strong:not(:first-child) { margin-left: 1.5rem; }

.small-txt.special {margin-bottom:1rem; width:80%; margin:0 auto; text-align:center;}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; margin: 0 auto; background:var(--bg-sec); padding:3rem 10%; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; margin: 0 auto; background:var(--bg-sec);}
.grid3 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.75rem; width: 100%; margin: 0 auto; position:relative; }
.grid3 .card{ text-align:center;}
.score-arrow { position: absolute; left: 25%; top: 33%; transform: translate(-50%,-50%); font-size: 3rem; line-height: 1; }
.card { background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(75, 133, 0, 0.1)); border-radius: 2rem; border-bottom: 0.5rem solid var(--accent-main); padding: 1rem; display: flex; flex-direction: column; align-items: center; min-width: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; text-align: left; line-height:1.5rem; gap:1rem; }
.card.nobg {background: none; border-radius: 0; border-bottom: none; align-items: flex-start;}
.card.nobg p{color: var(--smalltext-sec);}
.card.noborder {border-bottom: none;}

.card:has(> img) { justify-content: space-evenly; }
.card.wide { grid-column: 1 / -1; background:var(--accent-main); color: var(--text-sec); text-align: left;  }
.card.wide.nobg { grid-column: 1 / -1; height: auto; padding: 0.5rem 0.5rem; font-size: 0.85rem; line-height: 1rem; text-transform: uppercase; border-radius:1rem; background: color-mix(in srgb, var(--accent-main) 20%, transparent); color: var(--accent-main); border: 0.1rem solid var(--accent-main); width:100%; margin-bottom:0; margin-top:0; text-align: center; align-items: center;gap:0; }

.card img { width: 15rem; height: 15rem; border-radius: 50%; border: 0.25rem solid var(--accent-main); object-fit: cover; }
.grid2.tight { padding: 0; background: none; margin-top:0; margin-bottom:0; }
.grid2.tight .card { text-align: center; }

.slider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-radius:1rem; padding: 1rem; background: color-mix(in srgb, var(--accent-main) 10%, transparent); }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; }
.slider-head output { font-size: 1.5rem; font-weight: 700; }
.slider-range { display: flex; justify-content: space-between; margin-top: -0.5rem; }
.slider-hint { text-align: left; }

form { text-align: left; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding: 2rem; background: var(--bg-sec); border-radius: 1rem; box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.15); }
form label { font-weight: 500; }
form > label:not(:has(input)) { margin-top: 1rem; }
form label:has(input) { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400; }
form small { font-size: 0.8rem; color: var(--smalltext-sec); }
input[type=radio], input[type=checkbox] { width: auto; margin-top: 0.35rem; accent-color: var(--accent-main); }
input, select, textarea { width: 100%; font-size: 1rem; padding: 0.6rem; border: 0.06rem solid var(--smalltext-sec); border-radius: 0.5rem; }
input[type=range] { accent-color: var(--accent-main); border: none; padding: 0; }


.stat-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--smalltext-sec); }
.stat-label.res { text-transform: none; margin:0 auto; text-align:center; }
.stat-num { font-size: 6rem; font-weight: 800; line-height: 1; color: var(--accent-main); }
.stat-num.sm { font-size: 2.5rem; }
.stat-note { font-size: 1rem; color: var(--smalltext-sec); width:80%; margin:0 auto; text-align:center; }
.stat-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding-top: 0.5rem; }
.stat-row.inline { flex-direction: row; justify-content: left; align-items: baseline; gap: 1rem; padding-top:0; margin-left:5rem;}
.stat-row.inline .stat-num { color: var(--accent-warn); font-size:1.5rem; }
.stat-box { width: 80%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border-radius: 1rem; border: 0.06rem solid var(--accent-warn); background: color-mix(in srgb, var(--accent-warn) 10%, transparent); margin:0 auto; }
.stat-box.diff { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border:none; border-top: 0.06rem solid var(--accent-main); border-bottom: 0.06rem solid var(--accent-main); background: none; margin:1rem auto; border-radius:0; }



table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 1rem; overflow: hidden; border: 0.06rem solid var(--bg-cont); background: var(--bg-sec); }
th, td { padding: 0.75rem 1rem; border-bottom: 0.06rem solid var(--bg-cont); font-size: 0.9rem; text-align: left; vertical-align: top; }
th { font-weight: normal; }
th:first-child { vertical-align: bottom; }
th:not(:first-child), td:not(:first-child) { width: 25%; border-left: 0.06rem solid var(--bg-cont); }
td:not(:first-child) { text-align: center; vertical-align: middle; }
th > * + * { margin-top: 1rem; }
td p + p { margin-top: 0.25rem; }
th .small-txt { font-size: 0.8rem; }
th:last-child { background: var(--accent-main); }
th:last-child * { color: var(--text-main); }
td:last-child:not(:first-child), td[colspan] { background: color-mix(in srgb, var(--accent-main) 10%, transparent); }
td:not(:first-child) strong { color: var(--accent-main); font-size: 1.25rem; }
td:last-child:not(:first-child), td[colspan], tbody tr:last-child td { background: color-mix(in srgb, var(--accent-main) 10%, transparent); }
td.no strong { color: var(--accent-warn); }
td p:has(> .prom) { display: flex; gap: 0.75rem; }
.tab-btn, .tab-btnrev { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; text-align: center; background: var(--bg-sec); color: var(--text-sec); border: 0.1rem solid var(--text-sec); border-radius: 1rem; padding: 0.5rem 0.5rem; cursor: pointer; height:3rem; font-size:1rem; font-weight:bold; }
.tab-btnrev { background: var(--accent-main); color: var(--bg-sec); border: 0.1rem solid var(--bg-main); }

.app-slide { min-width: 100%; display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: center; }
.app-slides { width: 100%; overflow: hidden;}
.app-track { display: flex; transition: transform 0.5s ease; }
/* .app-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 2rem; } */
.app-slide img { width: 100%; height: auto; border-radius: 1rem; }
.feature-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; width: 100%; margin: 1rem auto; text-align: left; }
.feature-strip-item { position: relative; padding-top: 0.85rem; cursor: pointer; }
.feature-strip-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--accent-main), var(--accent-sec)); opacity: 0.25; }
.feature-strip-item.active::before { opacity: 1; }
.feature-strip-item h3 { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0 0 0.5rem; opacity: 0.6; transition: opacity 0.2s; }
.feature-strip-item p { font-size: 1rem; color: var(--text-main); opacity: 0.6; line-height: 1.4; margin: 0; }
.feature-strip-item.active h3, .feature-strip-item.active p { opacity: 1; }

#results hr { width: 3rem; height: 0; border: 0; border-top: 2px solid var(--accent-main); margin: 1rem auto; }
.primary_container.left .highlight-btn { text-align: left; margin-bottom:-0.5rem; color:var(--accent-main);}
.primary_container.left p { width: 100%; margin-top:0; margin-bottom:0; color:var(--smalltext-sec);}
.primary_container.left .bold { margin-bottom: -0.75rem; color:var(--text-sec) }
.primary_container.left a { color: var(--accent-main); }
.primary_container.left hr { width: 100%; border: none; border-top: 0.06rem solid var(--smalltext-main); margin-top:3rem; }


@media (max-width: 1000px) { 
    html { font-size: 12px; } 
    .primary_container, .primary_container.rev, .primary_container.left, .primary_container.hero { padding-left: 1rem !important; padding-right: 1rem !important; }
    .primary_container .primary_container.left { padding-left: 0 !important; padding-right: 0 !important; }
    .primary_container > p:not(.highlight-btn) { width: 100% !important; }
    .primary_container.accent > div { width: 100% !important; }
    .highlight-btn.stack { width: 100% !important; }
    .stat-note { width: 100%; }
    .stat-row.inline { flex-direction: column; align-items: center; margin-left: 0; gap: 0.25rem; }
    h1, .bigtext { font-size: 1.75rem; line-height: 2.25rem; }
    h2 { font-size: 1.5rem; line-height: 2rem; }
    .prom { white-space: normal; }
    .hero-txt { font-size: 0.9rem; }
    .hero-txt.sm { font-size: 0.75rem; }
    .btn { height: auto; min-height: 3rem; }
    .btn.cta { height: auto; min-height: 1.5rem; }
    .highlight-btn { height: auto; }
    .tab-btn, .tab-btnrev { height: auto; font-size: 0.75rem; }
    iframe { width: 100%; height: auto; aspect-ratio: 16/9; }
    .grid2 { grid-template-columns: 1fr; padding: 2rem 1rem; }
    .grid2.tight { grid-template-columns: 1fr 1fr; padding: 0; }
    .grid3 {grid-template-columns: 1fr 1fr 1fr; gap: 0.1rem;}
    .score-arrow { left: 33%; }
    .grid2.tight .prom { font-size: 3rem !important; }
    .stat-num { font-size: 3.5rem; }
    .stat-num.sm { font-size: 1.75rem; }
    form { padding: 1rem; }
    th, td { padding: 0.5rem; font-size: 0.75rem; }
    th h2 { font-size: 1rem; line-height: 1.25rem; }
    th > * + * { margin-top: 0.5rem; }
    .slider-grid { grid-template-columns: 1fr; }
}
/* @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } */

@page { margin: 0.25in; }
@media print {
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.primary_container.hero { break-before: auto; position: static; }
.card, tr, .stat-box { break-inside: avoid; }
.app-slides { overflow: visible; }
.app-track { transform: none !important; flex-direction: column; }
}