/* --- Global design tokens (variables) --- */
:root {
/* --- Core palette ---  */
--c-black:               #000;                         /* text on light bg */
--c-white:               #fff;                         /* text on dark bg */
--c-grey-90:             #e0e0e0;                      /* light-grey used in lists */
--c-grey-70:             #cccccc;                      /* medium-grey for subtitles */
--c-grey-50:             #f0f0f0;                      /* very light grey (overlay text) */
--c-accent:              var(--ghost-accent-color);
--c-accent-soft:         color-mix(in srgb, red 40%, #ffffff 60%);
--c-accent-strong:       color-mix(in srgb, red 80%, #000000 20%);
--c-hover:               #0ec509;                      /* CTA hover colour */

/* --- Layout width overrides --- */
--content-width:         960px;                        /* main content width (up from 720px) */
--container-width:       1400px;                       /* overall container width (up from 1200px) */

/* --- Calculator-specific variables --- */
--calc-bg:               #000000;
--calc-text:             #f3f4f6;
--calc-header-bg:        #172554;
--calc-header-border:    #1e3a8a;
--calc-header-text:      #bfdbfe;
--calc-input-bg:         #1f2937;
--calc-input-border:     #374151;
--calc-card-shadow:      0 4px 6px -1px rgba(0, 0, 0, 0.5);
--calc-blue:             #3b82f6;
--calc-blue-light:       #60a5fa;
--calc-gray-light:       #9ca3af;
--calc-tooltip-bg:       #374151;
--calc-tooltip-border:   #6b7280;
--calc-max-width:        1400px;

/* --- DIY Calculator component variables (mapped to existing) --- */
--diy-bg-card:           var(--calc-input-bg);    /* #1e293b mapped to existing */
--diy-bg-dark:           var(--calc-bg);          /* #0f172a mapped to existing */
--diy-border:            var(--calc-input-border); /* #334155 mapped to existing */
--diy-text-main:         var(--calc-text);        /* #ffffff mapped to existing */
--diy-text-muted:        var(--calc-gray-light);  /* #94a3b8 mapped to existing */
--diy-danger:            #ef4444;                 /* Red - new but standard */
--diy-success:           #22c55e;                 /* Green - new but standard */
--diy-warning:           #eab308;                 /* Yellow - new but standard */
--diy-black:             var(--c-black);          /* #000000 mapped to existing */

/* ---  UI colours ---  */
--bg-page:               var(--bg, #151719);           /* fallback for browsers that ignore the dark-mode vars */
--bg-overlay:            rgba(0,0,0,.85);
--bg-overlay-mid:        rgba(0,0,0,.6);
--bg-overlay-light:      rgba(0,0,0,.1);
--bg-video:              #000;
--bg-stat-circle:        rgba(255,255,255,.03);
--bg-stat-border:        rgba(255,255,255,.15);
--bg-pillars-featured:   rgba(255,215,0,.05);
--bg-feature-border:     rgba(255,255,255,.1);
--bg-testimonial-border: rgba(255,255,255,.1);
--bg-float-shadow:       rgba(0,0,0,.5);
--bg-hero-gradient:      linear-gradient(90deg,
                            rgba(0,0,0,.85) 0%,
                            rgba(0,0,0,.6) 45%,
                            rgba(0,0,0,.1) 100%);

/* ---  Typography helpers ---  */
--fw-bold:               800;
--fw-semi:               700;
--fw-regular:            400;
--fs-base:               2.5rem;   /* used for CTA button */
--fs-h1:                 2.8rem;
--fs-h2:                 2.5rem;
--fs-h3:                 2rem;
--fs-subhead:            1.5rem;
--fs-body:               1.8rem;
--fs-stat-num:           5rem;
--fs-stat-label:         1.4rem;
--fs-feature-label:      1.6rem;
--fs-feature-desc:       1.4rem;
--fs-pillar-title:       2rem;
--fs-pillar-desc:        1.6rem;

/* --- Layout helpers ---  */
--radius-sm:             4px;
--radius-md:             8px;
--shadow-cta:            0 4px 14px rgba(0,0,0,.3);
--shadow-float:          0 20px 50px var(--bg-float-shadow);
--transition-fast:      transform .2s ease;
--gap-lg:                60px;
--gap-md:                30px;
}

html {
    font-size: 100%; /* Reset to browser default 16px instead of Ghost's 62.5% (10px) */
}

/* --- Dark-mode overrides --- */
@media (prefers-color-scheme: dark) {
:root {
    --bg-page:           #000;
    --c-black:           #000;                /* on dark bg we need white “black” */
    --c-white:           #fff;
    --c-accent:          var(--ghost-accent-color);
    --c-accent-soft:     var(--c-accent);
}
}

/* --- Core utilities & helpers --- */
.accent      { color: var(--c-accent); }
.hover       { color: var(--c-hover); }
.bold        { font-weight: var(--fw-bold); }

.center-text { text-align: center; margin: 6rem 0 4rem; }

/* --- Video hero section --- */
.video-container {
position: relative;
width: auto;
height: 45vh;
min-height: 450px;
overflow: hidden;
margin-top: 140px;
background-color: var(--bg-video);
z-index: 1;
}
.video-container video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.vendor-logo-grid--split {
    /* Two-column layout: large logo on the left (spans two rows),
       two smaller logos stacked on the right. Using CSS Grid keeps
       the left logo height equal to the combined height of the
       two right logos + gap. */
    --logo-small-h: 60px; /* height for each small logo */
    --logo-stack-gap: 20px; /* gap between stacked logos */
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    gap: var(--logo-stack-gap);
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.vendor-logo-grid--split .vendor-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vendor-logo-grid--split .vendor-logo-item img {
    height: var(--logo-small-h); /* default size for the small logos */
    width: auto;
    margin: 0;
    display: block;
}

.vendor-logo-grid--split .vendor-logo-item--large img,
.vendor-logo-grid--split .vendor-logo-item:nth-child(1) img {
    height: 160px !important; /* large ProAdvisor */
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}
/* Place large logo in left column and make it span two rows so its
   visual height matches two stacked small logos on the right */
.vendor-logo-grid--split .vendor-logo-item--large {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vendor-logo-grid--split .vendor-logo-item--stacked:nth-child(2) { grid-column: 2; grid-row: 1; }
.vendor-logo-grid--split .vendor-logo-item--stacked:nth-child(3) { grid-column: 2; grid-row: 2; }

/* Compute a large logo height that equals two small logos + gap for visual balance */
.vendor-logo-grid--split .vendor-logo-item--large img {
    height: calc(var(--logo-small-h) * 2 + var(--logo-stack-gap)) !important;
}

@media (max-width: 768px) {
    /* Mobile: stack vertically for narrow screens */
    .vendor-logo-grid--split { grid-template-columns: 1fr; gap: var(--gap-lg); }
    .vendor-logo-grid--split .vendor-logo-item--large { grid-row: auto; grid-column: auto; }
    .vendor-logo-grid--split .vendor-logo-item--large img { height: 120px !important; }
}
.tech-subtext {
opacity: 1;
max-width: 800px;
margin: 0 auto 4rem;
line-height: 1.6;
}
.tech-subtext strong { color: inherit; }

.vendor-logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--gap-lg);
padding: 10px 0;
}
.vendor-logo-item img {
height: 40px;
width: auto;
opacity: .8;
display: block;
}
.vendor-logo-item img:hover {
opacity: 1;
transform: scale(1.05);
transition: var(--transition-fast);
}

/* Utility: allow individual vendor logos to be enlarged when needed.
   Usage: add `vendor-logo-item--large` to the logo wrapper in markup. */
.vendor-logo-item--large img {
    /* larger size by default; use this helper when you need emphasis */
    height: 220px !important; /* desktop */
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block;
}
@media (max-width: 768px) {
    .vendor-logo-item--large img {
        height: 100px !important; /* slightly smaller on mobile */
    }
}

/* vendor logo split/row layout handled earlier (flex variant) */

/* --- Agitation / Pillars grids --- */
.agitation-grid,
.pillars-grid {
display: grid;
gap: var(--gap-lg);
align-items: center;
}
.agitation-grid { grid-template-columns: 1fr 1fr; }
.pillars-grid   { grid-template-columns: repeat(3,1fr); }

.pillars-grid--two {
grid-template-columns: repeat(2,1fr);
max-width: 900px;
margin: 0 auto;
}

/* --- Pillar card  --- */
.pillar-card {
border: 1px solid var(--bg-stat-border);
padding: 30px;
border-radius: var(--radius-md);
background: var(--bg-stat-circle);
transition: var(--transition-fast);
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--c-accent);
}
.pillar-card--featured {
max-width: 900px;
margin: 0 auto;
border-color: var(--c-accent);
background: var(--bg-pillars-featured);
}
.pillar-title {
font-size: var(--fs-pillar-title);
margin-bottom: 1.5rem;
color: var(--c-accent);
}
.pillar-desc {
font-size: var(--fs-pillar-desc);
line-height: 1.5;
opacity: .85;
}

/* --- Stat circle --- */
.stat-card {
border: 2px solid var(--c-accent);
border-radius: 50%;
width: 250px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
.stat-number {
font-size: var(--fs-stat-num);
font-weight: var(--fw-semi);
color: var(--c-accent);
line-height: 1;
}
.stat-label {
font-size: var(--fs-stat-label);
margin-top: 10px;
opacity: .8;
}

/* --- Section headline --- */
.section-headline {
font-size: var(--fs-h1);
line-height: 1.2;
margin-bottom: 2rem;
color: var(--c-white);
}

/* ---  Feature list --- */
.feature-list {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 20px;
margin: 2rem 0;
}
.feature-item {
display: flex;
flex-direction: column;
padding: 15px 0;
border-bottom: 1px solid var(--bg-feature-border);
}
.feature-label {
font-size: var(--fs-feature-label);
font-weight: var(--fw-semi);
color: var(--c-accent);
margin-bottom: .5rem;
}
.feature-desc {
font-size: var(--fs-feature-desc);
opacity: .75;
}

/* --- Pillar tagline --- */
.pillar-tagline {
font-size: 1.8rem;
font-weight: var(--fw-semi);
color: var(--c-white);
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,215,0,.3);
}

/* --- Body / Highlight --- */
.body-text {
font-size: var(--fs-body);
line-height: 1.6;
margin-bottom: 2rem;
opacity: .9;
}
.highlight-text {
border-left: 4px solid var(--c-accent);
padding-left: 20px;
font-style: italic;
opacity: 1;
}

/* --- Founder card --- */
.founder-card {
display: flex;
align-items: center;
gap: 40px;
max-width: 900px;
margin: 0 auto;
}
.founder-photo {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--c-accent);
}
.founder-name {
font-size: 1.4rem;
color: var(--c-accent);
font-weight: var(--fw-semi);
}

/* --- Who-list --- */
.who-list {
list-style: none;
max-width: 700px;
margin: 0 auto;
padding: 0;
}
.who-list li {
font-size: 1.6rem;
padding: 15px 0 15px 30px;
border-bottom: 1px solid var(--bg-feature-border);
position: relative;
}
.who-list li::before {
content: "✓";
color: var(--c-accent);
position: absolute;
left: 0;
font-weight: var(--fw-semi);
}

/* --- Testimonial name --- */
.testimonial-name {
font-size: 1.4rem;
color: var(--c-accent);
font-weight: var(--fw-semi);
display: block;
margin-top: 1rem;
}

/* --- Split-screen layout --- */
.split-screen-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 60px 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.text-content {
flex: .8;
min-width: 300px;
}
.image-content {
flex: 1.2;
display: flex;
justify-content: center;
}
.floating-laptop {
width: 100%;
max-width: 800px;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-float);
}
.text-content h2 {
font-size: var(--fs-h2);
font-weight: var(--fw-semi);
margin-bottom: 1rem;
color: var(--c-white);
line-height: 1.1;
}
.text-content .subhead {
font-size: var(--fs-subhead);
color: var(--c-grey-70);
margin-bottom: 2rem;
line-height: 1.5;
}

