:root {
    --k12calc-brand-primary: #1a6db4; /* JAR Blue */
    --k12calc-brand-primary-dark: #0e5283; /* Darker JAR Blue */
    --k12calc-brand-primary-rgb: 26,109,180; /* JAR Blue RGB components */
    --k12calc-brand-secondary: #1ba6a7; /* Teal - for savings */
    --k12calc-brand-accent: #ee2d69; /* JAR Pink - for warnings */
     --k12calc-brand-accent-darker: #c31e54; /* Darker pink-red for badge border */

    /* Palette A Colors - Ensure these are what you intend */
    --k12calc-time-impact-color: #FF8F00;      /* Amber/Orange for Time Lost */
    --k12calc-time-impact-darker: #D87B00;     /* Darker Amber/Orange for badge border */
    --k12calc-learning-impact-color: #6A1B9A;  /* Royal Purple for Learning Lost */
    --k12calc-learning-impact-darker: #501476; /* Darker Royal Purple for badge border */
    --k12calc-brand-yellow: #f1a32f; /* School Bus Yellow - for icons */
    
    --k12calc-brand-cyan-icon-color: #00A9E0; /* JAR Research Icon Cyan */

    --k12calc-brand-yellow-light: #f6bf2d;
    --k12calc-brand-yellow-dark: #725425;
    --k12calc-brand-teal-dark: #33859c;
    --k12calc-text-dark: #1f2121; /* Updated from #202124 */
    --k12calc-text-medium: #3c4043;
    --k12calc-text-light: #5f6368;
    --k12calc-bg-light: #f8f9fa;
    --k12calc-bg-brand-light: #dbe5f1; /* Light Blue for specified backgrounds */
    --k12calc-bg-medium: #e9ecef;
    --k12calc-border-color: #dadce0;
    --k12calc-highlight-bg: #e8f0fe; /* Light blue for highlights (existing) */
    --k12calc-warning-color: #d93025; 
    --k12calc-font-family: 'Montserrat', sans-serif;
    --k12calc-border-radius: 8px;
    --k12calc-box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08);
}

body {
    font-family: var(--k12calc-font-family);
    margin: 0;
    background-color: var(--k12calc-bg-medium);
    color: var(--k12calc-text-dark);
    line-height: 1.6;
    font-size: 16px;
}

#k12calc-app-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: var(--k12calc-border-radius);
    box-shadow: 0 0 25px rgba(0,0,0,0.1);
}

.card {
    background-color: #fff; /* Ensures pure white background */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--k12calc-border-radius);
    border: 1px solid var(--k12calc-border-color); /* Existing outer border */
    /* Add the inner border effect (inset shadow) first, then the existing outer shadow */
    box-shadow: inset 0 0 0 1px rgba(26,109,180,.05), var(--k12calc-box-shadow);
}
.card.prominent {
    border-left: 5px solid var(--k12calc-brand-primary);
    background-color: #fff; /* Changed from var(--k12calc-highlight-bg) to pure white */
    /* The box-shadow (including the new inset one) from the base .card class will still apply */
}

.k12calc-app-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--k12calc-border-color);
}

.k12calc-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
    gap: 15px; 
}
.k12calc-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}
#k12calc-main-title {
    color: var(--k12calc-brand-primary);
    font-size: 1.8em;
    margin: 0;
    font-weight: 700;
    margin: auto;
    text-align:center;
}

/* ---------- Calculator intro blurb ---------- */
.k12calc-intro-blurb{
  /* layout */
  max-width: 820px;          /* keeps the line length comfortable */
  
  margin: auto;    /* auto side-margins = horizontally centered */
  text-align: center;        /* center the text itself */
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.45;
  color: #333;
}

/* emphasised lead-in */
.k12calc-intro-blurb strong{
  color: #000;               /* slightly darker for punch */
}

/* inline acronym treatment */
.k12calc-intro-blurb abbr[title]{
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* link styling aligned with brand primary */
.k12calc-intro-blurb a{
  color: var(--k12calc-brand-primary, #1a6db4);
  font-weight: 600;
  text-decoration: none;
}
.k12calc-intro-blurb a:hover{
  text-decoration: underline;
}

/* blue calculator icon (general fas in intro) */
.k12calc-intro-blurb .fas{
  color: #1a6db4;            /* same blue used elsewhere */
  margin: 0 2px;
}

/* JAR Research (shield) icon in transparency tagline */
.k12calc-research-icon-inline {
  color: var(--k12calc-brand-cyan-icon-color);
  margin: 0 2px;
}

/* New styles for refactored JAR Research section */
.k12calc-powered-by {
  margin: 0 0 0.1em 0; /* Small bottom margin */
  font-weight: 500; 
  color: var(--k12calc-brand-primary); /* Changed to primary brand blue */
}

.k12calc-powered-by strong { /* For "JAR Research" part */
    font-weight: 700; 
}

.k12calc-research-icon-main {
  margin-right: 0.3em;
  color: var(--k12calc-brand-cyan-icon-color);
  font-size: 0.95em; 
}

.k12calc-transparency-statement {
  margin: 0 0 0.05em 0; /* Very small bottom margin */
  color: var(--k12calc-text-medium); 
}

.k12calc-inspect-note { /* New class for the "Click any..." paragraph */
  margin: 0.05em 0 0.2em 0; /* Very small top margin, small bottom margin before link */
  color: var(--k12calc-text-medium);
}

.k12calc-data-origin { /* For "Built on open, real-world data." */
  font-weight: 600;
  color: var(--k12calc-brand-primary); /* Teal */
}

.k12calc-view-sources-link {
  display: inline-block; 
  font-size: 1em;  
  font-weight: 500;
  color: var(--k12calc-brand-secondary);
  text-decoration: none;
}

.k12calc-view-sources-link:hover {
  text-decoration: underline;
}


/* wrapper lets you stack or inline-block on wider screens */
.k12calc-source-wrap {
  margin-top: 0;
  text-align: right;
  font-size: 0.875em; /* Slightly smaller base font for this section */
  line-height: 1.3;  /* Tighter line height for the container elements */
}


.k12calc-how-link i{
  margin:0 .15rem;
}

.k12calc-how-link i.fas.fa-calculator{ /* This rule is not directly targeted by the request for "the" calculator icon. Left as is. */
  color: var(--k12calc-brand-secondary,#1a6db4);
}

.k12calc-data-source-badge i { color: var(--k12calc-brand-cyan-icon-color); } /* JAR Research Icon Cyan - This line becomes effectively unused but is part of the found block */

.k12calc-mode-toggle {
    display: inline-flex; /* Allows centering with text-align on parent or margin:auto */
    position: relative; /* For the ::before pseudo-element (slider) */
    margin: 0; /* Centering and bottom margin removed, handled by flex parent */
    /* border: 1px solid var(--k12calc-brand-primary); */ /* Made more subtle or remove if bg contrast is enough */
    border: 1px solid var(--k12calc-border-color); /* Softer border for minimalism */
    border-radius: var(--k12calc-border-radius);
    overflow: hidden; /* Keeps the slider within the rounded bounds */
    background-color: var(--k12calc-bg-light); /* Background for the "track" */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Subtle inner shadow for depth */
    min-width: 300px;
}

.k12calc-mode-toggle::before { /* The sliding pill */
    content: "";
    position: absolute;
    top: 2px; /* Add small inset for the pill */
    left: var(--slider-left-val, 2px); /* Use CSS variable set by JS, fallback to initial */
    width: var(--slider-width-val, calc(50% - 4px)); /* Use CSS variable, fallback to initial */
    height: calc(100% - 4px); /* Adjust height for inset */
    background-color: var(--k12calc-brand-primary);
    border-radius: calc(var(--k12calc-border-radius) - 2px); /* Slightly smaller radius for inset pill */
    transition: left 0.1s ease-out, width 0.01s ease-out; /* ADJUSTED: Even faster transition (e.g., 0.1s or 0.08s) */
    z-index: 0; /* Behind the button text */
    box-shadow: var(--k12calc-box-shadow); /* Give the pill a slight shadow */
}

.k12calc-button { /* General button styles, will be specific for toggle buttons below */
    padding: 8px 16px; /* Reduced padding */
    font-size: 0.9em;   /* Slightly reduced font size */
    font-weight: 600;
    border-radius: 6px; /* Added for cleaner corners */
    border: 1px solid transparent; /* Base border for consistent sizing, overridden by variants */
    background-color: #fff; /* Default, overridden by variants */
    color: var(--k12calc-brand-primary); /* Default, overridden by variants */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Added border-color transition */
    text-align: center;
    line-height: 1.5; /* Ensure consistent line height */
}

/* Styling for buttons specifically within the mode toggle */
.k12calc-mode-toggle .k12calc-button {
    flex: 1; /* Each button takes up equal space */
    background-color: transparent; /* Make button background transparent */
    color: var(--k12calc-brand-primary); /* Default text color for inactive */
    border: none; /* Remove individual button borders */
    position: relative; /* To ensure text is above the ::before pseudo-element */
    z-index: 1; /* Text on top of the slider */
    transition: color 0.15s ease-out; /* Faster color transition for text */
    padding: 7px 14px; /* Further reduced padding */
    font-size: 0.85em; /* Further reduced font size */
    font-weight: 500; /* Lighter font weight */
    white-space: nowrap;
}

.k12calc-mode-toggle .k12calc-button:hover:not(.active) {
    color: var(--k12calc-brand-primary-dark); /* Darken text slightly on hover for inactive */
}

.k12calc-mode-toggle .k12calc-button.active {
    color: #fff; /* Active text color (on top of the blue slider) */
    font-weight: 700; /* Optionally make active text bolder */
}



.k12calc-button-primary {
    background-color: var(--k12calc-brand-primary);
    color: #fff;
    border-color: var(--k12calc-brand-primary);
}
.k12calc-button-primary:hover {
    background-color: var(--k12calc-brand-primary-dark); 
}
.k12calc-button-secondary {
    background-color: var(--k12calc-bg-medium);
    color: var(--k12calc-text-dark);
    border-color: var(--k12calc-border-color);
}
.k12calc-button-secondary:hover {
    background-color: #d8dde1; 
}
.k12calc-button-fullwidth {
    display: block;
    width: 100%;
    text-align: center;
}
.k12calc-button i { margin-right: 8px; }


/* Updated Agitation Snippets Styling */
.k12calc-problem-agitation-snippets {
    /* This class is on the main div that also has .card */
    background-color: #fbfdff; /* A very light, clean off-white */
    border-left: 5px solid var(--k12calc-brand-primary); /* Prominent brand accent */
    padding: 18px 25px; /* Adjusted padding for a better look */
    /* margin-bottom, border-radius, and box-shadow will be inherited or complemented by .card styles */
    min-height:100px;
    max-height:100px;
    display: flex;
    align-items: center; /* Vertically center the <p> (the flex item) */
}

#k12calc-agitation-snippet { /* This is the <p> tag holding the snippet */
    color: var(--k12calc-text-dark);
    font-size: 0.98em;
    line-height: 1.55;
    font-style: normal; /* Main text will not be italic */
    transition: opacity 0.3s ease-in-out; /* Fade animation duration */
    opacity: 1; /* Initial state, visible */
    margin: 0; /* Remove default <p> margins */
}

#k12calc-agitation-snippet i.fa-quote-left { /* Icon for the snippet */
    color: var(--k12calc-brand-primary);
    margin-right: 8px;
    font-size: 1em; 
    opacity: 0.9;
}

#k12calc-agitation-snippet .k12calc-agitation-source { /* Styling for the source text */
    display: block; /* Puts source on a new line */
    font-size: 0.8em;
    text-align: right;
    color: var(--k12calc-text-medium);
    font-style: italic;
    margin-top: 6px; /* Space above the source line */
}

#k12calc-research-stats-quickview {
    background-color: var(--k12calc-bg-brand-light); /* Updated background color */
    text-align: center;
}
#k12calc-research-stats-quickview h3 {
    color: var(--k12calc-brand-primary); /* Updated text color */
    margin-top: 0;
    font-size: 1.1em;
}
#k12calc-research-stats-quickview h3 i {
    color: var(--k12calc-brand-yellow); /* Updated icon color */
}
.k12calc-stat-item p {
    margin: 5px 0;
    font-size: 0.9em;
}
.k12calc-stat-item strong {
    color: var(--k12calc-brand-primary);
}

.k12calc-calculator-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 20px;
}

/* Mobile first: Inputs section appears BEFORE the results section */
#k12calc-inputs-section {
    order: 1;
}
#k12calc-results-section {
    order: 2;
}

@media (min-width: 768px) {
    .k12calc-calculator-body {
        grid-template-columns: 1fr 1.5fr; /* Two columns for wider screens */
    }
    /* Add this to help grid items shrink correctly and prevent layout shifts */
    .k12calc-calculator-body > section {
        min-width: 0; /* Allows grid items to shrink smaller than their content's intrinsic minimum size */
    }
    #k12calc-main-title { font-size: 2.2em; }

    /* Desktop: Keep inputs first (left column), results second (right column) */
    #k12calc-inputs-section {
        order: 1;
    }
    #k12calc-results-section {
        order: 2;
    }
}

#k12calc-inputs-section h2, #k12calc-results-section h2, #k12calc-main-cta-section h2,
#k12calc-peer-comparison-section h2, #k12calc-sharing-section h2, #k12calc-research-stats-full h2 {
    color: var(--k12calc-brand-primary);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color);
}
#k12calc-inputs-section h2 i, #k12calc-results-section h2 i, #k12calc-main-cta-section h2 i,
#k12calc-peer-comparison-section h2 i, #k12calc-sharing-section h2 i, #k12calc-research-stats-full h2 i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow); /* Updated icon color */
}

#k12calc-results-section{
  padding-top: 0px!important;
  position: relative; /* Make this a positioning context for the splash screen */
}

#k12calc-inputs-section-title { 
    margin-bottom: 20px; /* Increased margin after title before inputs start */
}

/* #k12calc-inputs-section{
    background-color: #1a6db4d6;
} */
.k12calc-input-subsection {
    background-color: var(--k12calc-bg-light);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid var(--k12calc-border-color);
}
.k12calc-input-subsection:last-child { margin-bottom: 0; }
.k12calc-input-subsection h3 {
    font-size: 1.1em;
    color: var(--k12calc-text-dark);
    margin-top: 0; margin-bottom: 15px;
    font-weight: 600;
}
.k12calc-input-subsection h3 i { margin-right: 8px; color: var(--k12calc-brand-primary); }

