/* --- Generic Styles from main.css --- */
        @counter-style parenthesisalplist { system: extends lower-alpha; suffix: ') '; prefix: '('; }
        @counter-style parenthesiscapalplist { system: extends upper-alpha; suffix: ') '; prefix: '('; }
        @counter-style parenthesisnumlist { system: extends decimal; suffix: ') '; prefix: '('; }
        @counter-style sectionnumlist { system: extends decimal; suffix: '. '; prefix: '\00A7'; }
        @counter-style section2numlist { system: extends decimal; suffix: '. '; prefix: 'Section '; }
        @counter-style parenthesislowerromanlist { system: extends lower-roman; suffix: ') '; prefix: '('; }
        * {
          box-sizing: border-box;  
        }
        :root{
          --main-color:#1A48EE;
          --secondary-color:#008AFF;
          --tertiary-color:#2c20E6;
          --secondary-background:#f9f9f9;
          --main-background:#e5f3ff;
          --tertiary-background:#e6e5ea;
          --color-white:#ffffff;
          --color-error-dark: #c53030;
          --color-green: #16a34a;
          --color-green-dark: #047857;
          --color-light-green: #D1FAE5;
          --color-contrast-green:#065F46;
          --border-color:#e2e8f0;
          --color-gray:#4a5568;
          --color-light-gray:#ccc;
          --color-very-light-gray:#e0e0e0;
        }
        body { 
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
          background-color: var(--main-background);
          display: flex;
          flex-direction: column;
          height: 100%;
          min-height: 100vh;
        }
        h1{
          width: 100%;
          display: inline-block;
          text-align: center;
          margin-top: 0px;
          color: #1a202c;
        }
        p{
            margin-top: 0;
            margin-bottom: 16px;
        }
        .articlecontainer{
          margin: auto;
          max-width: 800px;
          padding: 20px 16px;
        }
        ul, ol {
            padding-left: 20px;
            list-style-position: outside;
        }
        li {
            margin-bottom: 1rem;
        }
        
        /* --- Component Styles adapted from calculators.css & W4 Tool --- */
        .card {
            background-color: var(--color-white);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        h1, h2, h3, h4 {
            color: var(--main-color);
        }
        h2 {
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
            margin-top: 0;
        }
        .results-section {
            display: none;
        }
        .step {
            display: none;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 20px;
            animation: fadeIn 0.5s;
        }
        .step.active {
            display: block;
        }
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            font-size: 0.875rem;
            font-weight: bold;
            color: var(--color-gray);
            margin-bottom: 0.25rem;
        }
        input[type="number"], input[type="text"], select {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid #cbd5e0;
            border-radius: 0.375rem;
            box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.05);
            font-size: 1rem;
            font-family: Arial, Helvetica, sans-serif;
            background-color: var(--color-white);
        }
        input:focus, select:focus {
            outline: none;
            border-color: var(--main-color);
            box-shadow: 0 0 0 3px rgba(26, 72, 238, 0.4);
        }
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            align-items: center;
        }
        .btn {
            background-color: var(--main-color);
            color: var(--color-white);
            font-weight: bold;
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
            transition: background-color 0.3s;
            cursor: pointer;
            font-size: 1rem;
        }
        .btn:hover {
            background-color: var(--secondary-color);
        }
        .btn-secondary {
            background-color: var(--color-gray);
        }
        .btn-secondary:hover {
            background-color: #2d3748;
        }
        .disclaimer {
            background-color: #fffbe6;
            border: 1px solid #ffe58f;
            padding: 15px;
            border-radius: 5px;
            margin: 25px 0;
            font-size: 14px;
        }
        .privacy-note {
            background-color: #e5f3ff;
            border: 1px solid var(--secondary-color);
            color: var(--main-color);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 2rem;
            font-size: 0.9rem;
            text-align: center;
        }
        .completed-form {
            border: 1px solid var(--border-color); padding: 20px; background-color: var(--secondary-background); border-radius: 5px;
        }
        .completed-form .form-line {
            display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color);
        }
        .completed-form .form-line:last-child {
            border-bottom: none;
        }
        .completed-form .form-line span:first-child {
            font-weight: bold; color: var(--main-color);
        }
        .explanation {
            margin-top: 25px;
        }
        .explanation .highlight {
            padding: 15px;
            background-color: var(--secondary-background);
            border-left: 4px solid #f0ad4e;
            border-radius: 0 5px 5px 0;
            margin-bottom: 15px;
        }
        .faq-item {
            margin-bottom: 20px;
        }
        .faq-item h4 {
            margin-bottom: 5px;
            color: var(--color-gray); /* Changed from --secondary-color for better contrast */
        }
        /* --- Accessibility Improvements --- */
        .progress-container {
            width: 100%;
            background-color: var(--border-color);
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .progress-bar {
            width: 20%;
            height: 1.2rem;
            background-color: var(--main-color);
            border-radius: 0.5rem;
            transition: width 0.4s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-white);
            font-size: 0.8rem;
            font-weight: bold;
        }
        .error-message {
            color: var(--color-error-dark);
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        input[aria-invalid="true"] {
            border-color: var(--color-error-dark);
        }
        fieldset {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        legend {
            font-weight: bold;
            color: var(--main-color); /* Changed for better contrast */
            padding: 0 0.5rem;
        }
        .wrapper{
             margin-left:285px;
             padding-left:10px;
             padding-right:10px;
             padding-top:48px;
             justify-content: space-evenly;
        }
        @media screen and (max-width:1280px){
            .wrapper{
                margin-left: auto;
                margin-right: auto;
            }
        }