/* --- Checklist --- */
.checklist li {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--c-grey-90);
display: flex;
align-items: center;
}

/* --- Media queries (mobile tweaks) --- */
@media (max-width: 768px) {
.split-screen-container { flex-direction: column-reverse; text-align: left; gap: 40px; }
.text-content h2        { font-size: 2rem; }
.video-container        { height: auto; min-height: 400px; }
.video-overlay          { position: relative; background: rgba(0,0,0,.8); padding: 40px 20px; }
.overlay-content        { padding-left: 0; text-align: center; margin: 0 auto; }
.agitation-grid,
.pillars-grid           { grid-template-columns: 1fr; gap: 40px; }
.agitation-grid         { display: flex; flex-direction: column-reverse; }
.section-headline       { font-size: 2.4rem; }
.pillars-grid--two      { grid-template-columns: 1fr; }
.feature-list           { grid-template-columns: 1fr; }
.founder-card           { flex-direction: column; text-align: center; }
.gh-mobilemenu,
.gh-head-menu,
.gh-head-menu .nav li a { color: var(--c-white) !important; }
.gh-head-menu .nav li a:hover,
.gh-head-menu .nav li a:focus { color: var(--c-white) !important; }
}
@media (max-width: 600px) {
.vendor-logo-grid { gap: 40px; flex-direction: column; }
}