.k12calc-form-group { margin-bottom: 18px; }
.k12calc-form-group:last-child { margin-bottom: 0; }
.k12calc-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.95em;
    color: var(--k12calc-text-medium);
}
#k12calc-app-container input[type="number"],
#k12calc-app-container input[type="text"],
#k12calc-app-container input[type="email"],
#k12calc-app-container select {
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid var(--k12calc-border-color);
    border-radius: 4px;
    font-size: 1em;
    color: var(--k12calc-text-dark);
    background-color: #fff;
}

#k12calc-num-carts-tco{
    max-width:100px;
}

#k12calc-app-container input:focus, #k12calc-app-container select:focus {
    border-color: var(--k12calc-brand-primary);
    box-shadow: 0 0 0 2px rgba(26, 109, 180, 0.2);
    outline: none;
}

.k12calc-range-group { display: flex; align-items: center; gap: 10px; }
#k12calc-app-container input[type="range"] {
    flex-grow: 1;
    height: 8px;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: transparent;
    border-radius: 4px;
}
#k12calc-app-container input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, var(--k12calc-brand-primary) 0%, var(--k12calc-brand-primary) var(--value-percent, 0%), var(--k12calc-bg-medium) var(--value-percent, 0%), var(--k12calc-bg-medium) 100%);
    border-radius: 4px;
}
#k12calc-app-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    background: var(--k12calc-brand-primary);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    margin-top: -5px; 
}
#k12calc-app-container input[type="range"]::-moz-range-track {
    height: 8px;
    background: var(--k12calc-bg-medium);
    border-radius: 4px;
}
#k12calc-app-container input[type="range"]::-moz-range-progress {
    height: 8px;
    background-color: var(--k12calc-brand-primary);
    border-radius: 4px;
}
#k12calc-app-container input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--k12calc-brand-primary);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.k12calc-range-output {
    font-weight: 600;
    color: var(--k12calc-brand-primary);
    min-width: 55px;
    text-align: right;
    background-color: var(--k12calc-bg-medium);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}
.k12calc-input-sub-label {
    font-size: 0.85em;
    color: var(--k12calc-text-light);
    margin-top: 5px;
}
#k12calc-deployment-summary { text-align: center; }


/* Results Section */
#k12calc-tier1-summary h2 { font-size: 1.4em; color: var(--k12calc-brand-primary); text-align: center; }
.k12calc-tier1-subtitle {
    text-align: center;
    font-size: 0.95em; /* Default for "The True Costs..." */
    color: var(--k12calc-brand-primary); /* Corrected: Default color for "The True Costs..." should be brand blue */
    font-weight: 500; /* Default weight */
    margin-top: -10px; 
    margin-bottom: 15px; 
    transition: color 0.3s ease, font-weight 0.3s ease, font-size 0.3s ease, background-color 0.3s ease, padding 0.3s ease; /* Smooth transition */
}
#k12calc-tier1-title i { /* This is the eye icon */
    color: var(--k12calc-brand-primary); /* Changed from brand-yellow/accent to primary blue */
}
.k12calc-glance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 15px;
}
@media (min-width: 768px) {
    .k12calc-glance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.k12calc-glance-metric-hero {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(217, 48, 37, 0.6) 0%, rgba(255, 143, 0, 0.6) 100%);
    border: none;
    box-shadow: var(--k12calc-box-shadow);
}
.k12calc-glance-metric-wide {
    grid-column: 1 / -1;
}
.k12calc-glance-metric-hero .k12calc-glance-label,
.k12calc-glance-metric-hero .k12calc-glance-value,
.k12calc-glance-metric-hero .k12calc-badge,
.k12calc-glance-metric-hero .k12calc-card-insight-footer {
    color: #fff !important;
}
.k12calc-glance-metric-hero .k12calc-badge {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}
.k12calc-glance-metric-hero .k12calc-card-insight-footer {
    font-style: italic;
}
.k12calc-glance-metric-hero .k12calc-glance-note {
    color: rgba(255, 255, 255, 0.85);
}
.k12calc-glance-metric {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--k12calc-border-color);
    text-align: center;
}

/* General Badge Polish - 1px darker border */
.k12calc-glance-metric .k12calc-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--k12calc-border-radius);
    font-size: 0.75em;
    font-weight: 600;
    /* margin-left: 8px; */ /* Removed to let flexbox handle spacing if badge is only child */
    vertical-align: middle;
    margin-top: 4px;
    color: white; /* Most badges will have white text */
    border-width: 1px;
    border-style: solid;
    line-height: 1.3; /* Helps with vertical centering of text */
}

/* Monetary Cost Badge (Pink-Red) */
.k12calc-glance-metric .k12calc-badge-monetary-cost {
    background-color: var(--k12calc-brand-accent);
    border-color: var(--k12calc-brand-accent-darker);
}

/* Time Impact Badge (Amber/Orange) */
.k12calc-glance-metric .k12calc-badge-time-impact {
    background-color: var(--k12calc-time-impact-color);
    border-color: var(--k12calc-time-impact-darker);
}

/* Learning Impact Badge (Royal Purple) */
.k12calc-glance-metric .k12calc-badge-learning-impact {
    background-color: var(--k12calc-learning-impact-color);
    border-color: var(--k12calc-learning-impact-darker);
}

/* Device Wear Badge (Warning Red/Orange) */
.k12calc-glance-metric .k12calc-badge-device-wear {
    background-color: var(--k12calc-warning-color);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Quantity Lost Badge (Pink-Red, similar to Monetary Cost) */
.k12calc-glance-metric .k12calc-badge-quantity-lost {
    background-color: var(--k12calc-brand-accent);
    border-color: var(--k12calc-brand-accent-darker);
}

/* Savings Badge on Hero Stat (already styled, but ensure border fits if desired) */
#k12calc-hero-stat .k12calc-badge {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5); /* Or a slightly darker shade of the background */
    color: white !important;
}

/* In design-css.css */
.k12calc-glance-note,
.k12calc-card-insight-footer { /* Apply same base style to both */
    display: block;
    font-size: 0.8em; /* Or 0.85em if too small */
    color: var(--k12calc-text-dark); /* Bumped up from text-light */
    margin-top: 5px;
    line-height: 1.4; /* Added for better readability */
}

.k12calc-card-insight-footer {
    font-style: italic; /* Make insight footers italic to distinguish them */
    margin-top: 8px; /* Slightly more space for the insight footer */
}

/* Cycling Insight Container for 5-Year Savings */
#k12calc-cycling-savings-insight-container {
    min-height: 2.8em; /* Accommodate two lines of text comfortably */
    position: relative;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--k12calc-text-dark);
    text-align: center; /* Center the cycling text */
}

.k12calc-cycling-insight-item {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
    font-style: italic; /* Match other insight footers */
    line-height: 1.4;
}

.k12calc-cycling-insight-item.active {
    opacity: 1;
}

/* Report overrides: render cycling insights as static to prevent overlap in PDF */
.k12calc-report-wrapper #k12calc-cycling-savings-insight-container {
    min-height: auto;
    position: static;
}
.k12calc-report-wrapper #k12calc-cycling-savings-insight-container .k12calc-cycling-insight-item {
    position: static;
    opacity: 1;
    transition: none;
}

.k12calc-glance-metric .k12calc-badge-cost {
    background-color: var(--k12calc-brand-accent); 
    color: white;
}

.k12calc-glance-metric .k12calc-badge-cost-alt { 
    background-color: var(--k12calc-bg-medium); 
    color: var(--k12calc-text-medium); 
}

.k12calc-glance-metric .k12calc-badge-savings {
    background-color: var(--k12calc-brand-secondary); 
    color: white;
}

.k12calc-glance-metric .k12calc-badge-warning { /* NEW BADGE STYLE */
    background-color: var(--k12calc-brand-accent); /* Pink/Red background */
    color: white;
}
.k12calc-glance-label {
    display: block;
    font-size: 0.95em; /* Adjusted from 1em for slightly better balance with values */
    font-weight: 500; 
    color: var(--k12calc-text-medium); /* Or var(--k12calc-text-dark) if preferred */
    margin-bottom: 5px;
}
/* Color labels for Monetary Cost metrics (Pink-Red) */
.k12calc-glance-metric:has(#k12calc-glance-total-annual-cost) .k12calc-glance-label,
.k12calc-glance-metric:has(#k12calc-glance-cost-per-device) .k12calc-glance-label,
.k12calc-glance-metric:has(#k12calc-glance-adapters-lost-quantity) .k12calc-glance-label {
    color: var(--k12calc-brand-accent); /* Pink-Red */
}

.k12calc-glance-metric:has(#k12calc-glance-device-lifespan-lost) .k12calc-glance-label {
    color: var(--k12calc-warning-color);
}

/* Color label for IT Time Impact metric (Amber/Orange) */
.k12calc-glance-metric:has(#k12calc-glance-it-hours-lost) .k12calc-glance-label {
    color: var(--k12calc-time-impact-color); /* Amber/Orange */
}

/* Color label for Student Learning Impact metric (Royal Purple) */
.k12calc-glance-metric:has(#k12calc-glance-student-hours-lost) .k12calc-glance-label {
    color: var(--k12calc-learning-impact-color); /* Royal Purple */
}
.k12calc-glance-value {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--k12calc-brand-primary); /* Default for other glance values if any */
}

/* Specific cost items in "At a Glance" */
/* Specific cost items in "At a Glance" */
/* Monetary costs and lost quantities remain pink-red */
#k12calc-glance-total-annual-cost,
#k12calc-glance-cost-per-device,
#k12calc-glance-adapters-lost-quantity {
    color: var(--k12calc-brand-accent);
}

#k12calc-glance-device-lifespan-lost {
    color: var(--k12calc-warning-color);
}

/* Time Lost uses new Amber/Orange */
#k12calc-glance-it-hours-lost {
    color: var(--k12calc-time-impact-color);
}

/* Learning Lost uses new Royal Purple */
#k12calc-glance-student-hours-lost {
    color: var(--k12calc-learning-impact-color);
}

/* Savings stat (already teal, text color white) - add text-shadow for legibility */
#k12calc-hero-stat .k12calc-glance-value {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Subtle shadow for better contrast */
}
#k12calc-hero-stat {
    grid-column: 1 / -1;
}
.k12calc-glance-value.savings { color: var(--k12calc-brand-secondary); }


#k12calc-tier2-key-outputs h2 i { color: var(--k12calc-brand-primary); } 
.k12calc-key-metric {
    background-color: var(--k12calc-bg-light);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 4px solid var(--k12calc-brand-primary);
}
.k12calc-key-metric:last-child { margin-bottom: 0; }
.k12calc-key-metric h3 {
    font-size: 1.15em;
    color: var(--k12calc-text-dark); /* Default color */
    margin-top: 0; margin-bottom: 8px;
}

/* Specific color for "Your Total Annual Hidden Costs" title */
#k12calc-metric-annual-cost h3 {
    color: var(--k12calc-brand-accent); /* Pink/Red for this cost title */
}

