@charset "utf-8";
/* --- Base Layout --- */
body {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  margin: 0;
}
#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  width: 95%;
  background-color: #000;
    
}
/* --- Header & Navigation --- */
header {
  height: 120px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative; /* Add this to anchor the absolute menu */
}
/* Color utility */
.text-red {
  color: #b8312f;
}
/* This targets any link that is inside an element with the class "text-red" */
.text-red a {
  color: #b8312f;
  text-decoration: none;
}
/* Optional: Ensure the hover state also stays red or changes slightly */
.text-red a:hover {
  color: #8c2523; /* A slightly darker shade for feedback */
  text-decoration: none;
}
/* Bold utility */
.text-bold {
  font-weight: 700;
}
/* Combined utility */
.makeBoldRed {
  color: #b8312f;
  font-weight: 700;
}
/* This targets any link that is inside an element with the class "text-red" */
.makeBoldRed a {
  color: #b8312f;
}
/* Optional: Ensure the hover state also stays red or changes slightly */
.makeBoldRed a:hover {
  color: #8c2523; /* A slightly darker shade for feedback */
}
.logo {
  width: 195px;
  height: 110px;
}
/* Navigation Logic */
.nav_simple {
  position: static;
}
/* Desktop: Default visibility */
.nav_simple ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.nav_simple li a {
  display: block;
  background-color: #000;
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s ease, border-bottom 0.2s ease;
  border-bottom: 3px solid transparent;
}
.nav_simple li a:hover {
  background-color: #333;
  border-bottom: 3px solid #8c1010;
}
/* Hamburger UI (Hidden on Desktop) */
.nav-toggle {
  display: none;
}
.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 25px;
  position: relative;
}
.nav-toggle-label span::before {
  content: '';
  top: -8px;
}
.nav-toggle-label span::after {
  content: '';
  top: 6px;
}
/* --- Hero Section --- */
#hero {
  width: 100%;
  max-width: 1000px;
  min-height: 375px;
  padding: 20px 25px 25px 20px;
  background-color: #8c1010;
  color: #fff;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden; /* Contains floated elements if any */
}

/* Text Group Wrapper to lock h1 and h2 together */
.hero-text-group {
  display: flex;
  flex-direction: column;
  flex: 1; /* Takes up available space */
}

#hero h1 {
  font-size: 2.2em;
  line-height: 1.2;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

#hero h2 {
  margin: 10px 0 20px 0;
  font-size: 1.5em;
  font-weight: 400; /* Assuming you want sub-headings lighter */
}

.hero-flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.hero-flex-row img, 
.btn-pricing-classic {
  flex-shrink: 0;
  margin-left: 20px; /* Consistent gap between text group and side elements */
}

.hero-flex-row h3 {
  flex: 1;
  margin: 0;
  text-align: center;
  line-height: 1.6;
  font-weight: 400;
}

.hero-hr {
  border: 0;
  border-top: 1px solid #fff;
  margin: 20px 0;
  width: 100%;
}
/* #leader Section */
#leader {
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    background-color: #8c1010;
    color: #fff;
}
#leader .leader-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
#leader .leader-text-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 20px;
}
#leader h1 {
    margin: 0;
    font-size: 2.2em;
    font-weight: 800;
    line-height: 1.2;
}
#leader h2 {
    margin: 10px 0 0 0;
    font-size: 1.5em;
    font-weight: 400;
}
/* Right-side element wrapper */
.leader-side-element {
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Image styling */
.image-container img {
    display: block;
    width: 77px;
    height: 75px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* --- Slideshow & Content --- */
.slideshow-container {
  position: relative;
  width: 100%; /* Fluid width */
  max-width: 1000px; /* Cap the max size */
  aspect-ratio: 4 / 3; /* Maintains the 1200x900 proportion */
  margin: 0 auto;
  overflow: hidden;
  background-color: #000;
}
.slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images fill the container without distortion */
}
/* The container must be relative so children can be absolute */
.comparison-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 400px; /* Force a height */
    margin: 20px auto;
    overflow: hidden;
    border: 2px solid #ddd;
}

.comparison-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the container without distortion */
    display: block;
}

.img-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Initial slider position */
    height: 100%;
    overflow: hidden;
    z-index: 2;
    border-right: 4px solid #d4af37;
}

