/* ==================================================================
   Design Principles
   ==================================================================

   - Mobile First as the default  < 768
   - Tablet Screens next          > 768
   - Desktop Screens next         > 1080
   - Large Desktop screens last   > 1400

   /*--------------@media configuration standards--------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens.
  
    /* Tablet and larger
      @media (min-width: 768px) { 
          
      }

    /* Desktop (most important jump)
      @media (min-width: 1080px) { 
        
        
      }

    /* Large desktop – optional
      @media (min-width: 1400px) {
      
      }

    /* Ultra Large Screens
      @media (min-width: 1600px) {
            
      }

      @media (min-width: 1920px) {
        
      }

      @media (min-width: 2400px) {
        
      }
*/

/* ==================================================================
   Global Design
   ================================================================== */

  :root {
    --bg:              #1e1e1e;
    --panel:           #2a2a2a;
    --panel-featured:  #b99a3d1b;
    --featured-border: rgba(208, 165, 36, 0.237);
    --text-primary:    #ffffff;
    --text-secondary:  #b0b0b0;
    --accent:          #b99a3d;
    --section-bg:      #2a2a2a;
    --link:            #e6c567;   /* resting state – soft warm gold */
    --link-hover:      #d4af37;   /* slightly brighter on hover */
    --positive-colour: #6c893a;
    --negative-colour: #a0522d;
    --container-max: 1320px;
   }

/* ==================================================================
   Base Typography & Layout
   ================================================================== */

  html {
    font-size: 16px;                                /* = 1rem = 16px on mobile */
  }

  body {
    margin: 0;
    font: 1.125rem/1.6 "Oswald", sans-serif;        /* 18px mobile → 19–20px desktop / 1.6 line height for readability*/
    background-color: var(--bg);    
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;                              /* For Hero section page load equalising */
  }

  p {
    margin: 0 0 1rem;
    font-size: 1rem;                                /* 16px mobile → 17–18px desktop */
    line-height: 1.65;
    color: var(--text-secondary);
  }  

  a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
  }

  a:hover,
  a:focus {
    color: var(--link-hover);
    border-bottom-color: currentColor;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 1rem 0 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent);
    letter-spacing: 0.5px;
  }

  h1 { font-size: 3rem; letter-spacing: 1px; }          /* 48px mobile */
  h2 { font-size: 2.4rem; }
  h3 { font-size: 1.8rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.1rem; }

  ul { text-align: left;}
  li { color: var(--text-secondary); font-size: 1rem; text-align: left;}  

  .text-primary_override { color: var(--text-primary); }                      /* Additional Override for primary */
  .text-secondary_override { color: var(--text-secondary); }                  /* Additional Override for secondary */
  .text-accent_override { color: var(--accent); }                             /* Additional Override for accent */
  .text-top_margin_override { margin: 0.5rem 0 1rem; }                        /* Removes top margin for putting headers at top of panels */  
  .text-positive_override { color: var(--positive-colour) !important; font-weight: 700; }  /* mellow green text colour from calculator charts */
  .text-negative_override { color: var(--negative-colour) !important; font-weight: 700; }  /* mellow red text colour from calculator charts */
  


  /* Small text – captions, footnotes */
    small, .text-sm {
      font-size: 0.875rem;                              /* 14px mobile */
      line-height: 1.5;
      color: var(--text-secondary);
    }
  
  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */

    @media (min-width: 768px)  { 
      h1 { font-size: 4.5rem; } 
      h2 { font-size: 3rem; }
      h3 { font-size: 2.1rem; }
      body { padding-top: 0; }                           /* Remove Mobile padding fix */
    }
    @media (min-width: 1080px) {
      html { font-size: 17px; }
      h1 { font-size: 5.5rem; }
      h2 { font-size: 3.5rem; }
      h3 { font-size: 2.4rem; }
      h4 { font-size: 1.7rem; }
      h5 { font-size: 1.3rem; }
    }
    @media (min-width: 1400px) {
      h1 { font-size: 6.5rem; }
      h2 { font-size: 4rem; }
    }
    @media (min-width: 1920px) {
      h1 { font-size: 7.5rem; }
      html { font-size: 18px; }
    }
 