/* Specific color for "Your 5-Year Savings Opportunity" title */
#k12calc-metric-five-year-savings h3 {
    color: var(--k12calc-brand-secondary); /* Teal for this savings title */
}
.k12calc-value {
    font-size: 2em;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: var(--k12calc-brand-primary); /* Default for other .k12calc-value elements */
    animation: k12calc-fadeInValue 0.4s ease-out;
}
/* Specific "Your Total Annual Hidden Costs" value */
#k12calc-val-annual-cost {
    color: var(--k12calc-brand-accent); /* Pink/Red for this cost */
}
.k12calc-value.savings { color: var(--k12calc-brand-secondary); } 
@keyframes k12calc-fadeInValue {
    from { opacity: 0.3; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.k12calc-impact-viz {
    font-size: 0.9em;
    color: var(--k12calc-text-medium);
    font-style: italic;
    margin-bottom: 10px;
    min-height: 1.2em; 
}
.k12calc-show-calc-btn {
    font-size: 0.8em;
    color: var(--k12calc-brand-primary);
    background: none; border: none;
    padding: 3px 0; cursor: pointer;
    text-decoration: underline;
}
.k12calc-show-calc-btn i {
    margin-right: 4px;
    color: var(--k12calc-brand-cyan-icon-color);
}
.k12calc-calculation-details {
    font-size: 0.85em;
    color: var(--k12calc-text-light);
    margin-top: 8px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid var(--k12calc-border-color);
    border-radius: 4px;
    line-height: 1.5;
}
.k12calc-calculation-details strong { color: var(--k12calc-text-medium); }
.k12calc-calculation-details .calc-preamble {
    font-style: italic;
    margin-bottom: 8px;
    color: var(--k12calc-text-medium);
}
.k12calc-calculation-details .calc-formula { font-family: monospace; margin-top: 5px; margin-bottom: 8px; }
.k12calc-calculation-details .calc-key-data { margin-top: 8px; }
.k12calc-calculation-details .calc-key-data ul { padding-left: 20px; margin-top: 5px; }
.k12calc-calculation-details .calc-key-data li { margin-bottom: 3px; }
.k12calc-calculation-details .calc-source-link { font-size: 0.9em; margin-top: 10px; }
.calc-compact { display: flex; flex-direction: column; gap: 12px; }
.calc-compact-section strong { display: block; margin-bottom: 4px; font-size: 0.95em; }
.calc-compact-list { list-style: none; margin: 0; padding: 0; font-size: 0.92em; line-height: 1.5; }
.calc-compact-list li { display: flex; gap: 6px; align-items: baseline; }
.calc-var { min-width: 92px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; color: var(--k12calc-brand-primary); }
.calc-equation { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.94em; padding: 8px 12px; background: #f4f6fb; border-radius: 6px; }
.calc-result { font-family: 'Montserrat', Arial, sans-serif; font-size: 1em; }
.calc-result span { font-weight: 700; color: var(--k12calc-brand-primary); }
.calc-note { font-size: 0.9em; color: var(--k12calc-text-light); margin: 0; }
.calc-grid { border: 1px solid var(--k12calc-border-color); border-radius: 6px; overflow: hidden; font-size: 0.92em; margin-top: 12px; }
.calc-grid-row { display: grid; grid-template-columns: 1.4fr 1fr; padding: 10px 12px; gap: 12px; align-items: center; }
.calc-grid-header { background: #f4f6fb; font-weight: 600; color: var(--k12calc-text-medium); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8em; }
.calc-grid-divider { height: 1px; background: var(--k12calc-border-color); }
.calc-scenario-label { font-family: "Montserrat", Arial, sans-serif; font-weight: 600; color: var(--k12calc-text-medium); }
.calc-grid-highlight { font-weight: 700; color: var(--k12calc-brand-primary); font-size: 0.95em; }


.k12calc-contextual-cta {
    display: block;
    font-size: 0.85em;
    margin-top: 10px;
    color: var(--k12calc-text-light);
}
.k12calc-contextual-cta a {
    color: var(--k12calc-brand-primary);
    font-weight: 600;
    cursor: pointer;
}
.k12calc-contextual-cta a:hover {
    text-decoration: underline;
}



#k12calc-tier3-content {
    padding: 20px;
    background-color: #fff;
}



.k12calc-time-lost-primary {
    color: var(--k12calc-brand-accent); /* Red for primary values (days/hours) */
    font-weight: 600; /* Or 700 for bolder, or keep it normal if preferred */
}


.k12calc-time-lost-breakdown-section h3 {
    font-size: 1.1em; color: var(--k12calc-text-dark);
    margin-bottom: 15px;
}
.k12calc-time-lost-breakdown-section {
    margin-top: 25px; /* Space between cost and time lost sections */
    margin-bottom: 20px;
}
.k12calc-data-label { color: var(--k12calc-text-medium); font-size: 0.95em; }
.k12calc-breakdown-icon { margin-right: 8px; color: var(--k12calc-brand-yellow); width: 18px; text-align: center; } /* Updated icon color */
.k12calc-data-value { font-weight: 600; color: var(--k12calc-text-dark); font-size: 0.95em;} /* Default */



.k12calc-charts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
@media (min-width: 600px) {
    .k12calc-charts-container {
        grid-template-columns: 1fr 1fr;
    }
}

.k12calc-chart-wrapper {
    padding: 15px;
    background-color: var(--k12calc-bg-light);
    border-radius: 4px;
    border: 1px solid var(--k12calc-border-color);
    display: flex;
    flex-direction: column;
    /* aspect-ratio: 1 / 1; */
    min-height: 220px; /* Adjust if needed with aspect-ratio */
    max-height: 400px; /* Prevent getting too large */
}
.k12calc-chart-title {
    text-align: center;
    color: var(--k12calc-text-dark);
    font-size: 1em;
    font-weight: 600;
    margin-top: 0; 
    margin-bottom: 10px; /* Adjusted spacing */
    flex-shrink: 0; 
}

.k12calc-chart-wrapper canvas {
    flex-grow: 1;      
    position: relative; 
    min-height: 0;      /* Allows canvas to shrink if needed in flex context */
    max-width: 100%;    /* Prevent overflow */
    /* Let Chart.js determine the width and height attributes for crispness.
       Its responsive mode should handle filling the wrapper.
       Avoid forcing CSS width/height to 100% directly on the canvas here,
       as it can interfere with Chart.js's internal sizing based on devicePixelRatio. */
}


/* Initial Load Splash Screen */
#k12calc-splash-screen {
    position: absolute; /* Position relative to k12calc-results-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.98); /* Light background, slightly transparent */
    z-index: 100; /* High enough to cover content within results-section */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    padding-top: 150px; /* Push content down from the top edge of the results column */
    align-items: center;
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    border-radius: var(--k12calc-border-radius); /* Match parent's potential rounding */
}

#k12calc-splash-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.k12calc-splash-title {
    font-size: 1.8em;
    color: var(--k12calc-brand-primary);
    margin-bottom: 25px;
    font-weight: 600;
}

.k12calc-progress-bar-container {
    display: flex;
    justify-content: space-between; /* Spreads out the steps */
    width: 80%;
    max-width: 500px; /* Max width for the progress bar */
    margin: 0 auto;
}

.k12calc-progress-step {
    flex: 1; /* Each step takes equal width */
    text-align: center;
    position: relative;
    padding: 10px 5px; /* Padding around label and bar */
    margin: 0 5px; /* Spacing between steps */
}

.k12calc-progress-step-bar {
    height: 10px;
    background-color: var(--k12calc-bg-medium); /* Track color */
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px; /* Space between bar and label */
    position: relative;
}

.k12calc-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Starts empty */
    background-color: var(--k12calc-brand-primary); /* Fill color */
    border-radius: 5px;
    transition: width 0.38s ease-in-out; /* Animation for filling */
}

/* Arrow for steps */
.k12calc-progress-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -15px; /* Adjust based on margin and desired position */
    top: 20px; /* Vertically align with the bar center */
    transform: translateY(-50%);
    color: var(--k12calc-text-medium);
    font-size: 1.2em;
}


.k12calc-progress-label {
    font-size: 0.9em;
    color: var(--k12calc-text-medium);
    font-weight: 500;
}

/* Active state for fill */
#k12calc-splash-screen.step-1-active #splash-step-1 .k12calc-progress-fill,
#k12calc-splash-screen.step-2-active #splash-step-1 .k12calc-progress-fill, /* Keep previous filled */
#k12calc-splash-screen.step-2-active #splash-step-2 .k12calc-progress-fill,
#k12calc-splash-screen.step-3-active #splash-step-1 .k12calc-progress-fill, /* Keep previous filled */
#k12calc-splash-screen.step-3-active #splash-step-2 .k12calc-progress-fill, /* Keep previous filled */
#k12calc-splash-screen.step-3-active #splash-step-3 .k12calc-progress-fill {
    width: 100%;
}
#k12calc-splash-screen.step-1-active #splash-step-1 .k12calc-progress-label,
#k12calc-splash-screen.step-2-active #splash-step-2 .k12calc-progress-label,
#k12calc-splash-screen.step-3-active #splash-step-3 .k12calc-progress-label {
    color: var(--k12calc-brand-primary);
    font-weight: 700;
}

/* Styles for .k12calc-tier1-subtitle when it's a sample data notice */
.k12calc-tier1-subtitle.sample-data-notice {
    color: var(--k12calc-brand-accent); /* Brighter, more attention-grabbing color */
    font-weight: 600; /* Bolder */
    font-size: 1em; /* Slightly larger to stand out */
    background-color: var(--k12calc-bg-brand-light); /* Optional: light background like the ribbon */
    padding: 8px 10px; /* Add some padding if background is used */
    border-radius: 4px; /* Rounded corners if background is used */
    margin-top: -5px; /* Adjust if padding is added */
    margin-bottom: 20px; /* Ensure enough space before glance grid */
}


.k12calc-chart-area {
    background-color: var(--k12calc-bg-light);
    padding: 20px;
    border-radius: 4px;
    border: 1px solid var(--k12calc-border-color);
}
.k12calc-chart-area h3 {
    margin-top: 0; margin-bottom: 20px;
    font-size: 1.2em; color: var(--k12calc-text-dark);
}
/* Styles for the icon in the "Your 5-Year Cost Comparison" header */
.k12calc-chart-area h3 .k12calc-header-icon { /* Target the span for margin */
    margin-right: 8px; 
}
.k12calc-chart-area h3 .k12calc-header-icon i { /* Target the <i> within the span for color */
    color: var(--k12calc-brand-yellow);
}
/* Adjust the main row container */
.k12calc-bar-chart-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px; /* Gap between label, value, and bar container */
}

.k12calc-bar-chart-label {
    flex-basis: 220px; /* Keep as is or adjust */
    flex-shrink: 0;
    font-size: 0.9em;
    color: var(--k12calc-text-light);
    text-align: right;
}
#k12calc-time-lost-card-container{
    background: var(--k12calc-bg-light);
}
/* Ensure the 5-year intro header row in Time Lost table has good separation */
#k12calc-time-lost-card-container .k12calc-cost-totals-row[style*="margin-top:15px"] { /* Targeting the specific header */
    margin-top: 25px !important; /* Increase top margin for more space */
    border-top: 2px solid var(--k12calc-border-color) !important; /* Ensure prominent top border */
    /* Optionally, a slightly different background for this header row itself */
    /* background-color: #f8f9fa;  /* Example: a very light grey */
}

/* Remove bottom border from the last annual data row before the 5-year header */
#k12calc-time-lost-card-container .k12calc-cost-comparison-row:has(#tl-student-annual-current-cell) {
    border-bottom: none;
}

/* Ensure the last 5-year data row doesn't have a double border if card has padding */
#k12calc-time-lost-card-container .k12calc-totals-sub-row:last-child {
    border-bottom: none; /* If the card itself provides the final visual boundary */
}

/* Styling for the 5-Year Cost Comparison value prefixes */

.k12calc-bar-chart-value-prefix {
    font-weight: 700;
    font-size: 0.95em;
    min-width: 70px;
    text-align: left;
    flex-shrink: 0;
}
#k12calc-current-bar-value-prefix {
    color: var(--k12calc-brand-accent);
}
#k12calc-efficient-bar-value-prefix {
    color: var(--k12calc-brand-secondary);
}
/* New container for the bar itself, this will take remaining space */
.k12calc-bar-chart-bar-container {
    flex-grow: 1;
    height: 28px; /* Height is on the container or the bar itself */
    background-color: var(--k12calc-bg-medium); /* Faint background for the track */
    border-radius: 4px;
    position: relative; /* If you ever want to overlay text/icons */
    min-width: 50px; /* Prevent it from becoming too small */
    max-width: 300px;
}

.k12calc-bar-chart-bar {
    height: 100%; /* Bar fills the height of its new container */
    display: flex; /* Not strictly needed now without text inside */
    align-items: center;
    color: white; /* Text color (though text is removed) */
    /* REMOVE: padding: 0 10px; text-related styles like font-size, font-weight, white-space, etc. */
    box-sizing: border-box;
    border-radius: 4px;
    width: 0%; /* Initial width, JS will set it */
    transition: width 0.5s ease-in-out;
    /* background-color is set by specific IDs/classes */
}

#k12calc-current-bar {
    background-color: var(--k12calc-brand-accent); /* Pink/Red background for current costs */
    color: white; /* White text on pink/red background for good contrast */
}

.k12calc-efficient-bar { /* Retains its previous styling for savings */
    background-color: var(--k12calc-brand-secondary); /* Teal background */
    color: white; 
}

/* Peer Comparison */
#k12calc-peer-comparison-section { background-color: var(--k12calc-highlight-bg); }
#k12calc-peer-comparison-section h2 i { color: var(--k12calc-brand-primary); }
#k12calc-peer-comparison-text strong { color: var(--k12calc-brand-primary); }
#k12calc-unlock-peer-data-btn { margin-top: 15px; }
.k12calc-peer-segment { display: flex; flex-direction: column; gap: 4px; }
.k12calc-peer-segment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--k12calc-brand-primary-rgb), 0.12);
    color: var(--k12calc-brand-primary-dark);
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 14px;
    width: fit-content;
}
.k12calc-peer-segment-description,
.k12calc-peer-segment-examples,
.k12calc-peer-intro {
    margin: 0;
    color: var(--k12calc-text-medium);
}
.k12calc-peer-segment-examples { font-size: 0.9em; color: var(--k12calc-text-light); }
.k12calc-peer-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.k12calc-peer-metric {
    background-color: #fff;
    border: 1px solid rgba(var(--k12calc-brand-primary-rgb), 0.18);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.k12calc-peer-metric h3 {
    margin-top: 0;
    font-size: 1.05em;
    color: var(--k12calc-text-dark);
}
.k12calc-peer-metric-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 4px;
}
.k12calc-peer-metric-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--k12calc-text-dark);
}
.k12calc-peer-metric-status { font-size: 0.95em; font-weight: 600; }
.k12calc-peer-status-good { color: var(--k12calc-brand-secondary); }
.k12calc-peer-status-neutral { color: var(--k12calc-text-medium); }
.k12calc-peer-status-risk { color: var(--k12calc-brand-accent); }
.k12calc-peer-metric-range { margin: 0; font-size: 0.92em; color: var(--k12calc-text-light); }
.k12calc-peer-footnote {
    margin: 4px 0 0;
    font-size: 0.85em;
    color: var(--k12calc-text-light);
}

@media (max-width: 640px) {
    .k12calc-peer-metric {
        padding: 14px;
    }
    .k12calc-peer-metric-value {
        font-size: 1.25em;
    }
}

/* Main CTA Section */
/* Post-Calculator Action Block */
.k12calc-post-calculator-block {
    background-color: var(--k12calc-bg-medium);
    padding: 30px 40px;
    margin: 40px -20px -20px -20px; /* Top, H, Bottom, H. Breaks out of parent padding */
    border-top: 1px solid var(--k12calc-border-color);
    border-radius: 0 0 var(--k12calc-border-radius) var(--k12calc-border-radius); /* Match bottom corners of main container */
}

.k12calc-post-calculator-block section {
    margin-bottom: 30px;
}
.k12calc-post-calculator-block section:last-child {
    margin-bottom: 0;
}

#k12calc-main-cta-section h2 i,
#k12calc-sharing-section h2 i {
    color: var(--k12calc-brand-primary);
}

#k12calc-sharing-section {
    text-align: center;
}

#k12calc-main-cta-section {
    margin-top: 40px; /* Create significant space above this new block */
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 0;
    border-top: 1px solid var(--k12calc-border-color);
}

#k12calc-main-cta-section h2 i,
#k12calc-sharing-section h2 i {
    color: var(--k12calc-brand-primary);
}

#k12calc-main-cta-section p {
    font-size: 0.95em;
    max-width: 500px;
    margin: auto;
    margin-bottom: 25px;
}

#k12calc-main-cta-btn {
    margin-top: 10px;
    max-width: 300px;
    margin: auto;
}

#k12calc-open-reference-data-modal-footer {
    /* text-decoration:none; */
    color: var(--k12calc-brand-primary);
}
/* Sharing Section */

#k12calc-sharing-section h2 i { color: var(--k12calc-brand-primary); }
#k12calc-sharing-section .k12calc-button { margin: 5px; }

/* Research Stats Full */
#k12calc-research-stats-full h2 i { color: var(--k12calc-brand-cyan-icon-color); } /* Updated icon color to brand cyan */
.k12calc-research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.k12calc-research-item {
    background-color: var(--k12calc-bg-light);
    padding: 12px;
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid var(--k12calc-border-color);
}
.k12calc-research-item strong { color: var(--k12calc-brand-primary); }

/* Footer */
.k12calc-app-footer {
    text-align: center;
    font-size: 0.85em;
    color: var(--k12calc-text-light);
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--k12calc-border-color);
}