/* --- Misc / Ghost-specific overrides --- */
a,
.button { color: var(--c-accent); }

.gh-search svg {
fill: transparent !important;
stroke: var(--c-white) !important;
stroke-width: 2;
}
.gh-head-open .gh-search svg { stroke: var(--c-white) !important; }

.gh-head-open .gh-burger::before,
.gh-head-open .gh-burger::after {
background-color: var(--c-white) !important;
}

/* --- Mobile menu: force full-screen dark overlay and white icons --- */
/* These overrides are intentionally specific and use !important to beat the
     built `screen.css` rules which set backgrounds and fills. Without these the
     menu can show a white box behind icons and leave page content visible. */
.gh-head-open #gh-head .gh-head-menu {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-overlay) !important;
    z-index: 99999 !important;
    padding-top: 88px !important; /* preserve header space */
}

.gh-head-open #gh-head .gh-head-actions,
.gh-head-open #gh-head .gh-head-actions * {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force SVGs and burger pseudo elements to use white stroke/fill and no white bg */
.gh-head-open #gh-head .gh-head-actions svg,
.gh-head-open #gh-head .gh-search svg,
.gh-head-open #gh-head .gh-burger svg,
.gh-head-open #gh-head .gh-burger::before,
.gh-head-open #gh-head .gh-burger::after,
.gh-head-open #gh-head .gh-head-menu svg {
    fill: var(--c-white) !important;
    stroke: var(--c-white) !important;
    color: var(--c-white) !important;
    background: transparent !important;
}

/* Hide the inline search icon inside the menu list (keep the header search visible) */
.gh-head-open #gh-head .gh-head-menu .gh-search {
    display: none !important;
}

/* --- Search input (dark mode) ---
     Ensure the search input and Cancel control use dark-mode-friendly styles
     when the header/menu is open. These are intentionally broad to cover the
     Ghost-inserted search UI across themes. */