/* ==================================================================
   Material Icon Styles
   ================================================================== */
    
    .material-symbols-outlined.accent {
      color: var(--accent);
      font-size: 80px;
      display: inline-flex;
      vertical-align: middle;
    }
  
    /* mobile */
    @media (max-width: 768px) {
      .material-symbols-outlined.accent { 
          font-size: 50px;
      }
    }

/* ==================================================================
   Responsive Images
   ================================================================== */
    
    .img-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;                          /* fills container, crops edges if needed */
      object-position: center;                    /* keeps the important part centered */
      border-radius: inherit;                     /* inherits panel’s border-radius */
      display: block;
      border: 1px solid var(--featured-border);
    }
    
    .img-contain {
      width: 100%;
      height: 100%;
      object-fit: contain;                        /* shows full image, adds letterbox if needed */
      object-position: center;
      background: var(--section-bg);              /* fallback colour if image has transparency */
      border-radius: inherit;
      border: 1px solid var(--featured-border);
    }

    .img-max {
      width: 100%;           
      height: auto;                               /* natural height – never stretched */
      object-fit: contain;                        /* keeps full image visible */
      object-position: center;
      display: block;
      margin: 0 auto;                             /* perfect horizontal centering */
      border-radius: inherit;                     /* matches panel corners */
      border: 1px solid var(--featured-border);
    }


/* ==================================================================
   Icon Images
   ================================================================== */
   
   .icon-wrapper {
      display: flex;
      justify-content: center;     
      gap: 3rem;                                      /* space between icons */
      flex-wrap: wrap;             
      padding: 0;
    }
   
   .icon-rounded {
      width: 60px;                                    /* adjust size once here – I recommend 72–90px */
      height: 60px;
      border-radius: 1.2rem;                          /* nice rounded corners */
      border: 3px solid rgba(185, 154, 61, 0.25);   /* subtle gold border */
      overflow: hidden;                               /* cuts off any overflow */
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2a2a2a;                          /* fallback if image fails */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);    /* subtle depth */
      transition: all 0.3s ease;
    }
    
    .icon-rounded img {
      width: 100%;
      height: 100%;
      object-fit: contain;                            /* keeps full logo visible, no stretch */
      object-position: center;
      display: block;
    }
    
    /* Hover effect – premium feel */
    .icon-rounded:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(185, 154, 61, 0.15);
    }

/* ==================================================================
   Quote Card - Panel Style
   ================================================================== */

    .quotes-grid {
      display: grid;
      gap: 1.2rem;
      grid-template-columns: 1fr;           /* mobile: 1 column */
    }

    .quote-card {
      background: var(--panel-featured);
      border: 1px solid var(--featured-border);
      border-radius: 1rem;
      padding: 1.8rem 1.2rem;
      position: relative;
      overflow: hidden;
      font-size: 1rem;
      line-height: 1.6;
      font-style: italic;
      color: var(--text-primary);
      text-align: center;
    }

    /* Big elegant opening quote removed on small screens */
    .quote-card::before {
      content: '“';
      position: absolute;
      top: -10px;
      left: 20px;
      font-family: Georgia, serif;
      font-size: 10rem;
      line-height: 1;
      color: var(--accent);
      opacity: 0.32;
    }

    /* Attribution */
    .quote-card cite {
      display: block;
      margin-top: 1.5rem;
      font-style: normal;
      font-weight: 600;
      color: var(--accent);
      font-size: 0.95rem;
    }

    /*--------------@media configuration for Containers, Header & Navigation-------------------

      Default style is for small mobile screens. Following @media tags change style
      depending on screen size, to scale site up for larger screens. */
      
      @media (min-width: 768px) {
        .quotes-grid {
          grid-template-columns: repeat(2, 1fr) !important;        /* ← change to repeat(3, 1fr) for 3 cols */
          gap: 2rem;
        }
        .quote-card {
          padding: 2rem 1.5rem;
        }
        
      }