/* Modal Styles (Common) */
.k12calc-modal {
    display: none; 
    position: fixed; 
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.5);
    animation: k12calc-fadeInModalBg 0.3s ease-out;
}
.k12calc-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 25px;
    border: 1px solid var(--k12calc-border-color);
    width: 90%;
    max-width: 700px;
    border-radius: var(--k12calc-border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    animation: k12calc-slideInModal 0.3s ease-out;
}
@keyframes k12calc-fadeInModalBg { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.5); } }
@keyframes k12calc-slideInModal { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.k12calc-modal-close-btn {
    color: var(--k12calc-text-light);
    position: absolute;
    top: 10px; right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.k12calc-modal-close-btn:hover, .k12calc-modal-close-btn:focus {
    color: var(--k12calc-text-dark);
}
.k12calc-modal h2 {
    color: var(--k12calc-brand-primary);
    margin-top: 0; margin-bottom: 15px;
    font-size: 1.4em;
}
.k12calc-modal h2 i { margin-right: 10px; color: var(--k12calc-brand-cyan-icon-color); } /* Updated icon color to brand cyan */
.k12calc-modal p { font-size: 0.95em; margin-bottom: 15px; }

/* Reference Data Modal Specifics */
#k12calc-reference-data-tables-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9em;
}
#k12calc-reference-data-tables-container th, #k12calc-reference-data-tables-container td {
    border: 1px solid var(--k12calc-border-color);
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
#k12calc-reference-data-tables-container th {
    background-color: var(--k12calc-bg-light);
    font-weight: 600;
    color: var(--k12calc-brand-primary);
}
#k12calc-reference-data-tables-container td:nth-child(2) { 
    font-weight: 500;
    white-space: nowrap;
}
.k12calc-modal-footnote { font-size: 0.85em; font-style: italic; color: var(--k12calc-text-light); }
.k12calc-modal-cta-container { text-align: center; margin-top: 20px; }

/* Lead Form Modal Specifics */
#k12calc-lead-form-modal .k12calc-modal-content { max-width: 600px; }
#k12calc-lead-form ul{ list-style: none; padding-left: 0; margin-bottom: 20px; }
#k12calc-lead-form ul li { margin-bottom: 8px; font-size: 0.95em; }
#k12calc-lead-form ul li i { color: var(--k12calc-brand-yellow); margin-right: 8px; } /* Updated icon color */
#k12calc-lead-form .k12calc-checkbox-group { display: flex; align-items: center; gap: 8px; margin-top: 15px;}
#k12calc-lead-form .k12calc-checkbox-group input[type="checkbox"] { width: auto; flex-shrink: 0; }
#k12calc-lead-form .k12calc-checkbox-group label { margin-bottom: 0; font-size: 0.9em; font-weight: normal; }
#k12calc-get-report-btn { margin-top: 20px; }

#k12calc-post-lead-options h3 { color: var(--k12calc-brand-secondary); font-size: 1.2em; text-align: center;} /* Updated color to Teal */
#k12calc-post-lead-options h3 i { margin-right: 8px; }
#k12calc-post-lead-options p { margin-bottom: 15px; text-align: center; }
.k12calc-post-lead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.k12calc-post-lead-actions .k12calc-button { margin: 0; }

.k12calc-cart-config-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 18px 0 24px;
}

.k12calc-cart-config-field {
    flex: 1 1 220px;
}

.k12calc-cart-config-field input[type="number"] {
    width: 100%;
}

.k12calc-input-with-prefix {
    display: flex;
    align-items: center;
    gap: 6px;
}

.k12calc-input-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--k12calc-bg-light);
    border: 1px solid var(--k12calc-border-color);
    border-radius: var(--k12calc-border-radius);
    font-weight: 600;
    color: var(--k12calc-text-medium);
    height: 40px;
}

.k12calc-input-with-prefix input[type="number"] {
    flex: 1 1 auto;
    height: 40px;
    border-radius: var(--k12calc-border-radius);
}

.k12calc-cart-tco-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
}

.k12calc-cart-tco-column {
    flex: 1 1 220px;
}

.k12calc-cart-tco-figure {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(26,109,180,0.08);
}

.k12calc-cart-tco-figure h4 {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--k12calc-text-medium);
}

.k12calc-cart-tco-column:nth-child(1) .k12calc-cart-tco-value {
    color: var(--k12calc-brand-accent);
}

.k12calc-cart-tco-column:nth-child(2) .k12calc-cart-tco-value {
    color: var(--k12calc-brand-primary);
}

.k12calc-cart-tco-column:nth-child(3) .k12calc-cart-tco-value {
    color: var(--k12calc-brand-secondary);
}

.k12calc-cart-tco-value {
    margin: 8px 0 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.k12calc-cart-tco-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    font-size: 0.95em;
}

.k12calc-cart-tco-table thead th {
    background: rgba(var(--k12calc-brand-primary-rgb), 0.08);
    color: var(--k12calc-brand-primary);
    font-weight: 600;
    text-align: right;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.k12calc-cart-tco-table thead th:first-child {
    text-align: left;
}

.k12calc-cart-tco-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: right;
}

.k12calc-cart-tco-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--k12calc-text-medium);
}

.k12calc-cart-tco-table tbody tr:nth-child(odd) {
    background: rgba(0,0,0,0.015);
}

.k12calc-cart-tco-table tbody tr:last-child td {
    border-bottom: none;
}

.k12calc-cart-tco-table tbody td:nth-child(2) {
    color: var(--k12calc-brand-accent);
}

.k12calc-cart-tco-table tbody td:nth-child(3) {
    color: var(--k12calc-brand-primary);
}

.k12calc-cart-tco-table tbody td:nth-child(4) {
    color: var(--k12calc-brand-secondary);
    font-weight: 700;
}

.k12calc-value-negative {
    color: #d64545 !important;
}

#k12calc-unlocked-content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 18px;
}
.k12calc-tab-button {
    padding: 10px 18px;
    background: rgba(var(--k12calc-brand-primary-rgb), 0.08);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--k12calc-text-medium);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.k12calc-tab-button:hover {
    color: var(--k12calc-brand-primary);
    border-color: rgba(var(--k12calc-brand-primary-rgb), 0.35);
    box-shadow: 0 6px 16px rgba(var(--k12calc-brand-primary-rgb), 0.12);
}
.k12calc-tab-button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--k12calc-brand-primary), var(--k12calc-brand-primary-dark));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(var(--k12calc-brand-primary-rgb), 0.22);
}
.k12calc-tab-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--k12calc-brand-primary-rgb), 0.35);
}
.k12calc-tab-button i { font-size: 0.95em; }
.k12calc-tab-content {
    display: none;
}
.k12calc-tab-content.active {
    display: block;
}
.k12calc-tab-content.card { margin-top: 0; padding: 15px; background-color: var(--k12calc-bg-light); }
.k12calc-tab-content h4 { margin-top: 0; font-size: 1.1em; color: var(--k12calc-brand-primary); }
.k12calc-tab-content p { font-size: 0.9em; }
#k12calc-client-revenue-potential-details p { margin-bottom: 8px; }
#k12calc-client-revenue-potential-details strong.value {
    color: var(--k12calc-brand-primary);
}
#k12calc-client-revenue-potential-details strong.savings {
    color: var(--k12calc-brand-secondary); /* Updated to Teal */
}
#k12calc-client-revenue-potential-details small { font-size: 0.8em; color: var(--k12calc-text-light); display: block; margin-top:10px;}

.k12calc-skeptic-link {
    display: block; /* Or inline-block if preferred */
    text-align: right;
    font-size: 0.8em;
    margin-top: 15px;
    color: var(--k12calc-text-light);
    text-decoration: none;
}
.k12calc-skeptic-link:hover {
    text-decoration: underline;
    color: var(--k12calc-brand-primary);
}
.k12calc-skeptic-link i {
    font-size: 0.9em;
    margin-left: 3px;
}


#k12calc-hero-stat {
    background: linear-gradient(135deg, var(--k12calc-brand-secondary) 0%, var(--k12calc-brand-teal-dark) 100%);
    border: none;
    box-shadow: var(--k12calc-box-shadow);
}
#k12calc-hero-stat .k12calc-glance-label,
#k12calc-hero-stat .k12calc-glance-value,
#k12calc-hero-stat .k12calc-badge {
    color: white !important; /* Ensure text is white on the gradient */
}
#k12calc-hero-stat .k12calc-badge { /* Adjust badge on gradient */
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Ensure #k12calc-inputs-section is a positioning context for the absolute tooltip */
#k12calc-inputs-section {
    position: relative; 
}

/* Updated pointer styles */
#k12calc-setup-pointer {
    position: absolute;
    top: 65px; /* Slightly tucked under the section title */
    left: 16px;
    background-color: rgba(var(--k12calc-brand-primary-rgb), 0.12);
    color: var(--k12calc-brand-primary-dark);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(var(--k12calc-brand-primary-rgb), 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    z-index: 100;
    text-align: left;
    width: auto;
    max-width: 260px;
    overflow: visible; /* Ensure subtle outline never clips */
    backdrop-filter: blur(2px);

    transition: opacity 0.25s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out;
    opacity: 1;
    transform: translateY(0);
}

#k12calc-setup-pointer:not(.hidden) {
    animation: none;
}

#k12calc-setup-pointer.hidden {
    opacity: 0;
    transform: translateY(-10px); 
    pointer-events: none;
    animation: none; 
}

.k12calc-pointer-text {
    font-weight: 500; 
    font-size: 0.9em; 
    line-height: 1.4;
    display: block; 
}

.k12calc-pointer-arrow-container {
    position: absolute; 
    bottom: -20px;  
    left: 30px;    
    font-size: 1.6em;
    color: rgba(var(--k12calc-brand-primary-rgb), 0.55);
    line-height: 0.5; 
    /* The arrow itself should not cast a shadow that interferes */
}

.k12calc-pointer-arrow-container i {
    animation: none;
}

/* Centered glow/pulse animation */
@keyframes k12calc-tooltip-shadow-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Standard shadow */
    }
    50% {
        /* Centered shadow (0 0), larger blur, slight spread, using brand color for visibility */
        box-shadow: 0 0 15px 2px rgba(var(--k12calc-brand-primary-rgb), 0.35); 
    }
}

/* Spacing for the "Your District's Setup" title can remain as is, 
   or be adjusted if the absolute-positioned pointer causes layout issues.
   Current CSS for it is:
   #k12calc-inputs-section h2#k12calc-inputs-section-title {
       margin-bottom: 15px; 
   }
   This is likely fine.
*/

/* Enhanced styling for all form groups for better visual rhythm */
.k12calc-form-group {
    margin-bottom: 20px; /* Standard spacing for form groups */
}
.k12calc-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Existing style */
    font-size: 0.9em;   /* Slightly smaller for a cleaner look */
    color: var(--k12calc-text-dark); /* Ensure good contrast for labels */
}
.k12calc-input-sub-label { /* For helper text below inputs */
    font-size: 0.8em;
    color: var(--k12calc-text-light);
    margin-top: 6px;
    display: block; /* Ensure it takes its own line for clarity */
}
#k12calc-quick-inputs {
    padding: 20px; /* Uniform padding around the quick inputs */
    border: 1px solid var(--k12calc-border-color);
    border-radius: var(--k12calc-border-radius);
    margin-bottom: 10px; /* Space before the reset button or detailed inputs */
    background-color: var(--k12calc-bg-light); /* Light background to group these inputs */
}

/* Ensure last form group in this bordered box has no bottom margin to align with padding */
#k12calc-quick-inputs .k12calc-form-group:last-child {
    margin-bottom: 0;
}

.k12calc-input-subsection {
    background-color: var(--k12calc-bg-light); /* Consistent light background for subsections */
    padding: 20px; /* Uniform padding within each subsection */
    margin-bottom: 20px; /* Spacing between different subsections */
    border-radius: var(--k12calc-border-radius); /* Existing */
    border: 1px solid var(--k12calc-border-color); /* Existing */
    /* Optional: Add a very subtle shadow for a slight lift, if desired.
       If not, the border and background color provide separation.
       box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    */
}

.k12calc-input-subsection h3 { /* Titles for subsections like "District & Device Information" */
    font-size: 1.05em;   /* Clean, slightly larger than input labels */
    font-weight: 600;
    color: var(--k12calc-brand-primary);
    margin-top: 0;
    margin-bottom: 20px; /* Space below the subsection title */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color); /* Clearer separator for subsection titles */
}
.k12calc-input-subsection h3 i {
    margin-right: 8px;
    color: var(--k12calc-brand-yellow); /* Keep icon color consistent */
}

/* Ensure last form group in a subsection has no bottom margin */
.k12calc-input-subsection .k12calc-form-group:last-child {
    margin-bottom: 0;
}

#k12calc-reset-button {
    margin-top: 5px; /* Space above the reset button */
    color: var(--k12calc-brand-primary);
}

/* New Card for Detailed Cost Breakdown */
.k12calc-detailed-cost-card {
    /* It will inherit general .card styles for background, border, shadow, padding */
    /* Add specific margin if needed to separate from Tier 3 title or next section */
    margin-bottom: 25px; /* Space after this card before charts */
}

.card.k12calc-detailed-cost-card{
    padding: 20px; /* Restored or standard padding */
}
#k12calc-detailed-cost-card-container{
    background: var(--k12calc-bg-light); /* Light background for the card */
}
/* Main header for the Detailed Cost & Lifespan Impact section */
#k12calc-cost-tables-main-header {
    color: var(--k12calc-brand-primary);
    margin-top: 0; /* Standard for first header in a card */
    margin-bottom: 10px; /* Space before the wow stat subtitle */
    font-size: 1.3em; /* Slightly more prominent */
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--k12calc-border-color);
    text-align: center; /* Center the main title */
}
#k12calc-cost-tables-main-header i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow);
}

/* "Wow Stat" Subtitle for Device Lifespan Impact */
.k12calc-device-shortened-lifespan-impact-subtitle {
    font-size: 1.05em;
    color: var(--k12calc-text-dark);
    margin-top: 10px;
    margin-bottom: 25px; /* Space before the first table sub-header */
    padding: 12px 18px;
    background-color: var(--k12calc-highlight-bg); /* Light blue background */
    border-left: 5px solid var(--k12calc-brand-secondary); /* Teal accent */
    border-radius: var(--k12calc-border-radius);
    line-height: 1.6;
    text-align: left; /* Or center if preferred */
    font-weight: 500; /* Base weight for the text */
}
.k12calc-device-shortened-lifespan-impact-subtitle strong {
    color: var(--k12calc-brand-secondary); /* Teal for numbers and district name */
    font-weight: 700; /* Bold for emphasis */
}