.slider-handle {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #d4af37;
    cursor: ew-resize;
    z-index: 3;
}
/* Sidebar container */
#sidebar {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding-right: 20px;
  box-sizing: border-box;
}
/* Main content takes roughly 75% (similar to old grid 8) */
#main-copy {
  flex: 0 0 66.67%;
  max-width: 66.67%;
  box-sizing: border-box;
}
/* --- Typography for Main Copy --- */
#main-copy p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 1.5em; /* Adds nice spacing between paragraphs */
  color: #000; /* Ensuring it's dark enough for contrast */
}
#main-copy img {
  max-width: 100%; /* Never wider than the container */
  height: auto; /* Keeps the aspect ratio proportional */
  display: block; /* Removes the small, mysterious gap below inline images */
}
/* --- Links inside Main Copy --- */
#main-copy a {
  color: #4a7dff;
  text-decoration: none;
  transition: color 0.2s ease;
}
#main-copy a:hover {
  text-decoration: underline; /* Adds visual feedback on hover */
  color: #2a5bbd; /* Optional: slightly darker on hover */
}
#main-copy a.btn-deepred {
  display: inline-block;
  /* Define the gradient: 'to bottom' means top-to-bottom */
  background-image: linear-gradient(to bottom, #cc4a45, #9d1f20);
  color: #fff !important; 
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #7a1819;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase; /* This forces all caps */
  letter-spacing: 0.05em;     /* Optional: adds a little breathing room */
  transition: 0.2s;
}
#main-copy a.btn-deepred:hover {
  background-color: #000000; /* Slight gray background on hover */
  border-color: #bbb;
}
/* --- Scholarly Note Styling --- */
.scholarly-note {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  margin: 20px 0;
  font-family: Georgia, serif; /* Serifs are traditionally more 'scholarly' */
  font-style: italic;
  color: #555;
}
.scholarly-note ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.scholarly-note .date {
  display: inline-block;
  margin-right: 15px;
  font-weight: bold;
  color: #333;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}
/* --- Clean List Utility --- */
.clean-list {
  list-style-type: none; /* Hides the bullets */
  padding-left: 20px; /* Set this to your preferred indentation (e.g., 20px or 40px) */
  margin: 0;
}
.clean-list li {
  line-height: 1.5;
  margin-bottom: 8px;
}
/* --- Image Alignment Utilities --- */
.alignleft {
  float: left;
  margin-right: 20px; /* Space between the image and the text */
  margin-bottom: 15px;
  max-width: 100%; /* Ensures it stays responsive */
}
.alignright {
  float: right;
  margin-left: 20px; /* Space between the image and the text */
  margin-bottom: 15px;
  max-width: 100%;
}
/* 1. Mobile-First Default (Stacking) */
.nav-sidebar figure.alignleft {
  float: none;
  margin: 0 auto 20px auto;
  text-align: center;
}
.nav-sidebar ul {
  display: block;
  clear: both; /* Forces stack on mobile */
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
/* 2. Link Styling (Applies to all screens) */
.nav-sidebar li a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.nav-sidebar li a:hover {
  color: #8c1010;
  border-bottom: 1px solid #831100;
}
/* Image stacking in widget */
.widget img {
  width: 100%; /* Forces images to fit the sidebar width */
  height: auto;
  margin-bottom: 15px; /* Creates the "stacked" gap */
  display: block;
  border: 1px solid #ccc;
}
/* Ensure images don't exceed container */
.nav-sidebar img {
  max-width: 100%;
  height: auto;
}
.btn-pricing-classic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 161px;
  height: 114px;
  flex-shrink: 0;
  /* Reset inherited properties */
  margin: 10px auto; /* Adds some space around it in main copy */
  line-height: 1.2; /* Forces consistent spacing regardless of parent */
  box-sizing: border-box; /* Ensures padding doesn't increase the 161px width */
  background: #831100;
  background: linear-gradient(to bottom, #d12204 0%, #831100 100%);
  border: 1px solid #831100;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-decoration: none !important;
}
/* Ensure the text children don't inherit weird margins from <main> */
.btn-pricing-classic .main-text, .btn-pricing-classic .sub-text, .btn-pricing-classic .action-text {
  margin: 0;
  padding: 0 5px 5px;
  text-align: center;
  width: 100%;
  color: #ffffff !important;
  text-decoration: none; /* Ensures no underline appears */
}
.btn-pricing-classic:active {
  transform: translateY(2px); /* Button 'depresses' when clicked */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.main-text {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}
.sub-text {
  font-size: 16px;
  display: block; /* Ensures it sits on its own line */
  padding: 0 10px;
  text-align: center; /* Centers the text within the block */
  width: 100%; /* Forces the span to span the full 161px width */
}
.action-text {
  font-size: 16px;
  font-style: italic;
  margin-top: 5px;
  display: block;
}
/*Buttons for various actions*/
.btn-submit {
  background-color: #337ab7;
  color: #fff;
  padding: 10px 15px;
  border: 1px solid #ddd; /* Adds a clean border */
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer; /* Makes it look like a clickable link */
  transition: 0.2s;
}
.btn-submit:hover {
  background-color: #0547e3; /* Slight gray background on hover */
  border-color: #bbb;
}
.text-center {
  text-align: center !important;
}
.centered-block {
  text-align: center;
  width: 60%;
  margin: 0 auto;
}
@keyframes fadeEffect {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
/* Main Section of the page for content and left sidebar navigation */
#content-area {
  background-color: #fff;
  color: #000;
  display: flex;
  flex-wrap: wrap; /* Allows stacking on small screens */
  width: 100%; /* It will now respect the wrapper's boundaries */
  padding: 20px;
  box-sizing: border-box; /* IMPORTANT: This keeps padding inside the width */
  margin: 0 auto;
}
.pageset {
  width: 100%;
  min-height: 900px;
}
#sidebar {
  width: 300px;
}
#main-copy {
  flex: 1;
}
footer {
  display: flex;
}
.col {
  flex: 1;
  padding: 10px;
}
/* --- Main Footer --- */
.footer-accent-bar {
  height: 15px; /* Keeps it 'narrow' as requested */
  background-color: #32303d; /* Matches site_footer_second */
  border-top: 2px solid #49475c; /* The highlight color */
  width: 100%;
}
#site_footer {
  background: #000 url('../../images/footer_glare_plain.png') no-repeat center top;
  background-size: cover; /* Ensures the image stretches to fill the area */
  padding: 0;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
#site_footer ul {
  list-style-type: none; /* Removes the bullets */
  padding-left: 0; /* Removes the default indentation */
  margin: 0;
}
#site_footer li {
  margin-bottom: 8px; /* Adds a little breathing room between links */
}
#site_footer a {
  color: #ffffff; /* Makes the links white */
  text-decoration: none; /* Removes the underline */
  transition: opacity 0.2s ease;
}
#site_footer a:hover {
  opacity: 0.8; /* Adds a nice 'fade' effect on hover */
  text-decoration: underline;
}
/* Ensure widget titles stand out */
#site_footer .widget-title {
  color: #ffffff;
  font-size: 1.1em;
  margin-bottom: 15px;
}
.footer-col {
  /* flex: 1 tells it to grow, but flex-basis 22% ensures it stays in a 4-col row */
  flex: 1 1 22%;
  min-width: 200px; /* Adjust this to control when it collapses on mobile */
}
.footer-col p {
  line-height: 1.5;
  margin-bottom: 1em; /* Ensures consistent spacing between paragraphs */
  color: #eeeeee; /* Optional: slightly softer white for the footer text */
}
/* --- Copyright Bar (The #site_footer_second) --- */
#site_footer_second {
  background-color: #32303d;
  border-top: 4px solid #49475c;
  color: #fff;
  padding: 15px;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 1px;
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex; /* Enables Flexbox */
  align-items: center; /* Vertically aligns items */
  gap: 20px; /* Adds space between the link and the text */
}
/* Force the paragraph to the left */
.footer-inner p {
  margin: 0;
  text-align: left;
  flex-grow: 1; /* Allows the text to take up remaining space */
}
.scroll-top {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  order: -1; /* Forces the TOP link to the far left */
}
/* --- Pricing Grid (Calculator Door 1, 2, 3) --- */
.pricing-container { 
    display: flex !important; 
    flex-direction: row;
    align-items: stretch; 
    justify-content: center; 
    gap: 20px; 
    margin: 30px auto; 
    width: 100%;
    max-width: 1100px; 
}

