/* ============================================================
   Freo EMI Calculator - styles.css
      Path: /getemi/styles.css
         ============================================================ */
         
         *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
         
         :root {
           --freo-black: #0d0d0f;
             --freo-black-2: #1a1a1d;
               --freo-text: #1a1a1a;
                 --freo-muted: #6b7280;
                   --freo-light-bg: #f7f8fa;
                     --freo-border: #e5e7eb;
                       --freo-divider: #f0f1f3;
                         --freo-accent: #7c5cff;
                           --freo-accent-2: #5b8def;
                             --freo-success: #10b981;
                               --freo-warn: #ef6c00;
                                 --radius-lg: 16px;
                                   --radius-pill: 999px;
                                     --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05);
                                       --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.08);
                                         --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
                                         }
                                         
                                         body {
                                           font-family: var(--font-stack);
                                             background: var(--freo-light-bg);
                                               color: var(--freo-text);
                                                 line-height: 1.5;
                                                   -webkit-font-smoothing: antialiased;
                                                   }
                                                   
                                                   .sr-only {
                                                     position: absolute; width: 1px; height: 1px; padding: 0;
                                                       margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
                                                         white-space: nowrap; border: 0;
                                                         }
                                                         
                                                         .skip-link {
                                                           position: absolute; top: -40px; left: 0;
                                                             background: var(--freo-accent); color: #fff;
                                                               padding: 8px 16px; z-index: 100; transition: top 0.2s;
                                                               }
                                                               .skip-link:focus { top: 0; }
                                                               
                                                               .topnav {
                                                                 background: var(--freo-black);
                                                                   padding: 18px 40px;
                                                                     display: flex; align-items: center; justify-content: space-between;
                                                                       border-bottom: 1px solid var(--freo-black-2);
                                                                       }
                                                                       .topnav .logo img { height: 34px; display: block; }
                                                                       .topnav .nav-pill {
                                                                         display: flex; gap: 6px;
                                                                           background: var(--freo-black-2);
                                                                             padding: 6px; border-radius: var(--radius-pill);
                                                                             }
                                                                             .topnav .nav-pill a {
                                                                               color: #b9b9bd; text-decoration: none;
                                                                                 font-size: 14px; font-weight: 500;
                                                                                   padding: 8px 18px; border-radius: var(--radius-pill);
                                                                                     transition: all 0.2s;
                                                                                     }
                                                                                     .topnav .nav-pill a.active { background: #fff; color: #000; }
                                                                                     .topnav .nav-pill a:hover:not(.active) { color: #fff; }
                                                                                     .topnav .cta {
                                                                                       background: #fff; color: #000;
                                                                                         padding: 10px 22px; border-radius: var(--radius-pill);
                                                                                           font-weight: 600; font-size: 14px; text-decoration: none;
                                                                                           }
                                                                                           
                                                                                           .hero {
                                                                                             background: var(--freo-black);
                                                                                               color: #fff;
                                                                                                 padding: 60px 20px 120px;
                                                                                                   text-align: center;
                                                                                                   }
                                                                                                   .hero h1 {
                                                                                                     font-size: 44px; font-weight: 800;
                                                                                                       margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.15;
                                                                                                       }
                                                                                                       .hero h1 span {
                                                                                                         background: linear-gradient(90deg, var(--freo-accent), var(--freo-accent-2));
                                                                                                           -webkit-background-clip: text; background-clip: text;
                                                                                                             -webkit-text-fill-color: transparent;
                                                                                                             }
                                                                                                             .hero p {
                                                                                                               font-size: 16px; color: #a8a8b0;
                                                                                                                 max-width: 680px; margin: 0 auto;
                                                                                                                 }
                                                                                                                 
                                                                                                                 .container {
                                                                                                                   max-width: 1100px;
                                                                                                                     margin: -80px auto 60px;
                                                                                                                       padding: 0 20px;
                                                                                                                       }
                                                                                                                       
                                                                                                                       .input-card {
                                                                                                                         background: #fff;
                                                                                                                           border-radius: var(--radius-lg);
                                                                                                                             box-shadow: var(--shadow-elevated);
                                                                                                                               padding: 36px 40px;
                                                                                                                                 display: grid;
                                                                                                                                   grid-template-columns: 1fr 1fr;
                                                                                                                                     gap: 40px;
                                                                                                                                     }
                                                                                                                                     .input-col { display: flex; flex-direction: column; gap: 28px; }
                                                                                                                                     
                                                                                                                                     .field label {
                                                                                                                                       display: block; font-size: 13px;
                                                                                                                                         color: var(--freo-muted);
                                                                                                                                           margin-bottom: 6px; font-weight: 500;
                                                                                                                                           }
                                                                                                                                           .field input[type=number] {
                                                                                                                                             width: 100%; font-size: 24px;
                                                                                                                                               color: var(--freo-black);
                                                                                                                                                 border: none; border-bottom: 2px solid var(--freo-border);
                                                                                                                                                   padding: 6px 0; outline: none;
                                                                                                                                                     font-weight: 600; background: transparent;
                                                                                                                                                     }
                                                                                                                                                     .field input[type=number]:focus { border-color: var(--freo-accent); }
                                                                                                                                                     .field .hint { font-size: 11px; color: #9ca3af; margin-top: 6px; }
                                                                                                                                                     
                                                                                                                                                     .radio-group {
                                                                                                                                                       display: flex; gap: 24px; margin-top: 10px;
                                                                                                                                                         border: none; padding: 0;
                                                                                                                                                         }
                                                                                                                                                         .radio-group label {
                                                                                                                                                           display: flex; align-items: center; gap: 6px;
                                                                                                                                                             font-size: 14px; color: #4b5563;
                                                                                                                                                               cursor: pointer; font-weight: 500;
                                                                                                                                                               }
                                                                                                                                                               .radio-group input { accent-color: var(--freo-accent); }
                                                                                                                                                               
                                                                                                                                                               .results {
                                                                                                                                                                 margin-top: 40px;
                                                                                                                                                                   display: grid;
                                                                                                                                                                     grid-template-columns: 1fr 1fr;
                                                                                                                                                                       gap: 24px;
                                                                                                                                                                       }
                                                                                                                                                                       .result-card {
                                                                                                                                                                         background: #fff;
                                                                                                                                                                           border-radius: var(--radius-lg);
                                                                                                                                                                             box-shadow: var(--shadow-card);
                                                                                                                                                                               overflow: hidden;
                                                                                                                                                                               }
                                                                                                                                                                               .result-card .head {
                                                                                                                                                                                 text-align: center; font-size: 12px;
                                                                                                                                                                                   letter-spacing: 1.4px; color: #fff;
                                                                                                                                                                                     background: var(--freo-black);
                                                                                                                                                                                       padding: 16px 20px; font-weight: 600;
                                                                                                                                                                                         text-transform: uppercase; margin: 0;
                                                                                                                                                                                         }
                                                                                                                                                                                         .result-card .body { padding: 8px 24px 18px; }
                                                                                                                                                                                         .result-card .row {
                                                                                                                                                                                           display: grid; grid-template-columns: 1fr 1fr;
                                                                                                                                                                                             gap: 12px; padding: 16px 0;
                                                                                                                                                                                               border-bottom: 1px solid var(--freo-divider);
                                                                                                                                                                                               }
                                                                                                                                                                                               .result-card .row:last-child { border-bottom: none; }
                                                                                                                                                                                               
                                                                                                                                                                                               .cell .label {
                                                                                                                                                                                                 font-size: 12px; color: var(--freo-success);
                                                                                                                                                                                                   font-weight: 600; margin-bottom: 4px;
                                                                                                                                                                                                   }
                                                                                                                                                                                                   .cell .value {
                                                                                                                                                                                                     font-size: 20px; color: var(--freo-black);
                                                                                                                                                                                                       font-weight: 600;
                                                                                                                                                                                                       }
                                                                                                                                                                                                       .savings { color: var(--freo-warn); font-weight: 600; font-size: 15px; }
                                                                                                                                                                                                       .savings.less { color: var(--freo-success); }
                                                                                                                                                                                                       
                                                                                                                                                                                                       .info-section {
                                                                                                                                                                                                         max-width: 1100px;
                                                                                                                                                                                                           margin: 0 auto 60px;
                                                                                                                                                                                                             padding: 0 20px;
                                                                                                                                                                                                             }
                                                                                                                                                                                                             .info-section h2 {
                                                                                                                                                                                                               font-size: 22px; font-weight: 700;
                                                                                                                                                                                                                 margin: 30px 0 12px; color: var(--freo-black);
                                                                                                                                                                                                                 }
                                                                                                                                                                                                                 .info-section h3 {
                                                                                                                                                                                                                   font-size: 18px; font-weight: 700;
                                                                                                                                                                                                                     margin: 24px 0 10px; color: var(--freo-black);
                                                                                                                                                                                                                     }
                                                                                                                                                                                                                     .info-section p {
                                                                                                                                                                                                                       font-size: 14px; color: #4b5563;
                                                                                                                                                                                                                         margin-bottom: 14px;
                                                                                                                                                                                                                         }
                                                                                                                                                                                                                         
                                                                                                                                                                                                                         footer {
                                                                                                                                                                                                                           background: var(--freo-black);
                                                                                                                                                                                                                             color: #a8a8b0;
                                                                                                                                                                                                                               padding: 36px 20px;
                                                                                                                                                                                                                                 text-align: center; font-size: 13px;
                                                                                                                                                                                                                                 }
                                                                                                                                                                                                                                 footer .flogo { height: 26px; margin-bottom: 12px; }
                                                                                                                                                                                                                                 footer .footer-nav {
                                                                                                                                                                                                                                   display: flex; gap: 24px;
                                                                                                                                                                                                                                     justify-content: center;
                                                                                                                                                                                                                                       margin: 12px 0 16px; flex-wrap: wrap;
                                                                                                                                                                                                                                       }
                                                                                                                                                                                                                                       footer .footer-nav a {
                                                                                                                                                                                                                                         color: #d1d5db; text-decoration: none; font-size: 13px;
                                                                                                                                                                                                                                         }
                                                                                                                                                                                                                                         footer .footer-nav a:hover { color: #fff; }
                                                                                                                                                                                                                                         footer .copy a { color: #fff; text-decoration: none; }
                                                                                                                                                                                                                                         
                                                                                                                                                                                                                                         @media (max-width: 820px) {
                                                                                                                                                                                                                                           .input-card { grid-template-columns: 1fr; padding: 24px; }
                                                                                                                                                                                                                                             .results { grid-template-columns: 1fr; }
                                                                                                                                                                                                                                               .hero h1 { font-size: 32px; }
                                                                                                                                                                                                                                                 .topnav { padding: 14px 20px; }
                                                                                                                                                                                                                                                   .topnav .nav-pill { display: none; }
                                                                                                                                                                                                                                                   }
                                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                                   @media (prefers-reduced-motion: reduce) {
                                                                                                                                                                                                                                                     * { transition: none !important; animation: none !important; }
                                                                                                                                                                                                                                                     }