/* Sub-headers for 1-Year and 5-Year tables (Cost & Time Lost) */
.k12calc-detailed-cost-card h3.k12calc-cost-table-subheader,
.k12calc-time-lost-comparison-card h3.k12calc-time-lost-table-subheader, /* New for Time Lost subheaders */
#k12calc-cost-per-device-comparison-card h3 { 
    color: var(--k12calc-brand-primary);
    margin-top: 0; /* Will be overridden by specific margin-top if needed for first subheader */
    margin-bottom: 15px; 
    font-size: 1.2em; 
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color);
}
.k12calc-detailed-cost-card h3.k12calc-cost-table-subheader i,
.k12calc-time-lost-comparison-card h3.k12calc-time-lost-table-subheader i, /* New for Time Lost subheader icons */
#k12calc-cost-per-device-comparison-card h3 i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow); /* Or primary color */
}

.k12calc-cost-item-label-header {

    text-align: left; /* Align all headers left for consistency */
}

.k12calc-cost-current-header,
.k12calc-cost-proposed-header,
.k12calc-cost-savings-header {
    text-align:right;
     padding-left: 5px; /* Slight indent for cost headers */
}

/* "Current (AC)" Header - Accent/Red */
.k12calc-cost-comparison-headers .k12calc-cost-current-header {
    color: var(--k12calc-brand-accent) !important; /* Red */
    /* Other existing styles like font-weight, font-size, text-align, padding should be inherited or defined elsewhere */
}

/* "USB-C Solution" Header - Primary/Blue */
.k12calc-cost-comparison-headers .k12calc-cost-proposed-header {
    color: var(--k12calc-brand-primary) !important; /* Blue */
}

/* "Savings" or "Savings/Reduction" Header - Secondary/Teal (already styled, but ensure it's consistent) */
.k12calc-cost-comparison-headers .k12calc-cost-savings-header {
    color: var(--k12calc-brand-secondary) !important; /* Teal */
}

/* "Cost Item" or "Time Category" Header - Default or Dark Text */
.k12calc-cost-comparison-headers .k12calc-cost-item-label-header {
    color: var(--k12calc-text-dark); /* Or your preferred default header color */
}

/* For the 5-Year Time Lost sub-header row, if it uses the same classes: */
.k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-current-header {
    color: var(--k12calc-brand-accent) !important; /* Red */
}
.k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-proposed-header {
    color: var(--k12calc-brand-primary) !important; /* Blue */
}
.k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-savings-header { /* If you add savings header to 5yr intro */
    color: var(--k12calc-brand-secondary) !important; /* Teal */
}

/* Styling for the label part in a data row */
.k12calc-cost-item-label {
    font-size: .95em;
    color: var(--k12calc-text-medium);
    text-align: left;
    display: flex;
    flex-direction: column; /* Stack label text and button vertically */
    align-items: flex-start; /* Align items to the left within the cell */
    gap: 5px; /* Space between the label text and the button */
}

.k12calc-cost-item-label-text-wrapper { /* Wrapper for icon and text */
    display: flex;
    align-items: center; /* Vertically align icon and text if text wraps */
}

.k12calc-cost-item-label .k12calc-breakdown-icon {
    margin-right: 8px; /* Adjust space as needed */
    color: var(--k12calc-brand-yellow);
    width: 20px;
    text-align: center;
    font-size: 1.1em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.k12calc-cost-item-label .k12calc-show-calc-btn {
    font-size: 0.8em;
    /* margin-left: auto; REMOVE this or ensure it's not present */
    margin-left: 0; /* Ensure it aligns left under the text */
    padding: 3px 0px; /* Adjust padding, no horizontal padding if aligned left */
    white-space: nowrap;
    /* text-align: left; /* Explicitly align button text if needed */
    /* margin-top: 5px; /* Add space above the button if not using gap */
}

/* Styling for cost columns in data rows */
.k12calc-cost-current,
.k12calc-cost-proposed,
.k12calc-cost-savings {
    text-align: right; /* Align cost values left, under their headers */
    font-weight: 600;
    padding-left: 5px; /* Match header indent */
}

.k12calc-cost-current .k12calc-data-value {
    color: var(--k12calc-brand-accent);
}
.k12calc-cost-proposed .k12calc-data-value {
    color: var(--k12calc-brand-secondary);
}

/* Ensure value spans have consistent font size */
.k12calc-cost-current .k12calc-data-value,
.k12calc-cost-proposed .k12calc-data-value {
    font-size: 0.95em; /* Or 1em, adjust for visual balance */
}


/* Styling for the total rows */
.k12calc-cost-totals-row {
    font-weight: 700; /* Bolder text for totals */
    background-color: var(--k12calc-bg-light); /* Slight background for total rows */
    margin-top: 8px; /* Small space before first total row */
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 2px solid var(--k12calc-border-color); /* Stronger top border for totals section */
}
.k12calc-cost-totals-row .k12calc-cost-item-label strong {
    color: var(--k12calc-brand-primary); /* Primary color for total labels */
}
.k12calc-cost-totals-row .k12calc-data-value {
    font-weight: 700; /* Ensure total values are bold */
}

/* The .k12calc-calculation-details div (for popups) styling */
.k12calc-calculation-details {
    /* existing styles for font-size, color, margin-top, padding, background, border, border-radius */
    grid-column: 1 / -1; /* Make it span all columns of the implicit parent grid if it were inside */
    /* This is actually appended after the .k12calc-cost-comparison-row, so it's a block element taking full width by default */
    margin-top: 5px; /* Space between the row and its details */
    margin-bottom: 10px; /* Space after revealed details before the next comparison row */
}



/* --- Styles for Time Lost Comparison Table --- */

.k12calc-time-lost-comparison-card {
    margin-top: 25px; /* Space above this card */
    padding: 20px; /* Standard card padding */
}

/* Main header for the Time Lost & Productivity Impact section */
#k12calc-time-lost-main-header {
    color: var(--k12calc-brand-primary);
    margin-top: 0; /* Standard for first header in a card */
    margin-bottom: 10px; /* Space before the wow stat subtitle */
    font-size: 1.3em; /* Slightly more prominent */
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--k12calc-border-color);
    text-align: center; /* Center the main title */
}
#k12calc-time-lost-main-header i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow); /* Make clock icon yellow */
}

/* "Wow Stat" Subtitle for Time Lost Impact */
.k12calc-time-lost-impact-subtitle {
    font-size: 1.05em;
    color: var(--k12calc-text-dark);
    margin-top: 10px;
    margin-bottom: 25px; /* Space before the descriptive sub-label or first table sub-header */
    padding: 12px 18px;
    background-color: var(--k12calc-highlight-bg); /* Light blue background */
    border-left: 5px solid var(--k12calc-time-impact-color); /* Amber/Orange accent for time */
    border-radius: var(--k12calc-border-radius);
    line-height: 1.6;
    text-align: left; 
    font-weight: 500; 
}
.k12calc-time-lost-impact-subtitle strong {
    color: var(--k12calc-time-impact-color); /* Amber/Orange for numbers and district name */
    font-weight: 700; 
}

/* Descriptive sub-label that was previously under the main h3 */
.k12calc-time-lost-comparison-card > .k12calc-input-sub-label {
    margin-bottom: 15px;
    font-size: 0.9em;
    display: block;
}

.k12calc-time-lost-comparison-card .k12calc-cost-comparison-headers > .k12calc-cost-item-label-header {
    color: var(--k12calc-brand-primary); /* Make this specific header blue */
}

/* --- Styles for Time Lost Comparison Table (or Universal Table Styles) --- */

.k12calc-time-lost-multiline {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Or 'flex-end' if you want right-alignment in the cell */
    gap: 4px; /* Increased gap for better separation */
}

.k12calc-time-lost-multiline span {
    display: block; /* Ensures each span takes its own line if not already */
    line-height: 1.3; /* Adjust for comfortable line spacing */
}

/* Default styling for secondary time metrics (days, hours, cost) */
/* These are overridden by ID-specific selectors when a metric is "primary" for its row type */
.k12calc-time-lost-multiline .k12calc-time-lost-days,
.k12calc-time-lost-multiline .k12calc-time-lost-hours { /* Cost span removed from this group */
    font-size: 0.85em; /* Uniform smaller size for secondary info */
    color: var(--k12calc-text-medium); /* Consistent medium color for secondary info */
    font-weight: normal; /* Ensure not bold by default */
}

.k12calc-time-lost-multiline .k12calc-time-lost-cost {
    display: none; /* Remove dollar value from table cells */
}

/* Hide hours for IT Staff Time and Teacher Time in T3 tables */
#tl-it-annual-current-cell .k12calc-time-lost-hours,
#tl-it-annual-proposed-cell .k12calc-time-lost-hours,
#tl-it-annual-savings-cell .k12calc-time-lost-hours,
#tl-it-5year-current-cell .k12calc-time-lost-hours,
#tl-it-5year-proposed-cell .k12calc-time-lost-hours,
#tl-it-5year-savings-cell .k12calc-time-lost-hours,
#tl-teacher-annual-current-cell .k12calc-time-lost-hours,
#tl-teacher-annual-proposed-cell .k12calc-time-lost-hours,
#tl-teacher-annual-savings-cell .k12calc-time-lost-hours,
#tl-teacher-5year-current-cell .k12calc-time-lost-hours,
#tl-teacher-5year-proposed-cell .k12calc-time-lost-hours,
#tl-teacher-5year-savings-cell .k12calc-time-lost-hours {
    display: none;
}


/* Styling for 'per student' information - typically tertiary */
.k12calc-time-lost-per-student {
    font-size: 0.8em; /* Slightly smaller for tertiary info */
    color: var(--k12calc-text-light); /* Softer color for parenthetical/secondary info */
    font-style: italic;
}

/* Color overrides for PRIMARY metrics based on column type (Current/Proposed/Savings) */
/* These selectors are intentionally specific to override the defaults above */

/* CURRENT (AC) COLUMN - Primary metrics are ACCENT color */
#tl-it-annual-current-cell .k12calc-time-lost-days,
#tl-teacher-annual-current-cell .k12calc-time-lost-days,
#tl-student-annual-current-cell .k12calc-time-lost-hours, /* Student primary is hours */
#tl-it-5year-current-cell .k12calc-time-lost-days,
#tl-teacher-5year-current-cell .k12calc-time-lost-days,
#tl-student-5year-current-cell .k12calc-time-lost-hours { /* Student primary is hours */
    color: var(--k12calc-brand-accent) !important;
    font-weight: 700 !important;
    font-size: 0.95em !important; /* Prominent size for primary metric */
}

/* PROPOSED (USB-C) COLUMN - Primary metrics are PRIMARY (Blue) color */
#tl-it-annual-proposed-cell .k12calc-time-lost-days,
#tl-teacher-annual-proposed-cell .k12calc-time-lost-days,
#tl-student-annual-proposed-cell .k12calc-time-lost-hours,
#tl-it-5year-proposed-cell .k12calc-time-lost-days,
#tl-teacher-5year-proposed-cell .k12calc-time-lost-days,
#tl-student-5year-proposed-cell .k12calc-time-lost-hours {
    color: var(--k12calc-brand-primary) !important; /* Blue */
    font-weight: 700 !important;
    font-size: 0.95em !important;
}


/* SAVINGS COLUMN - Primary metrics are SECONDARY (Teal) color */
#tl-it-annual-savings-cell .k12calc-time-lost-days,
#tl-teacher-annual-savings-cell .k12calc-time-lost-days,
#tl-student-annual-savings-cell .k12calc-time-lost-hours,
#tl-it-5year-savings-cell .k12calc-time-lost-days,
#tl-teacher-5year-savings-cell .k12calc-time-lost-days,
#tl-student-5year-savings-cell .k12calc-time-lost-hours {
    color: var(--k12calc-brand-secondary) !important; /* Teal */
    font-weight: 700 !important;
    font-size: 0.95em !important;
}

/* Ensure the per-student metric remains styled as tertiary (light, italic) */
/* This rule needs to be specific enough if other rules might override its color/style */
.k12calc-time-lost-multiline .k12calc-time-lost-per-student {
    font-size: 0.8em !important; /* Keep it small */
    color: var(--k12calc-text-light) !important; /* Keep it light */
    font-style: italic !important; /* Keep it italic */
    font-weight: normal !important; /* Ensure it's not bolded by other rules */
}


#k12calc-main-cta-title{
    text-align:center;
}


/* Style for sub-total rows (5-year itemized) if needed to be distinct */
.k12calc-totals-sub-row {
    /* Inherits from k12calc-cost-comparison-row */
    /* background-color: #fbfcfe; */ /* Optional very light distinction */
    font-size: 0.92em;
}
.k12calc-totals-sub-row .k12calc-cost-item-label {
    font-weight: 500; /* Slightly less bold than main total labels */
}