.gh-head-open input[type="search"],
.gh-head-open #gh-head input[type="search"],
.gh-head-open #gh-head .gh-head-menu input[type="search"],
.gh-head-open .gh-head-menu input[type="search"] {
    background: rgba(255,255,255,0.06) !important; /* subtle light on dark */
    color: var(--c-white) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 720px !important;
}

.gh-head-open input[type="search"]::placeholder,
.gh-head-open #gh-head input[type="search"]::placeholder,
.gh-head-open #gh-head .gh-head-menu input[type="search"]::placeholder {
    color: rgba(255,255,255,0.8) !important;
    opacity: 1 !important;
}
.gh-head-open input[type="search"]::-webkit-input-placeholder { color: rgba(255,255,255,0.8) !important; }
.gh-head-open input[type="search"]::-moz-placeholder { color: rgba(255,255,255,0.8) !important; }
.gh-head-open input[type="search"]:-ms-input-placeholder { color: rgba(255,255,255,0.8) !important; }

/* Cancel text/button styling (cover likely class names) */
.gh-head-open .search-cancel,
.gh-head-open .gh-search-cancel,
.gh-head-open .gh-head-menu .search-cancel,
.gh-head-open .gh-head-menu .gh-search-cancel,
.gh-head-open button.search-cancel,
.gh-head-open button.gh-search-cancel {
    color: var(--c-white) !important;
    background: transparent !important;
}

.gh-head,
.gh-head.is-sticky,
.gh-head.is-scrolled {
background: transparent !important;
}

/* --- Head logo --- */
.gh-head-logo img { max-height: 60px; width: auto; }
.gh-head-logo { padding: 0; }

/* --- Call to Action buttons --- */
.cta-container   { margin:  auto; text-align: center; }
.cta-btn {
display: inline-block;
padding: 1rem 2rem;
background-color: var(--c-accent);
color: #F2F2F2; /* var(--c-black) !important; */
border-radius: var(--radius-md);
text-decoration: none !important;
font-size: var(--fs-base);
font-weight:  var(--fw-semi); /* var(--fw-bold); */
box-shadow: var(--shadow-cta);
border: none;
transition: var(--transition-fast);
cursor: pointer;
}

.cta-btn:hover,
.cta-btn:focus {
background-color: var(--c-hover);
color: var(--c-black) !important;
    transform: translateY(-2px);
}  

/* Contact form styling - desktop side-by-side layout, mobile stacked */
.contact-form-container {
    max-width: 900px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: 3rem 4rem;
    margin: 4rem auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    transition: all .3s ease;
}

.contact-form-container:hover {
    border-color: var(--c-accent);
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
}

.contact-form-container form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-group {
    margin-bottom: 0;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    color: var(--c-accent);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,.4);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    color: var(--c-white);
    font-size: 1.6rem;
    padding: 1.2rem 1.6rem;
    font-family: inherit;
    transition: all .3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--c-accent);
    outline: none;
    background: rgba(0,0,0,.6);
    box-shadow: 0 0 0 3px rgba(0,128,0,.1);
    transform: translateY(-1px);
}

.form-group textarea {
    min-height: 160px;
    resize: vertical;
}

.submit-btn {
    grid-column: 1 / -1;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    padding: 1.6rem 4rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 6px 20px rgba(0,128,0,.3);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .5rem;
}

.submit-btn:hover {
    background: var(--c-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,128,0,.5);
}

.submit-btn:active {
    transform: translateY(-1px);
}

.submit-btn:disabled {
    background: rgba(255,255,255,.15);
    cursor: not-allowed;
    opacity: .5;
    transform: none;
}

@media (max-width: 768px) {
    .contact-form-container {
        padding: 2.5rem;
        margin: 2rem 1rem;
    }
    
    .contact-form-container form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .submit-btn {
        padding: 1.4rem 2rem;
        font-size: 1.6rem;
    }
}

/* footer */
.gh-powered-by {
display: none !important;
}

/* ===== WIDER LAYOUT OVERRIDES ===== */

/* Apply wider container to .inner elements */
.outer .inner {
    max-width: 1400px !important;
}

/* FORCE wider content by completely overriding the grid */
.gh-canvas,
.kg-width-full.kg-content-wide {
    --gap: max(4vmin, 20px) !important;
    --main: min(960px, 100% - var(--gap) * 2) !important;
    --wide: minmax(0, calc((1400px - 960px) / 2)) !important;
    --full: minmax(var(--gap), 1fr) !important;
    display: grid !important;
    grid-template-columns:
        [full-start] var(--full)
        [wide-start] var(--wide)
        [main-start] var(--main) [main-end]
        var(--wide) [wide-end]
        var(--full) [full-end] !important;
}

/* Tablet and smaller desktop adjustments */
@media (max-width: 1024px) {
    .gh-canvas,
    .kg-width-full.kg-content-wide {
        --gap: max(2vmin, 16px) !important;
        --main: min(880px, 100% - var(--gap) * 2) !important;
        --wide: minmax(0, calc((1024px - 880px) / 2)) !important;
    }
}