/* ==================================================================
   Primary Block Elements
   ================================================================== */

  .container,
  .header-container,
  .hr-container { 
    max-width: var(--container-max);
    width: 100%; /* Full width on smaller screens */
    margin: 0 auto; /* Centers the container */
    padding: 0 1rem; /* Adds horizontal padding for mobile */
    box-sizing: border-box; /* Ensures padding doesn't affect width */  
  }

  .hr-line{
    width: 40%;
    border: 1px solid var(--accent);
    background-color: var(--accent);
    height: 2px;
    border-radius: 3rem;
    margin: 0 auto;
  }

  .no-hero {
    padding-top: 1rem;
  }

  @media (min-width: 1080px) { 
    .no-hero { padding-top: 4rem; }
  }
  
/* ==================================================================
   Header & Navigation
   ================================================================== */
  
  header {
    position: fixed; /* Fixes the header to the top */
    top: 0; /* Aligns it to the top of the viewport */
    left: 0; /* Ensures it spans the full width */
    right: 0; /* Ensures it spans the full width */
    z-index: 100; /* Ensures it stays above other content */
    padding: 0.4rem 0;
    background-color: var(--panel);
    border-bottom: 1px solid var(--accent);
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .woss-capital-logo {
    height: 38px;            /* Keeps it compact in default mobile nav */
    width: auto;             /* Preserve aspect ratio */
    vertical-align: middle;  /* Align neatly with text baseline */
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 4px;
    object-fit: contain;
  }

  .logo a:hover,
  .woss-capital-logo a:hover {
    opacity: 0.7;
    transition: opacity 0.4s ease;
  }

  nav {
    flex-shrink: 0; /* Prevent nav from shrinking */
  }

  /* Hamburger button */
    #menu-toggle {
      display: block;                                 /* show hamburger on mobile */
      font-size: 2.4rem;
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;  
      order: 2;   
      flex-shrink: 0; 
      z-index: 1001;
      padding: 0.5rem;
    }
    
  /* Default nav layout (mobile) */
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: none;                                /* hidden by default on mobile */
      flex-direction: column;
      background: var(--panel);
      border-top: 1px solid var(--accent);
      width: 100vw;                                 /* full screen width */
      position: absolute;
      left: 50%;
      transform: translateX(-50%);                  /* perfectly centered */
      top: 100%;                                    /* directly below header */
      
    }
    
    nav ul.show {
      display: flex;
    }  


    nav ul li a {
      display: block;
      padding: 0.8rem;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      transition: all 0.3s;
      border-bottom: 0;                             /* here and hover below to over-ride style of standard links for nav bar */
    }    
    nav ul li a:hover { color: var(--accent); border-bottom: 0; }

  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
    /* Tablet and larger */
      @media (min-width: 768px) { 
        .woss-capital-logo { height: 56px; }          /* Make logo larger on larger screen */        
      }

    /* Desktop (most important jump) */
      @media (min-width: 1080px) { 
        :root { --container-max: 1200px; }            /* Make containers wider */
        #menu-toggle { display: none; }               /* Dont display hamburger */
        nav ul { 
          display: flex !important;
          flex-direction: row;
          position: static;
          background: transparent;
          border-top: none;
          width: auto;
          transform: none;
          gap: 2.5rem;     
        }
        nav ul li { 
          padding: 0;
          position: relative;
        }
        nav ul li a {
          color: var(--text-secondary);
          font-size: 1.1rem; 
          display: inline-block;
          padding: 0.4rem 0; 
          text-decoration: none;
          transition: color .3s;
        }    
        nav ul li a:hover { color: var(--accent); }
        nav ul li a::after {
          content: '';
          position: absolute;
          bottom: -4px;                      /* underline below text */
          left: 0;
          width: 0;
          height: 3px;
          background: var(--accent);
          transition: width .3s ease;
        }
      
        nav ul li a:hover::after {
          width: 100%;
        }
      }

    /* Large desktop – optional */
      @media (min-width: 1400px) {
        :root { --container-max: 1320px; }            /* Make containers wider */   
        h1 { font-size: 4.5rem; } 
      }

    /* Ultra Large Screens */
      @media (min-width: 1600px) {
        :root { --container-max: 1440px; }            /* Make containers wider */        
      }

      @media (min-width: 1920px) {
        :root { --container-max: 1700px; }            /* Make containers wider */
      }

      @media (min-width: 2400px) {
        :root { --container-max: 2100px; }            /* Make containers wider */
      }