.price-card { 
    background: #ffffff !important; 
    border: 1px solid #e1e4e8 !important; 
    border-radius: 12px; 
    flex: 1; 
    min-width: 250px; /* Prevents cards from getting too skinny */
    display: flex; 
    flex-direction: column; 
    position: relative; 
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.price-card.featured { 
    border: 3px solid #b51a00 !important; 
    transform: scale(1.03); 
    z-index: 2; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); 
}

/* Ensure the header text is visible on the white card */
.card-header { 
    background: #f8f9fa; 
    padding: 20px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 1.2rem; 
    border-bottom: 1px solid #eee; 
    color: #222 !important; 
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left; /* Ensures text stays left even if container is centered */
}

.feature-list li {
    padding: 12px 0 12px 25px; /* Room for a custom icon if we want one later */
    border-bottom: 1px solid #f0f0f0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
}

/* Add a subtle custom "bullet" using a CSS checkmark */
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745; /* A nice success green */
    font-weight: bold;
}

/* Remove the border from the last item so it looks cleaner */
.feature-list li:last-child {
    border-bottom: none;
}

/* Make the text inside the Featured card slightly punchier */
.price-card.featured .feature-list li {
    color: #222;
}

/* Ensure the card bodies have enough internal padding */
.card-body {
    padding: 20px 25px;
    flex-grow: 1; /* Pushes the footer button to the bottom so all buttons align */
}
/* --- Featured Card Ribbon --- */
.promo-ribbon {
    background: #b51a00; /* Matching your site's deep red */
    color: #ffffff !important;
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    /* This ensures it stays at the absolute top of the card */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Adjust the header of the featured card so it doesn't get covered by the ribbon */
.price-card.featured .card-header {
    padding-top: 45px; /* Adds space for the ribbon above the title */
    background: #fff5f5;
}
/* Pricing Table Buttons */
.portal-btn {
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    color: #fff !important;
}

.btn-quad {
    background: #337ab7; /* Standard blue */
    padding: 12px 15px;
}

.btn-quad:hover { background: #285e8e; }

.btn-purp {
    background: #8c1010; /* Matching your site's deep red */
    padding: 15px 20px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(140, 16, 16, 0.3);
}

.btn-purp:hover { background: #a61313; transform: translateY(-2px); }
/* --- Forms & Calculators --- */

/* 1. Layout: Side-by-Side Container */
.calc-container {
    display: flex !important;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: nowrap; /* Forces side-by-side on desktop */
    margin-bottom: 30px;
    width: 100%;
}

/* 2. The Form Card (Main selection area - 65%) */
.calc-card {
    flex: 0 0 65%; 
    background: #ffffff !important;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    color: #333 !important;
    box-sizing: border-box;
}

/* 3. The Instruction Side (The Reference area - 35%) */
.help-box {
    flex: 0 0 35%;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e1e4e8;
    color: #333;
    box-sizing: border-box;
}

/* 4. The Interactive Radio Buttons */
.radio-group { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin: 20px 0;
}

.calc-card .radio-group label {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    font-size: 1.05rem;
    color: #333 !important;
}

.calc-card .radio-group label:hover {
    background-color: #f9f9f9 !important;
    border-color: #8c1010 !important;
}

.calc-card .radio-group label:has(input:checked) {
    border: 2px solid #8c1010 !important;
    background-color: #fff5f5 !important;
    font-weight: bold !important;
}

/* 5. RESTORED: Big Green Call to Action Button */
.next-btn {
    background: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px 45px !important;
    font-weight: bold !important;
    font-size: 1.25rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, background 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
    text-transform: uppercase;
    display: inline-block;
}

.next-btn:hover {
    background: #218838 !important;
    transform: translateY(-2px);
}

/* 6. Measurement Guide Content */
.measure-guide {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.measure-item img {
   
    height: auto;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Big Green Call to Action */
.next-btn {
    background: #28a745;
    color: #ffffff !important;
    border: none;
    padding: 18px 45px;
    font-weight: bold;
    font-size: 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    text-transform: uppercase;
}

.next-btn:hover {
    background: #218838;
    transform: translateY(-2px);
}

.next-btn:active {
    transform: translateY(0);
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}
.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group input:focus {
    border-color: #8c1010;
    outline: none;
    box-shadow: 0 0 5px rgba(140, 16, 16, 0.2);
}
/* --- New Price Calculator Layout --- */

/* Force the main containers to expand for the calculator */
.calculator-page #content-area, 
.calculator-page #main-copy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important; /* Prevents old floats from squishing the width */
}

/* The horizontal flex wrapper */
.calc-container-wide {
    display: flex !important;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
        /* Force the legacy container to actually use the full screen width */
        #content-area, #main-copy {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Ensure the flex container expands to the edges */
        .full-width-wrapper {
            display: flex !important;
            flex-direction: row;
            gap: 30px;
            align-items: flex-start;
            width: 100% !important;
            margin: 0;
            padding: 0;
        }
/* --- Calculator Step 3: Success Page --- */
.success-hero {
    background: linear-gradient(135deg, #8c1010 0%, #4a0808 100%);
    color: #fff !important;
    padding: 20px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 40px;
}

.success-hero h2 { color: #ffd700 !important; text-transform: uppercase; letter-spacing: 2px; font-size: 1.2rem; margin-bottom: 10px; }
.success-hero h1 { font-size: 2.5rem; line-height: 1.2; margin: 0; }

.action-card {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    padding: 20px;
    margin-top: -30px; /* Overlaps the hero slightly for a modern look */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    color: #333;
}

.email-highlight {
    background: #fdf6f6;
    border: 2px dashed #8c1010;
    padding: 20px;
    display: inline-block;
    border-radius: 8px;
    margin: 20px 0;
}

.email-address {
    font-family: monospace;
    font-size: 1.8rem;
    color: #8c1010;
    display: block;
    margin-top: 10px;
    user-select: all; /* Makes it easy for users to click and select */
}

.piano-future-box {
    border-top: 2px solid #eee;
    margin-top: 40px;
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}

.piano-future-box h4 {
    color: #28a745;
    margin: 0;
    font-size: 1.1rem;
}

.calculation-meta {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    list-style: none;
}
.masked-data {
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: #444;
}
/* --- Modern Button System --- */
.btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Wraps buttons on small mobile screens */
    margin-top: 25px;
}

/* Base Button Styles */
.btn-calc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
}

/* The "Primary/Next" Button - Bold Green */
.btn-calc-next {
    background-color: #28a745;
    color: #fff !important;
}

.btn-calc-next:hover {
    background-color: #217838;
}

.btn-calc-next:active {
    transform: translateY(2px);
}

/* The "Secondary/Contact" Button - Clean Outline */
.btn-calc-contact {
    background-color: transparent;
    border-color: #28a745;
    color: #28a745 !important;
}

.btn-calc-contact:hover {
    background-color: #f8fff9;
    border-color: #218838;
    color: #218838 !important;
}

/* Icon spacing */
.btn-calc i {
    margin-left: 10px;
    margin-right: 10px;
}
/* --- Responsive Logic --- */
@media (max-width: 768px) {
  /* hero for mobile*/
   .hero-flex-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
    .btn-pricing-classic {
    margin-left: 0 !important; /* Removes the "spring" that was pushing it right */
    margin-top: 20px;          /* Adds space between the text group and the button */
    display: flex;             /* Ensures it behaves like a container */
    justify-content: center;   /* Centers the text inside the button */
  }
  #hero .hero-text-group {
    text-align: center;        /* Centers your H1 and H2 on small screens */
    margin-right: 0;
    margin-bottom: 0px;
  }
.hero-side-element {
    margin-left: 0 !important;
    margin-top: 10px;
    display: flex;
    justify-content: center; /* Ensures the button inside stays centered */
  }
  /*leader for mobile*/
  #leader .leader-flex-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #leader .leader-text-group {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .leader-side-element {
    margin-left: 0;
  }
  /* Mobile Nav: Toggle visibility */
  .nav-toggle-label {
    display: block;
  }
  .nav_simple ul {
    display: none;
    flex-direction: column;
    /* These properties control the "floating" menu */
    position: absolute;
    top: 120px;
    left: 0; /* Aligns the menu to the left edge */
    width: 250px; /* Set a fixed width so it doesn't span the full screen */
    background: #000;
    z-index: 999;
    border: 1px solid #333; /* Adds a visual boundary */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Gives it a "floating" shadow effect */
  }
  .nav-toggle:checked ~ ul {
    display: flex;
  }
  .nav_simple li {
    text-align: left; /* Align text to the left within the menu */
    padding-left: 20px;
  }
  .slideshow-container {
    /* Optional: Change the ratio on mobile if you want it taller/shorter */
    aspect-ratio: 16 / 9;
  }
  #content-area {
    flex-direction: column; /* Switches from side-by-side to stacked */
  }
  #sidebar {
    width: 100%; /* Sidebar takes full width on mobile */
    padding-right: 0;
    margin-bottom: 20px;
  }
  #sidebar, #main-copy {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .nav-sidebar figure.alignleft {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
  }
  .nav-sidebar ul {
    display: block !important;
    clear: both !important;
    width: 100% !important;
  } 
    /* Pricing Grid Stacking for Mobile */
    .pricing-container { 
        flex-direction: column; 
        padding: 0 10px; 
    }
    .price-card.featured { 
        transform: scale(1); 
        order: -1; /* Puts the best-value Combo option at the top of the phone screen */
        margin: 15px 0; 
    }
    .portal-header h1 { 
        font-size: 1.6rem !important; 
    }
/* Target the container first */
    .calc-container-wide, 
    .full-width-wrapper,
    .calc-container {
        flex-direction: column !important;
        display: flex !important;
    }

    /* Target the two boxes and force them to 100% width */
    .calc-container-wide .calc-card,
    .calc-container-wide .help-box,
    .calc-card, 
    .help-box {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important; /* Adds a gap between them when stacked */
        min-width: 0 !important; /* Releases the 'desktop' min-width if any */
    }
}