/* --- Universal Styles for Comparison Table Rows & Headers --- */
.k12calc-cost-comparison-headers,
.k12calc-cost-comparison-row { /* This applies to ALL rows: headers, annual data, 5yr header, 5yr data */
    display: grid !important; /* Force display grid */
    /* Explicitly define 4 columns. Let's try slightly adjusted fr units.
       The label column gets more space. The three value columns share the rest.
       Total fr units = 2.5 + 1 + 1 + 1 = 5.5
       Alternatively, using percentages can sometimes be more predictable if fr units are misbehaving.
       e.g., grid-template-columns: 40% 20% 20% 20%; (adjust as needed)
    */
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; 
    gap: 10px;
    align-items: flex-start; 
    padding: 10px 5px;
    border-bottom: 1px solid var(--k12calc-bg-medium);
    width: 100%; /* Ensure the grid container itself takes full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.k12calc-cost-comparison-row:last-child {
    border-bottom: none;
}

/* --- Styling for ALL Header Texts within ANY comparison table header row --- */
.k12calc-cost-comparison-headers > div, /* Targets direct children of the main header row */
.k12calc-cost-comparison-row.k12calc-cost-totals-row > div { /* Targets direct children of the 5-year intro header row */
    font-weight: 700;
    font-size: 0.9em;
    color: var(--k12calc-text-dark); /* Default header text color */
    /* text-align: left; */
    padding-left: 5px; /* Consistent left padding for all header cells */
}
/* Override for the first header cell (label column) in any header row if it needs different padding or alignment */
.k12calc-cost-comparison-headers .k12calc-cost-item-label-header,
.k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-item-label {
    padding-left: 0; /* No specific padding for the label column header cell itself */
}
/* Ensure the "Time Category (5-Year Est.)" text (which is wrapped in strong) gets the brand color */
.k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-item-label strong {
    color: var(--k12calc-brand-primary);
}


/* --- Styling for the Main Header Row (e.g., "Cost Item", "Current (AC)", "USB-C Solution") --- */
.k12calc-cost-comparison-headers {
    padding-bottom: 12px;
    margin-bottom: 5px;
    border-bottom: 2px solid var(--k12calc-border-color);
    /* background-color: var(--k12calc-bg-light); */
}

/* --- Styling for Total Rows (like "Total Annual Direct Costs" or the 5-Year intro row) --- */
.k12calc-cost-totals-row { /* This class is on the "Total..." rows and the 5-year intro header */
    background-color: var(--k12calc-bg-light);
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 2px solid var(--k12calc-border-color);
}
/* Make "Total..." labels bold and primary color */
.k12calc-cost-totals-row > .k12calc-cost-item-label strong { /* For "Total Annual/5-Year Direct Costs" */
    color: var(--k12calc-brand-primary);
    font-weight: 700; /* Explicitly bold */
}
/* Ensure data values in total rows are bold */
.k12calc-cost-totals-row .k12calc-data-value {
    font-weight: 700;
}


/* --- Styling for ALL Data Row Labels (Annual items and 5-Year itemized sub-rows) --- */
.k12calc-cost-comparison-row .k12calc-cost-item-label { /* Applies to annual data AND .k12calc-totals-sub-row labels */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.95em; /* Consistent base font size for the label container */
    color: var(--k12calc-text-medium);
}

.k12calc-cost-comparison-row .k12calc-cost-item-label-text-wrapper {
    display: flex;
    align-items: center;
    font-weight: 500; /* Default weight for the actual text (e.g., "AC Adapter Replacement") */
}

/* Icon styling, applies wherever .k12calc-breakdown-icon is used inside a label */
.k12calc-cost-item-label .k12calc-breakdown-icon { /* Specific to icons inside any label */
    margin-right: 8px;
    color: var(--k12calc-brand-yellow);
    width: 20px; /* Ensure enough space for the icon */
    text-align: center; /* Center the icon within its allocated width */
    font-size: 1.1em; /* Make icon slightly larger relative to label text */
    flex-shrink: 0;
    display: inline-flex; /* Helps with alignment and sizing of <i> */
    align-items: center;
    justify-content: center;
}
.k12calc-cost-item-label .k12calc-breakdown-icon .k12calc-fa-icon { /* Target the <i> tag itself if needed */
    line-height: 1; /* Helps with vertical centering of FontAwesome icon */
}


/* "Show Details" button, consistent for all */
.k12calc-cost-item-label .k12calc-show-calc-btn {
    font-size: 0.8em;
    margin-left: 0;
    padding: 3px 0; /* Only vertical padding as it's left-aligned */
    white-space: nowrap;
    color: var(--k12calc-brand-primary); /* From original .k12calc-show-calc-btn */
    background: none; border: none; /* From original */
    cursor: pointer; /* From original */
    text-decoration: underline; /* From original */
}
.k12calc-cost-item-label .k12calc-show-calc-btn i {
    margin-right: 4px; /* From original */
}


/* Current (AC) Column - Accent/Red - Applies to .k12calc-data-value in direct cost table */
.k12calc-cost-comparison-row .k12calc-cost-current .k12calc-data-value {
    color: var(--k12calc-brand-accent) !important;
    font-size: 0.95em;
}

/* Proposed (USB-C Solution) Column - Primary/Blue - Applies to .k12calc-data-value */
.k12calc-cost-comparison-row .k12calc-cost-proposed .k12calc-data-value {
    color: var(--k12calc-brand-primary) !important;
    font-size: 0.95em;
}

/* Savings Column - Secondary/Teal - Applies to .k12calc-data-value */
.k12calc-cost-comparison-row .k12calc-cost-savings .k12calc-data-value {
    color: var(--k12calc-brand-secondary) !important;
    font-size: 0.95em;
}

/* --- Time Lost Values Styling --- */

/* Ensure the calculation details popup spans correctly */
.k12calc-calculation-details {
    grid-column: 1 / -1; /* Span all columns of its parent grid row */
    margin-top: 5px;
    margin-bottom: 10px;
    /* Other existing styles for .k12calc-calculation-details are fine */
}

/* The rest of your CSS remains the same */
@media (min-width: 600px) { /* Or your desired breakpoint */

    #k12calc-hero-stat {
        grid-column: span 2;
    }
}


/* --- Small Multiples Bar Chart Section --- */
/* Styles for the TIME IMPACT visualization section (ID: k12calc-small-multiples-section) */
#k12calc-small-multiples-section {
    margin-top: 25px;
    background: var(--k12calc-bg-light); /* Light background for the section */
}
#k12calc-small-multiples-section h3 {
    color: var(--k12calc-brand-primary);
    margin-top: 15px; 
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color);
}
#k12calc-small-multiples-section h3 i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow);
}

#k12calc-cost-small-multiples-section{
    background: var(--k12calc-bg-light)
}
/* Styles for the COST visualization section (ID: k12calc-cost-small-multiples-section) */
#k12calc-cost-small-multiples-section h3 {
    color: var(--k12calc-brand-primary); /* Ensure brand blue color */
    margin-top: 15px; /* Consistent with other section h3 */
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color);
}
#k12calc-cost-small-multiples-section h3 i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow); /* Consistent icon color */
}

.k12calc-chart-description {
    font-size: 0.9em;
    color: var(--k12calc-text-medium);
    margin-bottom: 20px; /* Space before the charts grid */
    line-height: 1.5;
    max-width: 800px; /* Optional: constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Or left, as preferred */
}

.k12calc-small-multiples-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Default for Time Impact charts */
    gap: 20px; 
}

/* Specific layout for the NEW Cost Visualization small multiples */
#k12calc-cost-small-multiples-section .k12calc-small-multiples-container {
    /* On smaller screens, allow flexible columns, potentially 1 or 2, by adjusting minmax if needed */
    /* For example, to encourage 2 columns sooner on tablet: */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
}

@media (min-width: 992px) { /* Desktop breakpoint */
    #k12calc-cost-small-multiples-section .k12calc-small-multiples-container {
        grid-template-columns: repeat(4, 1fr); /* Force 4 columns for the cost charts */
    }
}

.k12calc-small-multiple-chart {
    display: flex;
    flex-direction: column;
    padding: 20px; /* Increased padding */
    background-color: var(--k12calc-bg-light);
    border-radius: var(--k12calc-border-radius);
    border: 1px solid var(--k12calc-border-color);
    max-height: 748px; /* Recalculated height to accommodate all fixed-height internal elements */
}

.k12calc-small-multiple-title {
    font-size: 1.05em; /* Slightly adjusted */
    color: var(--k12calc-brand-primary);
    margin: 0 0 5px 0; /* Added more bottom margin */
    text-align: center;
    font-weight: 600;
    min-height: 2.5em; /* Ensures space for up to 2 lines of text, promoting vertical alignment */
    display: flex; /* Optional: To help center text vertically if it's shorter */
    align-items: center; /* Optional: To help center text vertically */
    justify-content: center; /* Optional: To help center text horizontally (already text-align: center) */
}


.k12calc-period-label {
    display: block;
    font-size: 0.9em;
    font-weight:800;
    color: var(--k12calc-text-medium);
    margin-top:10px;
    margin-bottom: 15px; /* Increased margin before bars */
    text-align: center;
}

.k12calc-bar-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px; /* Gap between current and USB-C bar */
    height: 120px; /* Height for bars to grow into */
    padding-top: 20px; /* Space for values ABOVE bars */
    margin-bottom: 8px; /* Space before legend */
    box-sizing: content-box; 
}

.k12calc-savings-annotation {
    /* Removed absolute positioning styles */
    display: block; /* Make it a block element to occupy its own line */
    text-align: center; /* Center the text */
    font-size: 0.9em; 
    font-weight: 700;
    color: var(--k12calc-brand-secondary);
    background-color: var(--k12calc-bg-light); 
    padding: 4px 8px; /* Adjusted padding */
    border-radius: var(--k12calc-border-radius);
    white-space: nowrap;
    border: 1px solid var(--k12calc-border-color); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-top: 5px; /* Space below period-label */
    margin-bottom: 10px; /* Space above bar-pair/bar-wrapper */
    width: fit-content; /* Make it only as wide as its content */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
}

.k12calc-bar {
    width: 55px; /* Increased width */
    /* height is set by JS */
    display: flex;
    justify-content: center;
    border-radius: 3px 3px 0 0; 
    transition: height 0.4s ease-out;
    position: relative;
}

.k12calc-bar.current {
    background-color: var(--k12calc-brand-accent); /* Pink */
}

.k12calc-bar.usbc {
    background-color: var(--k12calc-brand-primary); /* Blue */
}

.k12calc-bar-value {
    color: white;
    font-size: 0.8em; 
    font-weight: 500;
    padding: 2px 0; 
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    position: absolute;
    top: -18px; /* Position value ABOVE the bar */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none; 
    line-height: 1;
    color: var(--k12calc-text-dark); /* Change color to be visible against bar or bg */
    background-color: rgba(255,255,255,0.7); /* Optional light bg for contrast */
    padding: 1px 4px;
    border-radius: 2px;
    z-index: 1; /* Below annotation if they could overlap */
}

.k12calc-bar.show-value .k12calc-bar-value {
    display: block;
}


.k12calc-bar-legend {
    display: flex;
    justify-content: center;
    gap: 10px; /* Match bar gap */
    font-size: 0.8em;
    color: var(--k12calc-text-light);
    margin-top: 5px; /* Added margin */
}

.k12calc-bar-legend span {
    width: 55px; /* Match increased bar width */
    text-align: center;
    white-space: nowrap; /* Prevent label wrapping */
}


/* Print Styles */
@media print {
    body {
        background-color: #fff !important;
        font-size: 9pt !important;
        color: #000 !important;
    }
    #k12calc-app-container {
        max-width: none !important;
        margin: 0 !important; padding: 0 !important;
        box-shadow: none !important; border: none !important;
    }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; margin-bottom: 15px !important; padding: 15px !important; }
    .card.prominent { background-color: #f0f0f0 !important; border-left-color: #999 !important; }
    
    .k12calc-app-header .k12calc-data-source-badge a,
    .k12calc-mode-toggle, .k12calc-problem-agitation-snippets,
    #k12calc-inputs-section .k12calc-button, 
    #k12calc-toggle-deep-dive-btn, .k12calc-contextual-cta,
    #k12calc-main-cta-section, #k12calc-lead-form-modal, #k12calc-post-lead-options #k12calc-schedule-meeting-btn, #k12calc-post-lead-options #k12calc-share-results-btn-modal,
    #k12calc-sharing-section, .k12calc-app-footer, .k12calc-modal,
    .k12calc-show-calc-btn 
    { display: none !important; }

    #k12calc-research-stats-quickview { display: block !important; background-color: #f0f0f0 !important;}


    #k12calc-main-title { font-size: 16pt !important; color: #000 !important; }
    .k12calc-district-input-optional, .k12calc-data-source-badge { font-size: 8pt !important; }
    .k12calc-data-source-badge a::after { content: " (See Full Report for Sources)"; }

    
    #k12calc-inputs-section, #k12calc-results-section { page-break-inside: avoid; }
    .k12calc-calculator-body { grid-template-columns: 1fr !important; } 
    
    #k12calc-inputs-section {
        border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px;
    }
    #k12calc-inputs-section h2 { font-size: 12pt !important; }
    .k12calc-form-group label, .k12calc-form-group input, .k12calc-form-group select, .k12calc-range-output {
        font-size: 9pt !important;
    }
    #k12calc-detailed-inputs { display: block !important; } 
    #k12calc-quick-inputs { display: block !important; }


    #k12calc-tier1-summary, #k12calc-tier2-key-outputs, #k12calc-tier3-deep-dive-container,
    #k12calc-peer-comparison-section {
        padding: 10px !important;
    }
    #k12calc-tier1-summary h2, #k12calc-tier2-key-outputs h2, #k12calc-tier3-content h2,
    #k12calc-peer-comparison-section h2 {
        font-size: 11pt !important; color: #000 !important;
    }
    .k12calc-glance-value, .k12calc-value { font-size: 12pt !important; color: #000 !important; }
    .k12calc-glance-value.savings, .k12calc-value.savings { color: #000 !important; }
    .k12calc-impact-viz { display: block !important; font-size: 8pt !important; color: #333 !important; }
    
    .k12calc-calculation-details {
        display: block !important; 
        font-size: 7.5pt !important;
        padding: 5px !important; background-color: #f9f9f9 !important;
        border: 1px solid #eee !important;
        color: #333 !important;
    }

    #k12calc-tier3-content { display: block !important; }
    .k12calc-data-value { font-size: 9pt !important; }
    .k12calc-charts-container { grid-template-columns: 1fr !important; }
    .k12calc-chart-wrapper { min-height: auto !important; height: auto !important; page-break-inside: avoid; aspect-ratio: unset !important; }
    .k12calc-chart-title { font-size: 10pt !important; }
    canvas { 
        max-height: 200px !important; 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    }
    .k12calc-bar-chart-bar { height: 20px !important; font-size: 8pt !important; }
    #k12calc-current-bar { background-color: #666 !important; color: #fff !important; }
    .k12calc-efficient-bar { background-color: #bbb !important; color: #000 !important; }

    #k12calc-lead-form-modal-content-area { display: block !important; } 
    #k12calc-lead-form input[type="text"], #k12calc-lead-form input[type="email"] {
        border: 1px solid #ccc !important;
        background-color: #fff !important; 
    }
    #k12calc-post-lead-options #k12calc-print-report-btn { display: inline-block !important; }
    #k12calc-post-lead-options #k12calc-post-lead-title,
    #k12calc-post-lead-options #k12calc-post-lead-district-specific-text {
        display: block !important; 
    }

    #k12calc-research-stats-full { display: block !important; background-color: #f0f0f0 !important;}
    #k12calc-research-stats-full h2 { font-size: 11pt !important; }
    .k12calc-research-item { font-size: 8pt !important; }

    #k12calc-lead-form-modal-content-area {
        padding: 10px;
        border: 1px dashed #ccc;
        margin-bottom: 10px;
    }
    #k12calc-lead-form-modal-content-area h2 { font-size: 12pt; }
    #k12calc-lead-form-modal-content-area p, #k12calc-lead-form-modal-content-area ul { font-size: 8pt; }
    #k12calc-lead-form-modal-content-area .k12calc-form-group label { display: inline-block; width: 100px; }
    #k12calc-lead-form-modal-content-area .k12calc-form-group input { display: inline-block; width: auto; border: none; padding: 0; }
    #k12calc-lead-form-modal-content-area .k12calc-form-group input::after { content: attr(value); color: black;}
}