/* Ultra-wide screen adjustments - more conservative sizing */
@media (min-width: 1400px) {
    .gh-canvas,
    .kg-width-full.kg-content-wide {
        --main: min(1000px, 100% - var(--gap) * 2) !important;
        --wide: minmax(0, calc((1200px - 1000px) / 2)) !important;
    }
}

/* Ensure calculator and embedded content can break out to full width */
.gh-content .calculator-breakout {
    grid-column: full-start / full-end !important;
    max-width: none !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* ============================================
   CALCULATOR STYLES
   ============================================ */

/* Full-width breakout container */
.gh-content .calculator-breakout {
    grid-column: full-start / full-end !important;
    max-width: none !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-color: var(--calc-bg);
    padding: 0;
    overflow-x: hidden;
}

/* Main calculator container */
.calculator-container {
    max-width: var(--calc-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--calc-bg);
    color: var(--calc-text);
}

/* Header */
.calculator-container .calc-header {
    background-color: var(--calc-header-bg);
    border-bottom: 1px solid var(--calc-header-border);
    padding: 2rem 0;
}

.calculator-container .calc-header > div {
    max-width: var(--calc-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.calculator-container .calc-header h2 {
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--calc-text);
    margin: 0 0 0.5rem 0;
}

.calculator-container .calc-header p {
    font-size: 1.125rem;
    color: #9ca3af;
    margin: 0;
}

/* Main content area */
.calculator-container .calc-main {
    max-width: var(--calc-max-width);
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Calculator Grid & Layout */
.calculator-container .calc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .calculator-container .calc-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.calculator-container .calc-col-left,
.calculator-container .calc-col-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Calculator Cards */
.calculator-container .calc-card {
    background-color: var(--calc-input-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--calc-shadow);
}

.calculator-container .calc-card-title {
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    color: var(--calc-text);
    border-bottom: 1px solid #374151;
    padding-bottom: 0.5rem;
}

.calculator-container .calc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px solid #374151;
    padding-bottom: 0.5rem;
}

.calculator-container .calc-card-header .calc-card-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Input Groups */
.calculator-container .calc-input-group {
    margin-bottom: 1rem;
}

.calculator-container .calc-input-group:last-child {
    margin-bottom: 0;
}

.calculator-container .calc-border-bottom {
    border-bottom: 1px solid #1f2937;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.calculator-container .calc-label {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--fw-medium);
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.calculator-container .calc-input-wrapper {
    position: relative;
    width: 100%;
}

.calculator-container .calc-dollar-sign {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    color: #9ca3af;
}

.calculator-container .calc-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    padding-left: 1.75rem;
    background-color: var(--calc-bg);
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    color: var(--calc-text);
}

.calculator-container .calc-input:focus {
    outline: none;
    border-color: var(--calc-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.calculator-container .calc-help-text {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Sliders */
.calculator-container .calc-slider {
    width: 100%;
    height: 0.5rem;
    background-color: #374151;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
}

.calculator-container .calc-slider::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-blue);
    border-radius: 50%;
    cursor: pointer;
}

.calculator-container .calc-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.calculator-container .calc-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    color: #9ca3af;
}

.calculator-container .calc-slider-value {
    text-align: center;
    margin-top: 0.5rem;
}

.calculator-container .calc-slider-value span {
    font-weight: var(--fw-bold);
    color: var(--calc-blue);
    font-size: 1rem;
}

.calculator-container .calc-slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #9ca3af;
}

.calculator-container .calc-slider-current {
    font-weight: var(--fw-bold);
    color: var(--calc-blue);
    font-size: 1.125rem;
}

/* Checkboxes */
.calculator-container .calc-checkbox-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.calculator-container .calc-checkbox-group:last-child {
    margin-bottom: 0;
}

.calculator-container .calc-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-bg);
    border: 1px solid #4b5563;
    border-radius: 0.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.calculator-container .calc-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.calculator-container .calc-checkbox-label {
    margin-left: 0.75rem;
    font-size: 0.875rem;
}

.calculator-container .calc-checkbox-label label {
    font-weight: var(--fw-medium);
    color: #d1d5db;
    display: block;
}

.calculator-container .calc-checkbox-label p {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* Results Section */
.calculator-container .calc-results-title {
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--calc-text);
    margin-bottom: 1.5rem;
}

.calculator-container .calc-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .calculator-container .calc-comparison-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* DIY Cost Block */
.calculator-container .calc-diy-block {
    background-color: rgba(127, 29, 29, 0.3);
    padding: 1.0rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(127, 29, 29, 0.5);
    max-width: 250px;
}