/* ==================================================================
   SUBMENU – Final mobile/desktop fix
   ================================================================== */

  /* Parent toggle – make it look like a link */
  .submenu-toggle {
    cursor: pointer;
    display: block;
    padding: 0.8rem 0.8rem;
    color: var(--text-secondary) !important;
    font-size: 1.1rem;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .submenu-toggle:hover {
    color: var(--accent) !important;
  }

  /* Default – hidden */
  .submenu {
    display: none !important;
  }

  /* Show when .show class is added (mobile) or on hover (desktop) */
  .submenu.show {
    display: block !important;
  }

  .submenu.show li a {
    display: block !important;
    padding: 0.5rem 1rem !important;  /* consistent padding */
    color: var(--text-secondary) !important;  /* white text */
    font-size: 1rem !important;
    background: var(--panel) !important;
    border-bottom: 1px solid var(--featured-border) !important;
  }

  .submenu.show li:last-child a {
    border-bottom: none !important;
  }

  .submenu.show li a:hover {
    background: var(--accent) !important;
    color: var(--bg) !important;
  }

  /* Desktop – hover dropdown */
  @media (min-width: 1080px) {
    .has-submenu:hover > .submenu {
      display: block !important;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--panel);
      border: 1px solid var(--accent);
      border-radius: 0.5rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      min-width: 300px;
      padding: 0.5rem 0;
      z-index: 1000;
    }
    .submenu-toggle{
      padding: 0.4rem 0;
    }
    .submenu li a {
      display: block !important;
      padding: 0.5rem 1rem !important;  /* consistent padding */
      color: var(--text-secondary) !important;  /* white text */
      font-size: 1rem !important;
      background: transparent !important;
      border-bottom: 1px solid var(--featured-border) !important;
    }
  
    .submenu li:last-child a {
      border-bottom: none !important;
    }
  
    .submenu li a:hover {
      background: var(--accent) !important;
      color: var(--bg) !important;
    }
  }

  /* Mobile – indented submenu when .show */
  @media (max-width: 1079px) {
    .submenu.show {
      display: block !important;
      position: relative;left: 0 !important;            /* reset any inherited left */
      transform: none !important;                       /* reset centering */
      padding-left: 1.5rem;                             /* indentation */
      margin-top: 0.5rem;
      background: transparent;
      border: none;
      box-shadow: none;
    }
  }

/* ==================================================================
   Footer
   ================================================================== */

  footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    background-color: var(--panel);
  }  

/* ==================================================================
   Scrollbar Element Style
   ================================================================== */

  body::-webkit-scrollbar{
    background: var(--panel);
    width: 8px;
  }

  body::-webkit-scrollbar-thumb{
    background: var(--accent);
    border-radius: 5px;
  }

/* ==================================================================
   Hero section: Index Page
   ================================================================== */

  .hero {
    padding-top: 80px;                          /* ← Match to body padding above */
    min-height: calc(50dvh - 80px);             /* subtract the same amount */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-family: 'Raleway', sans-serif;
    overflow: hidden;
  }

  .logo-img { height: 110px; margin-bottom: 1rem; opacity: 0;}

  .headline {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 700;
    opacity: 0;
    position: relative;
  }

  #headline {
    position: relative;
    display: inline-block;  /* ensures pseudo-element positions correctly */
    --underline-width: 0%;  /* starts at 0 — GSAP will animate this */
  }
  
  #headline::after {
    content: '';
    position: absolute;
    bottom: -8px;            /* adjust distance below text as needed */
    left: 0;
    width: var(--underline-width, 0%);  /* binds to custom property */
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transform-origin: left center;  /* smooth expand from left */
  }

  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
    /* Tablet and larger */
      @media (min-width: 768px) { 
        .logo-img { height: 180px; margin-top: 8rem; }
        .headline { font-size: 2rem; }
        .hero { height: 30rem; padding-top: 0; }
        
      }

    /* Desktop (most important jump) */
      @media (min-width: 1080px) { 
        .logo-img { height: 240px; margin-top: 8rem; }
        .headline { font-size: 2.5rem; }        
      }