@media (max-width: 767px) {
    body {
        font-size: 15px; /* Slightly reduce base font for overall fit if necessary */
    }

    #k12calc-app-container {
        padding: 15px;
        margin: 10px auto;
    }

    .card {
        padding: 15px;
    }
    
    /* Text size adjustments for readability */
    .k12calc-glance-note,
    .k12calc-card-insight-footer,
    .k12calc-input-sub-label,
    .k12calc-modal-footnote,
    .k12calc-app-footer,
    .k12calc-research-item,
    .k12calc-form-group label,
    .k12calc-skeptic-link {
        font-size: 0.9em; /* Was 0.8em or 0.85em, now ~13.5px from 15px base */
    }

    .k12calc-problem-agitation-snippets {
        max-height: 140px;
        min-height: 140px;
    }

    .k12calc-calculation-details,
    .k12calc-contextual-cta,
    .k12calc-modal p,
    #k12calc-reference-data-tables-container table,
    .k12calc-tab-button {
        font-size: 0.92em; /* Was ~0.85em-0.95em, now ~13.8px */
    }
    
    .k12calc-range-output {
        font-size: 0.9em; /* Ensure this is not too small if body font reduced */
        min-width: 50px; /* Slightly reduce min-width */
        padding: 4px 6px;
    }

    /* Quick impact section (At a Glance) - 2 columns on mobile */
    .k12calc-glance-grid {
        grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
        gap: 10px;
    }

    .k12calc-glance-metric {
        padding: 12px;
    }
    .k12calc-glance-label{
        font-size: 0.9em;
    }
    .k12calc-glance-value{
        font-size: 1.4em;
    }
    .k12calc-glance-metric .k12calc-badge {
        font-size: 0.7em;
    }

    #k12calc-hero-stat {
        grid-column: 1 / -1; /* Make it span full width on mobile */
    }


    /* Reduce other paddings */
    .k12calc-key-metric,
    .k12calc-input-subsection,
    #k12calc-quick-inputs,
    /* .card.k12calc-detailed-cost-card, (Handled below for 5px) */
    /* .k12calc-time-lost-comparison-card, (Handled below for 5px) */
    #k12calc-cost-per-device-comparison-card, /* This specific card remains 15px or adjust if it's a "table card" */
    .k12calc-chart-area,
    .k12calc-small-multiple-chart {
        padding: 15px;
    }

    /* Mobile: Padding for specific table-containing cards */
    .card.k12calc-detailed-cost-card,
    .k12calc-time-lost-comparison-card {
        padding: 5px;
    }

    /* Mobile: Padding for tier3-deep-dive-container */
    #k12calc-tier3-deep-dive-container.card { /* Ensure specificity if needed */
        padding: 0px;
    }

    .k12calc-modal-content {
        padding: 20px 15px; /* More vertical, less horizontal */
        margin: 10% auto; /* Adjust margin for smaller screens */
        width: 95%;
    }
    
    #k12calc-main-title {
        font-size: 1.6em;
    }

    #k12calc-results-section{
        padding-bottom: 10px;
    }

    #k12calc-inputs-section h2, 
    #k12calc-results-section h2, 
    #k12calc-main-cta-section h2,
    #k12calc-peer-comparison-section h2, 
    #k12calc-sharing-section h2, 
    #k12calc-research-stats-full h2,
    #k12calc-cost-tables-main-header,
    #k12calc-time-lost-main-header,
    .k12calc-detailed-cost-card h3.k12calc-cost-table-subheader,
    .k12calc-time-lost-comparison-card h3.k12calc-time-lost-table-subheader,
    #k12calc-cost-per-device-comparison-card h3,
    #k12calc-small-multiples-section h3,
    #k12calc-cost-small-multiples-section h3 {
        font-size: 1.15em; /* Slightly smaller section headers */
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

    .k12calc-input-subsection h3 {
        font-size: 1.05em;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    #k12calc-app-container input[type="number"],
    #k12calc-app-container input[type="text"],
    #k12calc-app-container input[type="email"],
    #k12calc-app-container select {
        padding: 9px 10px;
        font-size: 0.95em;
    }

    /* Table adjustments */
    .k12calc-cost-comparison-headers,
    .k12calc-cost-comparison-row {
        gap: 8px; /* Reduce gap between columns */
        padding: 8px 5px; /* Reduce top/bottom padding */
        /* Adjust column widths for better fit on mobile */
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .k12calc-cost-comparison-headers > div,
    .k12calc-cost-comparison-row.k12calc-cost-totals-row > div {
        font-size: 0.85em; /* Smaller header text in tables */
        padding-left: 3px;
    }
    .k12calc-cost-comparison-headers .k12calc-cost-item-label-header,
    .k12calc-cost-comparison-row.k12calc-cost-totals-row .k12calc-cost-item-label {
        padding-left: 0; 
    }

    .k12calc-cost-item-label {
        font-size: 0.9em; /* Smaller item labels in tables */
        gap: 3px;
    }
    .k12calc-cost-item-label .k12calc-breakdown-icon {
        display: none; /* Hide icons for item labels on mobile */
    }
    .k12calc-cost-item-label .k12calc-breakdown-icon {
        margin-right: 5px;
        font-size: 1em;
    }
    .k12calc-cost-item-label .k12calc-show-calc-btn {
        font-size: 0.75em; /* Smaller detail button */
    }

    .k12calc-cost-current .k12calc-data-value,
    .k12calc-cost-proposed .k12calc-data-value,
    .k12calc-cost-savings .k12calc-data-value {
        font-size: 0.9em; /* Smaller data values in table cells */
    }
    
    /* Time lost table specific font sizes for multiline values */
    .k12calc-time-lost-multiline .k12calc-time-lost-days,
    .k12calc-time-lost-multiline .k12calc-time-lost-hours,
    .k12calc-time-lost-multiline .k12calc-time-lost-cost { /* Secondary */
        font-size: 0.85em; /* Was 0.85em, becomes ~12.75px */
    }
    .k12calc-time-lost-per-student { /* Tertiary */
        font-size: 0.8em; /* Was 0.8em, becomes 12px */
    }
    /* Primary time lost values (already 0.95em) will become ~14.25px, which is fine */
    #tl-it-annual-current-cell .k12calc-time-lost-days,
    #tl-teacher-annual-current-cell .k12calc-time-lost-days,
    #tl-student-annual-current-cell .k12calc-time-lost-hours,
    #tl-it-5year-current-cell .k12calc-time-lost-days,
    #tl-teacher-5year-current-cell .k12calc-time-lost-days,
    #tl-student-5year-current-cell .k12calc-time-lost-hours,
    #tl-it-annual-proposed-cell .k12calc-time-lost-days,
    #tl-teacher-annual-proposed-cell .k12calc-time-lost-days,
    #tl-student-annual-proposed-cell .k12calc-time-lost-hours,
    #tl-it-5year-proposed-cell .k12calc-time-lost-days,
    #tl-teacher-5year-proposed-cell .k12calc-time-lost-days,
    #tl-student-5year-proposed-cell .k12calc-time-lost-hours,
    #tl-it-annual-savings-cell .k12calc-time-lost-days,
    #tl-teacher-annual-savings-cell .k12calc-time-lost-days,
    #tl-student-annual-savings-cell .k12calc-time-lost-hours,
    #tl-it-5year-savings-cell .k12calc-time-lost-days,
    #tl-teacher-5year-savings-cell .k12calc-time-lost-days,
    #tl-student-5year-savings-cell .k12calc-time-lost-hours {
        font-size: 0.92em !important; /* Adjusting primary slightly if needed */
    }

    /* Bar chart text */
    .k12calc-bar-chart-label {
        flex-basis: 120px; /* Reduce label basis */
        font-size: 0.85em;
        text-align: left; /* Align left on mobile for more space */
    }
    .k12calc-bar-chart-value-prefix {
        font-size: 0.85em;
        min-width: 50px; /* Reduce min-width */
    }
    .k12calc-bar-chart-bar-container {
        height: 24px;
    }

    /* Small Multiples Bar Charts */
    .k12calc-small-multiples-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Allow 1 or 2 columns more easily */
        gap: 15px;
    }
    #k12calc-cost-small-multiples-section .k12calc-small-multiples-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Cost viz charts */
    }
    .k12calc-small-multiple-chart {
        padding: 15px;
        height: auto; /* Let content define height on mobile */
        gap: 10px; /* Adjust gap for internal grid */
        display: grid;
        grid-template-columns: 1fr 1fr; /* For the two .k12calc-small-multiple-period elements */
        grid-template-rows: auto auto; /* Row for title, row for periods */
    }
    .k12calc-small-multiple-title {
        font-size: 1em;
        min-height: 2em; /* Allow for 2 lines */
        grid-column: 1 / -1; /* Title spans both columns */
        margin-bottom: 0; /* Grid gap will handle spacing below title */
    }
    .k12calc-period-label {
        font-size: 0.85em;
        margin-bottom: 10px;
    }
     .k12calc-bar-wrapper {
        height: 100px; /* Reduce bar height */
        padding-top: 18px; /* Adjusted space for values above bars */
        gap: 8px;
    }
    .k12calc-savings-annotation {
        font-size: 0.8em;
        padding: 3px 6px; /* Adjusted padding */
        /* top: 2px; Removed, no longer absolute */
        margin-top: 4px;
        margin-bottom: 20px;
    }
    .k12calc-bar {
        width: 45px; /* Slightly increased for mobile */
    }
    .k12calc-bar-value {
        font-size: 0.75em;
        top: -16px;
    }
    .k12calc-bar-legend {
        font-size: 0.75em;
        gap: 8px;
    }
    .k12calc-bar-legend span {
        width: 45px; /* Match mobile bar width */
        white-space: nowrap; /* Ensure no wrapping on mobile either */
    }
    
    /* Splash Screen on mobile */
    #k12calc-splash-screen {
        padding-top: 80px; /* Reduce top padding */
    }
    .k12calc-splash-title {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    .k12calc-progress-bar-container {
        width: 90%;
    }
    .k12calc-progress-label {
        font-size: 0.8em;
    }

    /* Mode Toggle Buttons */
    .k12calc-mode-toggle .k12calc-button {
        padding: 6px 10px; /* More compact buttons */
        font-size: 0.8em;  /* Further reduced */
    }

    /* General buttons */
    .k12calc-button {
        font-size: 0.85em; /* Reduced */
        padding: 7px 14px; /* Reduced */
    }
    #k12calc-toggle-deep-dive-btn {
        font-size: 0.9em;  /* Reduced */
        padding: 9px 15px; /* Vertically reduced */
    }

    /* Header Controls flex behavior */
    .k12calc-header-controls {
        flex-direction: column; /* Stack toggle and source wrap */
        align-items: center; /* Center them when stacked */
    }
    .k12calc-source-wrap {
        text-align: center; /* Center text in source wrap */
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    #k12calc-app-container {
        padding: 10px;
    }
    .card {
        padding: 10px;
    }
    .k12calc-glance-grid {
        /* On very small screens, 1 column might be better if 2 are too tight */
        /* grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); */
        /* Or adjust minmax to ensure two can fit if that's a hard requirement */
         grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .k12calc-glance-metric {
        padding: 10px;
    }

    #k12calc-main-title {
        font-size: 1.4em;
    }

    .k12calc-cost-comparison-headers,
    .k12calc-cost-comparison-row {
        gap: 5px; 
        /* Further adjust grid if necessary for very small screens */
        /* Consider stacking elements within a row if horizontal space is too limited */
    }
    .k12calc-cost-comparison-headers > div {
        font-size: 0.8em;
    }
     .k12calc-cost-item-label {
        font-size: 0.85em;
    }
    .k12calc-cost-current .k12calc-data-value,
    .k12calc-cost-proposed .k12calc-data-value,
    .k12calc-cost-savings .k12calc-data-value {
        font-size: 0.85em;
    }
    .k12calc-time-lost-multiline span {
        line-height: 1.2; /* Tighter line height for multi-line values */
    }
    
    /* Small Multiples Bar Charts for very small screens */
    #k12calc-cost-small-multiples-section .k12calc-small-multiples-container,
    .k12calc-small-multiples-container {
        grid-template-columns: 1fr; /* Force 1 column */
    }
     .k12calc-small-multiple-chart {
        padding: 10px;
    }

    .k12calc-bar-chart-label {
        flex-basis: 100px;
    }
}

/* --- New Deep-Dive Panel Styles --- */
.deep-dive-panel {
    padding: 0 !important;
    overflow: hidden; /* Ensures child border-radius is respected */
}

.deep-dive-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, var(--k12calc-brand-primary), var(--k12calc-brand-primary-dark));
    color: white;
    padding: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: left;
}

.deep-dive-toggle:hover {
    background: linear-gradient(135deg, var(--k12calc-brand-primary-dark), #1666a7);
}

.deep-dive-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deep-dive-main-title {
    font-size: 1.2em;
    font-weight: 700;
    font-family: var(--k12calc-font-family);
}

.deep-dive-subtitle {
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: 400;
    font-family: var(--k12calc-font-family);
}

.deep-dive-icon {
    font-size: 1.5em;
    margin-left: 20px;
    transition: transform 0.3s ease-in-out;
}

.deep-dive-toggle.open .deep-dive-icon {
    transform: rotate(180deg);
}

.panel-content-preview {
    padding: 15px 20px;
    background-color: var(--k12calc-bg-light);
    border-bottom: 1px solid var(--k12calc-border-color);
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out;
    max-height: 200px; /* Adjust as needed */
    opacity: 1;
    overflow: hidden;
}

.deep-dive-toggle.open + .panel-content-preview {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.teaser-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.teaser-badge {
    background-color: #fff;
    color: var(--k12calc-text-medium);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--k12calc-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
    outline: none;
}

.teaser-badge i {
    color: var(--k12calc-brand-yellow);
}

.teaser-badge:hover,
.teaser-badge:focus-visible {
    color: var(--k12calc-brand-primary);
    border-color: rgba(var(--k12calc-brand-primary-rgb), 0.35);
    box-shadow: 0 6px 14px rgba(var(--k12calc-brand-primary-rgb), 0.18);
    transform: translateY(-1px);
}

.k12calc-quote-section {
    margin-top: 30px;
    padding: 24px;
}

.k12calc-quote-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--k12calc-brand-primary);
}

.k12calc-quote-section h2 i {
    color: var(--k12calc-brand-secondary);
}

.k12calc-quote-section p {
    margin-bottom: 18px;
    color: var(--k12calc-text-medium);
}

.k12calc-quote-form-container {
    position: relative;
    min-height: 280px;
}

.k12calc-quote-form-container .hs-form-frame iframe,
.k12calc-quote-form-container .hs-form-frame form {
    width: 100% !important;
}