.calculator-container .calc-block-label {
    color: #fca5a5;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

.calculator-container .calc-block-total {
    font-size: 2.25rem;
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}

.calculator-container .calc-diy-block .calc-block-total {
    color: #f87171;
}

.calculator-container .calc-block-subtitle {
    font-size: 0.875rem;
    color: #fecaca;
}

.calculator-container .calc-breakdown {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #d1d5db;
}

.calculator-container .calc-breakdown-row {
    display: flex;
    justify-content: space-between;
}

.calculator-container .calc-breakdown-row span:last-child {
    font-weight: var(--fw-medium);
    color: var(--calc-text);
}

.calculator-container .calc-breakdown-total {
    border-top: 1px solid rgba(127, 29, 29, 0.5);
    padding-top: 0.25rem;
}

.calculator-container .calc-diy-block .calc-breakdown-total span:last-child {
    color: #fca5a5;
}

/* Professional CPA Block */
.calculator-container .calc-pro-block {
    background-color: var(--calc-bg);
    padding: 1.0rem;
    border-radius: 0.75rem;
    border: 1px solid #374151;
    max-width: 250px;
}

.calculator-container .calc-pro-block .calc-block-label {
    color: #93c5fd;
}

.calculator-container .calc-pro-block .calc-block-total {
    color: var(--calc-text);
}

.calculator-container .calc-pro-block .calc-block-subtitle {
    color: #9ca3af;
}

.calculator-container .calc-pro-block .calc-breakdown-total {
    border-top: 1px solid #4b5563;
}

.calculator-container .calc-pro-block .calc-breakdown-total span:last-child {
    color: #86efac;
}

/* Savings Block */
.calculator-container .calc-savings-block {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25));
    padding: 1.0rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(16, 185, 129, 0.6);
    max-width: 250px;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.calculator-container .calc-savings-block .calc-block-label {
    color: #6ee7b7;
}

.calculator-container .calc-savings-total {
    color: #10b981;
    font-size: 2.5rem;
}

.calculator-container .calc-savings-block .calc-block-subtitle {
    color: #a7f3d0;
}

.calculator-container .calc-savings-block .calc-breakdown-total {
    border-top: 1px solid rgba(16, 185, 129, 0.5);
}

.calculator-container .calc-savings-block .calc-breakdown-total span:last-child {
    color: #6ee7b7;
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
}

/* Value Gained Section within Savings Block */
.calculator-container .calc-value-gained {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 185, 129, 0.3);
}