/* ==================================================================
   Panels
   ================================================================== 
   
   Various different panel layouts, all configured here as generally 
   as possible for reuse. Aim is not to have any single use layouts
   that become duplicated */

   .panels-section {
      padding: 1rem 0;                      /* Reduced for mobile */
      gap: 1rem;                            /* Reduced row spacing for mobile */
      display: flex;
      flex-direction: column;
    }

    .panels {
        display: flex;
        flex-direction: column;             /* Stack panels vertically on mobile */
        gap: 1rem;                          /* Reduced panel spacing for mobile */
    }

    .panel {
        width: 100%;                        /* Full width on mobile */
        background-color: var(--panel);     /* Different background */
        border-radius: 1rem;                /* Rounded corners */
        padding: 1.5rem;        
        box-sizing: border-box;
        text-align: center;
    }    

    .panel-featured {
      background-color: var(--panel-featured);
      border: 1px solid var(--featured-border);
    }

  /*--------------@media configuration for Panels--------------------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
  /* Tablet and larger */
    @media (min-width: 768px) {  
      .panels-section {
        padding: 2rem 2rem;
        gap: 2rem;                        /* More Space between rows */
      }
      
      .panels {
        flex-direction: row !important;
        justify-content: space-between;
        gap: 2rem;                        /* Space between panels */
        flex-wrap: wrap;
      }  
      
      .panel {
        width: auto;
        flex: 1;                            /* Equal width for all panels */       
      }   
      
      .panel_internal {
        display: flex;
        flex-direction: row;             /* Stack panels vertically on mobile*/
      }

      .panel_internal_left20 {
        flex: 0 0 20%; /* Fixed width, approximately 20% of the panel */
        padding-right: 1.5rem;
      }
      
      .panel_internal_right {
        flex: 1;                              /* Takes up the remaining space */
        text-align: left;
        border-left: 2px solid var(--accent); /* Left border to divide sections */
        padding-left: 1.5rem;
      }
     
    }      

/* ==================================================================
   SCROLL-IN ANIMATIONS – container-based (just add a class)
   ================================================================== */

    /* Base hidden state – all animations start from here */
    .scroll-animate {
      opacity: 0;
      transition: all 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform, opacity;
    }
    
    /* Individual animation types – just add the class you want */
    .animate-fade-up     { transform: translateY(60px); }
    .animate-fade-down   { transform: translateY(-60px); }
    .animate-slide-left  { transform: translateX(-80px); }
    .animate-slide-right { transform: translateX(80px); }
    .animate-scale       { transform: scale(0.92); }
    
    /* When the element enters viewport → add .visible */
    .scroll-animate.visible {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1) !important;
    }

/* ==================================================================
   CALCULATORS – Mobile-first
   ================================================================== */

  /* Default = mobile */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr;          /* 1 column on mobile */
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--accent);
  }

  /* Default (mobile) – same height/padding */
  .form-group input,
  .form-group select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.8rem 1rem !important;
    background: var(--panel) !important;
    border: 1px solid var(--featured-border) !important;
    border-radius: 0.5rem !important;
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Add custom gold arrow to all <select> elements */
    .form-group select {
      appearance: none !important;  /* remove default arrow */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath fill='%23b99a3d' d='M1 1l7 7 7-7'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 1rem center !important;
      background-size: 12px !important;
    }

  /* Ensure padding makes room for the arrow */
    .form-group select {
      padding-right: 1rem !important;  /* extra space for arrow */
    }

  .btn-gold {
    background: var(--accent);
    color: var(--bg);
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;                         /* full width on mobile */
  }

  .btn-gold:hover {
    background: var(--bg);
    color: var(--accent);
  }

  #inflation-chart {
    height: 300px !important;            /* shorter on mobile */
    margin: 2rem 0;
  }

  .table-wrapper {
    overflow-x: auto;
    border-radius: 1rem;
    border: 1px solid var(--featured-border);
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
  }

  .data-table th,
  .data-table td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--featured-border);
    font-size: 1rem;
    color: var(--text-secondary);
  }

  .data-table th {
    background: var(--panel-featured);
    color: var(--text-secondary);
  }

  .chart-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
  }