/* --- Glowing Border Animation for Unexpanded Panel --- */
@keyframes glow-pulse-animation {
  0% {
    box-shadow: 0 0 4px rgba(26, 109, 180, 0.3), inset 0 0 0 1px rgba(26,109,180,.05), var(--k12calc-box-shadow);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(26, 109, 180, 0.5), inset 0 0 0 1px rgba(26,109,180,.05), var(--k12calc-box-shadow);
  }
  100% {
    box-shadow: 0 0 4px rgba(26, 109, 180, 0.3), inset 0 0 0 1px rgba(26,109,180,.05), var(--k12calc-box-shadow);
  }
}

.deep-dive-panel:not(.is-expanded) {
  animation: glow-pulse-animation 2.5s infinite ease-in-out;
  border: 1px solid transparent; /* Prevents layout shift from border appearing with shadow */
}

/* When expanded, revert to the standard card shadow and border */
.deep-dive-panel.is-expanded {
  border: 1px solid var(--k12calc-border-color);
  box-shadow: inset 0 0 0 1px rgba(26,109,180,.05), var(--k12calc-box-shadow);
}

/* Cart TCO Section Styles */
#k12calc-cart-tco-section {
    /* Inherits .card styles (background, border, shadow) */
    margin-top: 30px; /* Space above this new section */
    padding: 20px;
    background: var(--k12calc-bg-light); /* Light background for contrast */
}

#k12calc-cart-tco-section h3 {
    color: var(--k12calc-brand-primary);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k12calc-border-color);
    text-align: center;
}
#k12calc-cart-tco-section h3 i {
    margin-right: 10px;
    color: var(--k12calc-brand-yellow);
}

#k12calc-cart-tco-section .k12calc-form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
#k12calc-cart-tco-section .k12calc-form-group label {
    margin-bottom: 0;
    margin-right: 10px;
    font-weight: 500;
    font-size: 1em; /* Match other primary labels */
}
#k12calc-num-carts-tco {
    width: 100px;
    padding: 8px 10px; /* Consistent with other inputs */
    text-align: center;
}

.k12calc-cart-tco-headers,
.k12calc-cart-tco-row {
    /* Uses .k12calc-cost-comparison-headers and .k12calc-cost-comparison-row for base grid */
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(0, 1fr)); /* Year column, 3 value columns */
    gap: 10px;
    align-items: center; /* Vertically center content in cells */
}

/* Header specific text alignment (already text-align right by default for these in .k12calc-cost-comparison-headers > div) */
.k12calc-cart-tco-headers > div:first-child { /* "Year" header */
    text-align: left;
    padding-left: 5px;
}

/* Row specific text alignment */
.k12calc-cart-tco-row > div {
    font-size: 0.95em; /* Slightly smaller than typical table values, or adjust as needed */
    padding: 8px 5px; /* Consistent padding for row cells */
}

.k12calc-cart-tco-row > div:first-child { /* "Year X" cell */
    font-weight: 600;
    color: var(--k12calc-text-dark);
    text-align: left;
    padding-left: 5px;
}

.k12calc-cart-tco-row > div:not(:first-child) { /* Value cells */
    font-weight: 700;
    text-align: right;
    padding-right: 10px; /* More padding for right-aligned numbers */
}

/* Color coding for value columns */
.k12calc-cart-tco-row > div:nth-child(2) { /* Competition TCO column values */
    color: var(--k12calc-brand-accent);
}
.k12calc-cart-tco-row > div:nth-child(3) { /* JAR TCO column values */
    color: var(--k12calc-brand-primary);
}
.k12calc-cart-tco-row > div:nth-child(4) { /* Savings TCO column values */
    color: var(--k12calc-brand-secondary);
}

/* Year 5 / Cumulative Total Row styling */
.k12calc-cart-tco-total-row {
    font-weight: 700; /* Make all text in this row bolder */
    background-color: var(--k12calc-bg-light);
    margin-top: 10px; /* Space before the total row */
    border-top: 2px solid var(--k12calc-border-color); /* Prominent top border */
}
.k12calc-cart-tco-total-row > div {
    font-size: 1em; /* Slightly larger for emphasis, or match other totals */
    padding-top: 12px;
    padding-bottom: 12px;
}
.k12calc-cart-tco-total-row > div:first-child { /* "Year 5 (Cumulative)" label */
    color: var(--k12calc-brand-primary); /* Match other total labels */
}

/* TCO Annual Breakdown Styles */
.k12calc-tco-breakdown-toggle-container {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid var(--k12calc-border-color);
    padding-top: 20px;
}

#k12calc-tco-breakdown-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--k12calc-border-color);
}
#k12calc-tco-breakdown-container h4 {
    color: var(--k12calc-brand-primary);
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 5px;
}
#k12calc-tco-breakdown-container h4 i {
    margin-right: 8px;
    color: var(--k12calc-brand-yellow);
}

#k12calc-tco-annual-breakdown-table .k12calc-cost-savings-header {
    color: var(--k12calc-brand-secondary) !important;
}
#k12calc-tco-annual-breakdown-table .k12calc-cost-savings .k12calc-data-value {
    color: var(--k12calc-brand-secondary) !important;
}
.k12calc-tco-breakdown-charts-container {
    margin-top: 25px;
}
.k12calc-tco-breakdown-charts-container .k12calc-chart-wrapper {
    min-height: 200px;
    max-height: 250px;
}

@media (max-width: 767px) {
    #k12calc-cart-tco-section .k12calc-form-group label {
        font-size: 0.9em;
    }
    #k12calc-num-carts-tco {
        width: 80px;
    }
    .k12calc-cart-tco-headers,
    .k12calc-cart-tco-row {
        grid-template-columns: minmax(120px, 0.8fr) repeat(3, minmax(0, 1fr));
        gap: 5px; /* Reduce gap on mobile */
    }
     .k12calc-cart-tco-headers > div { /* Headers in TCO table */
        font-size: 0.8em; /* Smaller header text */
    }
    .k12calc-cart-tco-row > div {
        font-size: 0.9em; /* Smaller data values in TCO table */
        padding: 6px 3px;
    }
    .k12calc-cart-tco-row > div:not(:first-child) {
        padding-right: 5px;
    }
    .k12calc-tco-breakdown-charts-container {
        grid-template-columns: 1fr; /* Stack charts on mobile */
    }
}


.k12calc-report-hidden-host {
    /* Keep the report DOM isolated from HubSpot/module styling while remaining off-screen */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 8.5in;
    max-width: 8.5in;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    overflow: visible;
    margin: 0 auto;
}

.k12calc-report-wrapper {
    width: 8.5in;
    max-width: 8.5in;
    min-width: 8.5in;
    box-sizing: border-box;
    padding: 0.25in 0.5in 0.5in 0.5in;
    background: #ffffff;
    color: var(--k12calc-text-dark);
    font-family: var(--k12calc-font-family);
    font-size: 12px;
    line-height: 1.5;
    margin: 0 auto;
}

.k12calc-report-wrapper * {
    box-sizing: border-box;
}

/* Hard page break sentinel (CSS-driven, no html2pdf 'before' needed) */
.k12calc-report-hardbreak {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    break-before: page;
    page-break-before: always;
}

.k12calc-report-section {
    margin-bottom: 28px; /* slightly tighter for better pagination */
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Stronger keep-together hints for typical blocks */
.k12calc-report-keep-together,
.k12calc-report-table,
.k12calc-report-chart,
.k12calc-report-wrapper .card,
.k12calc-report-wrapper .k12calc-cost-table,
.k12calc-report-wrapper .k12calc-time-lost-table-annual,
.k12calc-report-wrapper .k12calc-time-lost-table-5year {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Try to keep table rows intact when possible */
.k12calc-report-table tr { break-inside: avoid; page-break-inside: avoid; }

.k12calc-report-page-break {
    /* Marker class used by html2pdf's pagebreak.before logic; no CSS break here to avoid double breaks */
}

.k12calc-report-section.k12calc-report-cover,
.k12calc-report-section:first-child {
    break-before: auto;
    page-break-before: auto;
}

.k12calc-report-subsection-break {
    /* Marker for html2pdf pagebreak.before; avoid adding CSS break to prevent double breaks */
    break-inside: avoid;
    page-break-inside: avoid;
}

.k12calc-report-cover {
    padding: 22px; /* tighten to fit cover + summary on page one */
    border-radius: var(--k12calc-border-radius);
    background: linear-gradient(135deg, rgba(var(--k12calc-brand-primary-rgb), 0.08), rgba(27,166,167,0.08));
    border: 1px solid rgba(var(--k12calc-brand-primary-rgb), 0.15);
}

.k12calc-report-title {
    margin: 0 0 6px;
    font-size: 1.7em; /* slightly reduced */
    color: var(--k12calc-brand-primary-dark);
}

.k12calc-report-subtitle {
    margin: 0 0 12px;
    font-size: 0.95em;
    color: var(--k12calc-text-light);
    font-weight: 500;
}

.k12calc-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.9em;
    color: var(--k12calc-text-light);
}

.k12calc-report-meta span {
    background: rgba(var(--k12calc-brand-primary-rgb), 0.12);
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--k12calc-brand-primary-dark);
    font-weight: 600;
}

.k12calc-report-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.k12calc-report-highlight {
    background: #ffffff;
    border-radius: var(--k12calc-border-radius);
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--k12calc-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.k12calc-report-highlight-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--k12calc-text-light);
}

.k12calc-report-highlight-value {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--k12calc-text-dark);
}

.k12calc-report-highlight.tone-warn {
    border-color: rgba(238,45,105,0.25);
}

.k12calc-report-highlight.tone-warn .k12calc-report-highlight-value {
    color: var(--k12calc-brand-accent);
}

.k12calc-report-highlight.tone-info {
    border-color: rgba(var(--k12calc-brand-primary-rgb), 0.25);
}

.k12calc-report-highlight.tone-info .k12calc-report-highlight-value {
    color: var(--k12calc-brand-primary);
}

.k12calc-report-highlight.tone-success {
    border-color: rgba(27,166,167,0.25);
}

.k12calc-report-highlight.tone-success .k12calc-report-highlight-value {
    color: var(--k12calc-brand-secondary);
}

.k12calc-report-intro {
    margin: 0;
    font-size: 0.95em;
    color: var(--k12calc-text-medium);
}

.k12calc-report-wrapper .card {
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.08);
}

.k12calc-report-wrapper .card:not(:last-child) {
    margin-bottom: 24px;
}

.k12calc-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 0.92em;
}

.k12calc-report-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(var(--k12calc-brand-primary-rgb), 0.08);
    color: var(--k12calc-brand-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.k12calc-report-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: top;
}

.k12calc-report-table tbody tr:last-child td {
    border-bottom: none;
}

.k12calc-report-table tbody td:nth-child(2) {
    font-weight: 600;
    color: var(--k12calc-text-dark);
}

.k12calc-report-table tbody td:last-child {
    color: var(--k12calc-text-light);
}

.k12calc-report-chart {
    margin: 0 0 28px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.k12calc-report-chart img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--k12calc-border-radius);
    background: #fff;
    box-shadow: var(--k12calc-box-shadow);
}

.k12calc-report-chart figcaption {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--k12calc-text-light);
    text-align: center;
}

.k12calc-report-note {
    margin: 12px 0 0;
    font-size: 0.85em;
    color: var(--k12calc-text-light);
    font-style: italic;
}

.k12calc-report-section-title {
    margin: 0 0 12px;
    font-size: 1.25em; /* slightly reduced for print compactness */
    color: var(--k12calc-brand-primary-dark);
}

/* Compact the Executive Summary so it fits with the cover on page one */
.k12calc-report-exec-summary {
    margin-top: 8px;
}
.k12calc-report-exec-summary .k12calc-report-table thead th { padding: 8px 10px; font-size: 0.95em; }
.k12calc-report-exec-summary .k12calc-report-table tbody td { padding: 8px 10px; font-size: 0.95em; }
.k12calc-report-exec-summary .k12calc-report-section-title { margin-bottom: 10px; }

/* Make Tier 1 more page-friendly in print */
.k12calc-report-wrapper #k12calc-tier1-summary { font-size: 0.97em; }
.k12calc-report-wrapper #k12calc-tier1-summary .k12calc-glance-grid { gap: 14px; }
.k12calc-report-wrapper #k12calc-tier1-summary .k12calc-glance-metric { padding: 12px; }
.k12calc-report-wrapper #k12calc-tier1-summary .k12calc-glance-value { font-size: 1.6em; }

.k12calc-report-input-value {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 10px;
    background: var(--k12calc-bg-light);
    border-radius: var(--k12calc-border-radius);
    font-weight: 600;
    color: var(--k12calc-text-medium);
    border: 1px solid rgba(0,0,0,0.05);
}

.k12calc-report-inline-note {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.9em;
    color: var(--k12calc-text-light);
    font-style: italic;
}

.k12calc-report-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.85em;
    color: var(--k12calc-text-light);
}

.k12calc-report-footer .k12calc-app-footer {
    text-align: center;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.k12calc-report-wrapper .k12calc-small-multiples-container,
.k12calc-report-wrapper .k12calc-cost-table,
.k12calc-report-wrapper .k12calc-time-lost-table-annual,
.k12calc-report-wrapper .k12calc-time-lost-table-5year {
    break-inside: avoid;
    page-break-inside: avoid;
}

.k12calc-report-wrapper .k12calc-small-multiples-container {
    grid-template-columns: 1fr 1fr; /* annual and 5-year side-by-side */
    gap: 14px;
    overflow: visible;
}

.k12calc-report-wrapper #k12calc-cost-small-multiples-section .k12calc-small-multiples-container {
    grid-template-columns: 1fr 1fr;
}

.k12calc-report-wrapper .k12calc-small-multiple-chart {
    max-height: none;
    margin-bottom: 0;
}

.k12calc-report-wrapper .k12calc-small-multiple-period {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

/* Compact TCO + Labor pair to fit on one page */
.k12calc-report-compact-pair h2.k12calc-report-section-title { margin-top: 8px; margin-bottom: 10px; }
.k12calc-report-compact-pair .k12calc-report-table thead th { padding: 8px 10px; }
.k12calc-report-compact-pair .k12calc-report-table tbody td { padding: 8px 10px; }

.k12calc-report-wrapper .k12calc-small-multiple-period .k12calc-bar-pair,
.k12calc-report-wrapper .k12calc-bar-wrapper {
    width: 100%;
}
#k12calc-tier3-content .k12calc-deep-dive-tabs {
    margin-top: 20px;
}