.calculator-container .calc-value-title {
    font-size: 0.875rem;
    font-weight: var(--fw-semibold);
    color: #6ee7b7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* Pro Tip Callout */
.calculator-container .calc-protip {
    background: linear-gradient(to right, rgba(113, 63, 18, 0.5), rgba(30, 58, 138, 0.5));
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid rgba(234, 179, 8, 0.6);
    box-shadow: var(--calc-shadow);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.calculator-container .calc-protip i {
    color: #fcd34d;
    font-size: 2.25rem;
    margin-top: 0.125rem;
}

.calculator-container .calc-protip-label {
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.calculator-container .calc-protip-text {
    font-size: 1rem;
    color: var(--calc-text);
    font-weight: var(--fw-medium);
    line-height: 1.375;
}

.calculator-container .calc-protip-text strong {
    color: #fef08a;
}

.calculator-container .calc-protip-text strong:last-child {
    color: #86efac;
}

/* CTA Block */
.calculator-container .calc-cta-block {
    background-color: var(--calc-bg);
    border: 1px solid #374151;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--calc-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 768px) {
    .calculator-container .calc-cta-block {
        flex-direction: row;
    }
}

.calculator-container .calc-cta-text {
    text-align: center;
}

@media (min-width: 768px) {
    .calculator-container .calc-cta-text {
        text-align: left;
    }
}

.calculator-container .calc-cta-text h2 {
    margin: 0;
    padding: 0;
    /* font-size: 1.5rem; */
    line-height: 1.2;
}

.calculator-container .calc-cta-text p {
    color: var(--calc-text);
    font-size: 1.35rem;
    margin: 0.25rem 0 0 0;
    padding: 0;
    line-height: 1.3;
    font-weight: bolder;
}

/* Charts Grid */
.calculator-container .calc-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .calculator-container .calc-charts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.calculator-container .calc-chart-title {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    color: var(--calc-text);
}

/* Opportunity Card */
.calculator-container .calc-opportunity-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.calculator-container .calc-opportunity-content {
    text-align: center;
}

.calculator-container .calc-opportunity-icon {
    width: 4rem;
    height: 4rem;
    background-color: rgba(113, 63, 18, 0.5);
    color: #eab308;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    border: 1px solid rgba(161, 98, 7, 0.5);
}

.calculator-container .calc-opportunity-icon i {
    font-size: 1.5rem;
}

.calculator-container .calc-opportunity-title {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    color: var(--calc-text);
    margin-bottom: 0.5rem;
}

.calculator-container .calc-opportunity-hours {
    font-size: 1.875rem;
    font-weight: var(--fw-bold);
    color: var(--calc-text);
    margin-bottom: 0.25rem;
}

.calculator-container .calc-opportunity-subtitle {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.calculator-container .calc-opportunity-revenue {
    border-top: 1px solid #374151;
    padding-top: 1rem;
}

.calculator-container .calc-opportunity-revenue p:first-child {
    font-size: 0.875rem;
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.calculator-container .calc-opportunity-amount {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: #86efac;
}

.calculator-container .calc-opportunity-note {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Strategic Insight */
.calculator-container .calc-insight {
    background-color: var(--calc-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #374151;
}

.calculator-container .calc-insight h4 {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: #e5e7eb;
    margin-bottom: 0.5rem;
}

.calculator-container .calc-insight h4 i {
    color: #eab308;
    margin-right: 0.5rem;
}

.calculator-container .calc-insight p {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.625;
}

.calculator-container .calc-insight #txtOpportunity {
    color: var(--calc-text);
    font-weight: var(--fw-medium);
}

/* Old calculator styles below - keeping for backwards compatibility */

.calculator-container header > div,
.calculator-container main {
    max-width: var(--calc-max-width) !important;
}

/* Input fields */
.calculator-container input[type="number"],
.calculator-container input[type="text"],
.calculator-container select,
.calculator-container textarea {
    padding-left: 1.75rem;
    background-color: var(--calc-bg);
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    color: var(--calc-text);
}

.calc-input:focus {
    outline: none;
    border-color: var(--calc-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.calc-help-text {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Sliders */
.calc-slider {
    width: 100%;
    height: 0.5rem;
    background-color: #374151;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-blue);
    border-radius: 50%;
    cursor: pointer;
}

.calc-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.calc-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    color: #9ca3af;
}

.calc-slider-value {
    text-align: center;
    margin-top: 0.5rem;
}

.calc-slider-value span {
    font-weight: var(--fw-bold);
    color: var(--calc-blue);
    font-size: 1rem;
}

.calc-slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #9ca3af;
}

.calc-slider-current {
    font-weight: var(--fw-bold);
    color: var(--calc-blue);
    font-size: 1.125rem;
}

/* Checkboxes */
.calc-checkbox-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.calc-checkbox-group:last-child {
    margin-bottom: 0;
}

.calc-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--calc-bg);
    border: 1px solid #4b5563;
    border-radius: 0.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.calc-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.calc-checkbox-label {
    margin-left: 0.75rem;
    font-size: 0.875rem;
}

.calc-checkbox-label label {
    font-weight: var(--fw-medium);
    color: #d1d5db;
    display: block;
}

.calc-checkbox-label p {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* Results Section */
.calc-results-title {
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--calc-text);
    margin-bottom: 1.5rem;
}

.calc-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .calc-comparison-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* DIY Cost Block */


.calc-breakdown {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #d1d5db;
}

.calc-breakdown-row {
    display: flex;
    justify-content: space-between;
}

.calc-breakdown-row span:last-child {
    font-weight: var(--fw-medium);
    color: var(--calc-text);
}

.calc-breakdown-total {
    border-top: 1px solid rgba(127, 29, 29, 0.5);
    padding-top: 0.25rem;
}

.calc-diy-block .calc-breakdown-total span:last-child {
    color: #fca5a5;
}

/* Pro Tip Callout */
.calc-protip {
    background: linear-gradient(to right, rgba(113, 63, 18, 0.5), rgba(30, 58, 138, 0.5));
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid rgba(234, 179, 8, 0.6);
    box-shadow: var(--calc-shadow);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.calc-protip i {
    color: #fcd34d;
    font-size: 2.25rem;
    margin-top: 0.125rem;
}

.calc-protip-label {
    font-size: 1.30rem;
    font-weight: var(--fw-bold);
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.calc-protip-text {
    font-size: 1.3rem;
    color: var(--calc-text);
    font-weight: var(--fw-medium);
    line-height: 1.375;
}

.calc-protip-text strong {
    color: #fef08a;
}

.calc-protip-text strong:last-child {
    color: #86efac;
}

/* CTA Block */
.calc-cta-block {
    background-color: var(--calc-bg);
    border: 1px solid #374151;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--calc-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 768px) {
    .calc-cta-block {
        flex-direction: row;
    }
}

.calc-cta-text {
    text-align: center;
}

@media (min-width: 768px) {
    .calc-cta-text {
        text-align: left;
    }
}

.calc-cta-text h2 {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


/* Charts Grid */
.calc-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .calc-charts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.calc-chart-title {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    color: var(--calc-text);
}

/* Opportunity Card */
.calc-opportunity-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.calc-opportunity-content {
    text-align: center;
}

.calc-opportunity-icon {
    width: 4rem;
    height: 4rem;
    background-color: rgba(113, 63, 18, 0.5);
    color: #eab308;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    border: 1px solid rgba(161, 98, 7, 0.5);
}

.calc-opportunity-icon i {
    font-size: 1.5rem;
}

.calc-opportunity-title {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    color: var(--calc-text);
    margin-bottom: 0.5rem;
}

.calc-opportunity-hours {
    font-size: 1.875rem;
    font-weight: var(--fw-bold);
    color: var(--calc-text);
    margin-bottom: 0.25rem;
}

.calc-opportunity-subtitle {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.calc-opportunity-revenue {
    border-top: 1px solid #374151;
    padding-top: 1rem;
}

.calc-opportunity-revenue p:first-child {
    font-size: 0.875rem;
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.calc-opportunity-amount {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: #86efac;
}

.calc-opportunity-note {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Strategic Insight */
.calc-insight {
    background-color: var(--calc-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #374151;
}

.calc-insight h4 {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: #e5e7eb;
    margin-bottom: 0.5rem;
}

.calc-insight h4 i {
    color: #eab308;
    margin-right: 0.5rem;
}

.calc-insight p {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.625;
}

.calc-insight #txtOpportunity {
    color: var(--calc-text);
    font-weight: var(--fw-medium);
}

/* Old calculator styles below - keeping for backwards compatibility */

.calculator-container header > div,
.calculator-container main {
    max-width: var(--calc-max-width) !important;
}

/* Input fields */
.calculator-container input[type="number"],
.calculator-container input[type="text"],
.calculator-container select,
.calculator-container textarea {
    color: var(--c-white) !important;
    background-color: var(--calc-input-bg) !important;
}

.calculator-container input::placeholder,
.calculator-container textarea::placeholder {
    color: var(--calc-gray-light) !important;
}

.calculator-container input:focus, 
.calculator-container select:focus {
    outline: 2px solid var(--calc-blue-light);
    outline-offset: 2px;
}

/* Range slider */
.calculator-container .slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--calc-blue);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--c-white);
}

/* Cards */
.calculator-container .card-shadow {
    border: 1px solid var(--calc-input-border);
    box-shadow: var(--calc-card-shadow);
}

/* Tooltips */
.calculator-container .tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background-color: var(--calc-tooltip-bg);
    color: var(--c-white);
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid var(--calc-tooltip-border);
}

.calculator-container .has-tooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Pulse animation */
@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

.calculator-container .btn-pulse {
    animation: pulse-blue 2s infinite;
}

/* CTA within calculator */
.calculator-container .cta {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    /* margin: 2rem auto !important; */
    max-width: 600px !important;
}

.calculator-container .cta-container {
    text-align: center !important;
    padding: 0 !important;
}

.calculator-container .cta-container .hook-text,
.calculator-container .calendly-modal-heading {
    font-size: 2.4rem !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    color: var(--c-white) !important;
}

.calculator-container .cta-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: 600px !important;
    padding: 1rem 2.5rem !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin: 0 auto !important;
}

/* Hide empty calendly embed container */
.calculator-container .cta-container > div[id^="calendly-embed"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ============================================
   DIY CALCULATOR COMPONENT STYLES
   ============================================ */

/* Scope Styles to Component ID */
#diy-calculator-component {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--diy-text-main);
    background-color: var(--diy-bg-dark);
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
}
#diy-calculator-component * { box-sizing: border-box; }

/* --- 2. LAYOUT GRID --- */
.diy-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1024px) { .diy-grid { grid-template-columns: 1fr; } }

/* --- 3. COMPONENT STYLES --- */
.diy-card {
    background-color: var(--diy-bg-card);
    border: 1px solid var(--diy-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Typography */
.diy-head {
    color: var(--diy-text-main);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid var(--diy-border);
    padding-bottom: 0.75rem;
}
.diy-label { display: block; color: var(--diy-text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.diy-sub { font-size: 0.8rem; opacity: 0.8; margin-bottom: 1rem; color: var(--diy-text-muted); }
.diy-amount { font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; }
.diy-title-sm { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 0.5rem; }

/* Inputs */
.diy-group { margin-bottom: 1.5rem; }
.diy-input {
    width: 100%;
    background-color: var(--diy-bg-dark);
    border: 1px solid var(--diy-border);
    color: var(--diy-text-main);
    padding: 0.75rem;
    border-radius: 6px;
}
.diy-big-val { font-size: 1.5rem; font-weight: 700; color: var(--diy-text-main); margin-bottom: 0.25rem; }
input[type="range"] { width: 100%; cursor: pointer; }

/* --- 4. RIGHT CONTENT LAYOUTS --- */

/* Row 1: Pro Tip */
.diy-tip {
    border: 1px solid var(--diy-warning);
    background: rgba(234, 179, 8, 0.1);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex; gap: 1rem; align-items: center;
}

/* Row 2: 3-Card Grid */
.diy-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) { .diy-row-3 { grid-template-columns: 1fr; } }

/* Card Themes */
.card-red   { border-color: var(--diy-danger); background: rgba(239, 68, 68, 0.1); }
.card-green { border-color: var(--diy-success); background: rgba(34, 197, 94, 0.1); }
.card-dark  { background: var(--diy-bg-dark); border-color: var(--diy-border); }

/* Text Colors */
.txt-red { color: var(--diy-danger); }
.txt-grn { color: var(--diy-success); }
.txt-yel { color: var(--diy-warning); }
.txt-mut { color: var(--diy-text-muted); }
.txt-wht { color: var(--diy-text-main); }

.flex-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }

/* Row 3: Solution Split */
.diy-row-mix {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}
@media (max-width: 768px) { .diy-row-mix { grid-template-columns: 1fr; } }

/* Row 4: CTA */
.diy-cta {
    background: var(--diy-black);
    border: 1px solid var(--diy-border);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
@media (max-width: 640px) { .diy-cta { flex-direction: column; text-align: center; gap: 1rem; } }

.diy-btn {
    background: var(--diy-success);
    color: white;
    padding: 1rem 2rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

/* Row 5: Bottom Grid */
.diy-row-btm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .diy-row-btm { grid-template-columns: 1fr; } }

.chart-box { position: relative; height: 250px; width: 100%; }
.icon-circle { 
    width: 48px; height: 48px; background: var(--diy-warning); color: var(--diy-black);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    margin: 0 auto 1rem auto; font-size: 1.2rem;
}