/*--------------@media configuration for Panels--------------------------------*/
  /* Tablet – 2 columns */
  @media (min-width: 768px) {
    .form-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .btn-gold {
      width: auto;
    }
    .form-group input,
    .form-group select {
      height: 3rem !important;
      line-height: 3rem !important;
      padding: 0 1.2rem !important;
      font-size: 1.05rem !important;
    }
    #inflation-chart {
      height: 500px !important;
    }
  }

  /* Desktop – refinements */
  @media (min-width: 1080px) {
    .form-grid {
      gap: 2rem;
    }
    .chart-wrapper {
      height: 500px;
    }    
    #inflation-chart {
      height: 450px !important;
    }
  }

    /* Tooltips */
    .tooltip-group {
      position: relative;
    }

    .tooltip-icon {
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      background: var(--accent);
      color: var(--bg);
      text-align: center;
      border-radius: 50%;
      font-size: 0.8rem;
      font-weight: bold;
      margin-left: 0.5rem;
      cursor: help;
    }

    .tooltip-text {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--panel);
      color: var(--text-secondary);
      padding: 0.8rem 1rem;
      border-radius: 0.5rem;
      border: 1px solid var(--accent);
      font-size: 0.9rem;
      white-space: nowrap;
      z-index: 1000;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }

    .tooltip-group:hover .tooltip-text {
      display: block;
    }

    /* Mobile – tooltips below */
    @media (max-width: 767px) {
      .tooltip-text {
        position: static;
        transform: none;
        white-space: normal;
        margin-top: 0.5rem;
        left: 0;
      }
    }

/* ==================================================================
   FORM CHECKBOX – Premium dark/gold style (matches MVP)
   ================================================================== */

    /* Hide default checkbox, use custom */
    input[type="checkbox"] {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: 20px !important;
      height: 20px !important;
      background: var(--panel) !important;
      border: 2px solid var(--featured-border) !important;
      border-radius: 0.4rem !important;
      cursor: pointer;
      position: relative;
      vertical-align: middle;
      margin-right: 0.8rem !important;
    }

    /* Checked state — gold checkmark */
    input[type="checkbox"]:checked {
      background: var(--accent) !important;
      border-color: var(--accent) !important;
    }

    input[type="checkbox"]:checked::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #000 !important;
      font-size: 14px;
      font-weight: bold;
    }

    /* Focus state — subtle glow */
    input[type="checkbox"]:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(185, 154, 61, 0.3);
    }

    /* Label alignment */
    label[for] {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 0.95rem;
    }

/* ==================================================================
   FORM INPUTS – Subtle gold glow focus state (site-wide)
   ================================================================== */

    /* All form controls — remove default outline, add gold glow */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea {
      outline: none !important;                    /* remove default browser outline */
      transition: box-shadow 0.3s ease !important;
    }

    /* Focus state — subtle gold glow */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    input[type="tel"]:focus,
    select:focus,
    textarea:focus {
      box-shadow: 0 0 0 3px rgba(185, 154, 61, 0.3) !important;  /* subtle gold glow */
      border-color: var(--accent) !important;                   /* gold border on focus */
    }

    /* Checkbox/radio already handled separately — keep their focus */
    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
      box-shadow: 0 0 0 3px rgba(185, 154, 61, 0.3) !important;
    }