/**
 * Plumber Salary Calculator USA 2026
 * File: /public_html/tools/plumber-salary-calculator/style.css
 */

/* ============================================================
   SR-ONLY PAGE TITLE (REQUIRED)
   ============================================================ */
.usajobskit-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ROOT / BASE
   ============================================================ */
.usk-tool {
    --usk-primary:       #1D4ED8;
    --usk-primary-hover: #1E40AF;
    --usk-navy:          #0F172A;
    --usk-success:       #10B981;
    --usk-error:         #DC2626;
    --usk-bg:            #F8FAFC;
    --usk-border:        #E5E7EB;
    --usk-text:          #111827;
    --usk-text-muted:    #6B7280;
    --usk-text-light:    #9CA3AF;
    --usk-white:         #FFFFFF;
    --usk-radius-sm:     6px;
    --usk-radius-md:     10px;
    --usk-radius-lg:     14px;
    --usk-shadow-sm:     0 8px 20px rgba(15, 23, 42, 0.06);
    --usk-shadow-md:     0 16px 40px rgba(15, 23, 42, 0.12);
    --usk-transition:    0.18s ease;
    --usk-max-width:     1120px;
    --usk-font:          system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.usk-tool {
    font-family: var(--usk-font);
    color:       var(--usk-text);
    background:  #FFFFFF;
}

.usk-tool section {
    padding:   48px 24px;
    margin:    0;
    border:    0;
    box-sizing: border-box;
}

.usk-tool * {
    box-sizing: border-box;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.usk-tool .usk-section-header {
    max-width: var(--usk-max-width);
    margin:    0 auto 24px;
    text-align: left;
}

.usk-tool .usk-section-title {
    font-size:   1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color:       var(--usk-navy);
    margin:      0 0 8px;
    letter-spacing: -0.01em;
}

.usk-tool .usk-section-desc {
    margin:      0;
    font-size:   0.95rem;
    color:       var(--usk-text-muted);
    max-width:   620px;
}

/* Simple sr-only table utility for chart fallback */
.usk-tool .usk-sr-table {
    font-size: 0.82rem;
}

/* ============================================================
   HERO
   ============================================================ */
.usk-tool .usk-hero {
    background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 55%, #DBEAFE 100%);
    border-bottom: 1px solid #E5E7EB;
    padding: 56px 24px 44px;
}

.usk-tool .usk-hero-inner {
    max-width:    var(--usk-max-width);
    margin:       0 auto;
    text-align:   left;
}

.usk-tool .usk-hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       4px 10px;
    border-radius: 999px;
    background:    rgba(37, 99, 235, 0.08);
    color:         var(--usk-primary);
    font-size:     0.75rem;
    font-weight:   600;
    margin-bottom: 14px;
}

.usk-tool .usk-hero-badge svg {
    color: var(--usk-primary);
}

.usk-tool .usk-hero-title {
    font-size:      2.2rem;
    line-height:    1.15;
    font-weight:    800;
    color:          var(--usk-navy);
    margin:         0 0 10px;
    letter-spacing: -0.03em;
}

.usk-tool .usk-hero-accent {
    color: var(--usk-primary);
}

.usk-tool .usk-hero-subtitle {
    margin:      0 0 14px;
    max-width:   620px;
    font-size:   0.98rem;
    color:       var(--usk-text-muted);
    line-height: 1.6;
}

.usk-tool .usk-hero-trust {
    display:      inline-flex;
    align-items:  center;
    flex-wrap:    wrap;
    gap:          6px;
    font-size:    0.8rem;
    color:        var(--usk-text-light);
    background:   #FFFFFF;
    padding:      6px 10px;
    border-radius: 999px;
    box-shadow:   0 10px 25px rgba(15, 23, 42, 0.08);
    border:       1px solid rgba(148, 163, 184, 0.35);
}

.usk-tool .usk-trust-dot {
    width:           7px;
    height:          7px;
    border-radius:   999px;
    background:      var(--usk-success);
    box-shadow:      0 0 0 3px rgba(16, 185, 129, 0.25);
}

.usk-tool .usk-trust-sep {
    color: var(--usk-border);
}

/* ============================================================
   KEY FACTS
   ============================================================ */
.usk-tool .usk-key-facts {
    background: var(--usk-bg);
    border-bottom: 1px solid var(--usk-border);
    padding: 36px 24px 32px;
}

.usk-tool .usk-key-facts-grid {
    max-width:             var(--usk-max-width);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   16px;
}

.usk-tool .usk-fact-card {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-md);
    padding:       16px 14px;
    display:       flex;
    gap:          10px;
    align-items:   flex-start;
    border:        1px solid var(--usk-border);
}

.usk-tool .usk-fact-icon {
    width:           34px;
    height:          34px;
    min-width:       34px;
    border-radius:   999px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #FFFFFF;
    font-size:       0.8rem;
}

.usk-tool .usk-fact-icon--blue {
    background: #1D4ED8;
}

.usk-tool .usk-fact-icon--green {
    background: #10B981;
}

.usk-tool .usk-fact-icon--orange {
    background: #FB923C;
}

.usk-tool .usk-fact-icon--purple {
    background: #A855F7;
}

.usk-tool .usk-fact-body strong {
    display:     block;
    font-size:   0.9rem;
    font-weight: 700;
    margin-bottom: 3px;
    color:       var(--usk-navy);
}

.usk-tool .usk-fact-body span {
    font-size:   0.8rem;
    color:       var(--usk-text-muted);
    line-height: 1.5;
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.usk-tool .usk-audience {
    background: #FFFFFF;
}

.usk-tool .usk-audience-grid {
    max-width:             var(--usk-max-width);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   16px;
}

.usk-tool .usk-audience-card {
    border-radius: var(--usk-radius-md);
    border:        1px solid var(--usk-border);
    background:    #FFFFFF;
    padding:       16px 16px 14px;
    display:       flex;
    flex-direction: column;
    gap:           6px;
}

.usk-tool .usk-audience-icon {
    font-size:   1.35rem;
    line-height: 1;
}

.usk-tool .usk-audience-card strong {
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-audience-card p {
    margin:      0;
    font-size:   0.84rem;
    color:       var(--usk-text-muted);
    line-height: 1.6;
}

/* ============================================================
   CALCULATOR SECTION
   ============================================================ */
.usk-tool .usk-calculator-section {
    background: #FFFFFF;
    padding:    40px 24px 48px;
}

.usk-tool .usk-calc-wrapper {
    max-width:     var(--usk-max-width);
    margin:        0 auto;
    background:    #FFFFFF;
    border-radius: var(--usk-radius-lg);
    border:        1px solid var(--usk-border);
    box-shadow:    var(--usk-shadow-sm);
    overflow:      hidden;
}

.usk-tool .usk-calc-header {
    padding:       22px 24px 18px;
    border-bottom: 1px solid var(--usk-border);
    display:       flex;
    flex-direction: column;
    gap:           4px;
    background:    linear-gradient(135deg, rgba(209, 213, 219, 0.18), #FFFFFF);
}

.usk-tool .usk-calc-title {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin:        0;
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--usk-navy);
}

.usk-tool .usk-calc-title svg {
    color: var(--usk-primary);
}

.usk-tool .usk-calc-subtitle {
    margin:      0;
    font-size:   0.85rem;
    color:       var(--usk-text-muted);
}

/* ============================================================
   FORM
   ============================================================ */
.usk-tool .usk-form {
    padding:    24px 24px 28px;
    background: #FFFFFF;
}

.usk-tool .usk-form-section {
    padding:       16px 0 4px;
    border-bottom: 1px dashed var(--usk-border);
}

.usk-tool .usk-form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.usk-tool .usk-form-section-title {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin:        0 0 10px;
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--usk-navy);
}

.usk-tool .usk-step-num {
    width:           22px;
    height:          22px;
    border-radius:   999px;
    background:      var(--usk-primary);
    color:           #FFFFFF;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.78rem;
    font-weight:     700;
}

.usk-tool .usk-optional-tag {
    font-size:   0.78rem;
    font-weight: 500;
    color:       var(--usk-text-light);
}

.usk-tool .usk-form-row {
    display:        grid;
    grid-template-columns: 1fr;
    gap:            14px;
    margin-bottom:  12px;
}

.usk-tool .usk-form-row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.usk-tool .usk-form-group {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.usk-tool .usk-label {
    font-size:   0.87rem;
    font-weight: 600;
    color:       var(--usk-navy);
}

.usk-tool .usk-required {
    color: var(--usk-error);
    margin-left: 2px;
    font-size: 0.75rem;
}

.usk-tool .usk-input,
.usk-tool .usk-select {
    width:        100%;
    border-radius: var(--usk-radius-md);
    border:       1px solid var(--usk-border);
    padding:      10px 12px;
    font-size:    0.9rem;
    color:        var(--usk-text);
    background:   #FFFFFF;
    min-height:   48px;
    line-height:  1.2;
    outline:      none;
    transition:   border-color var(--usk-transition), box-shadow var(--usk-transition), background-color var(--usk-transition);
    appearance:   none;
}

.usk-tool .usk-input:focus,
.usk-tool .usk-select:focus {
    border-color: var(--usk-primary);
    box-shadow:   0 0 0 1px rgba(37, 99, 235, 0.15);
}

.usk-tool .usk-input::placeholder {
    color: var(--usk-text-light);
}

/* Input & select error / success states */
.usk-tool .usk-input--error,
.usk-tool .usk-select.usk-input--error {
    border-color: var(--usk-error);
    box-shadow:   0 0 0 1px rgba(220, 38, 38, 0.1);
}

.usk-tool .usk-input--success,
.usk-tool .usk-select.usk-input--success {
    border-color: var(--usk-success);
    box-shadow:   0 0 0 1px rgba(16, 185, 129, 0.12);
}

/* Select wrapper for custom arrow */
.usk-tool .usk-select-wrapper {
    position: relative;
}

.usk-tool .usk-select-wrapper select {
    padding-right: 40px;
}

.usk-tool .usk-select-arrow {
    position:       absolute;
    right:          12px;
    top:            50%;
    transform:      translateY(-50%);
    pointer-events: none;
    color:          var(--usk-text-light);
}

/* Input with icon */
.usk-tool .usk-input-with-icon {
    position: relative;
}

.usk-tool .usk-input-icon {
    position:       absolute;
    left:           16px !important;
    top:            50%;
    transform:      translateY(-50%);
    pointer-events: none;
    color:          var(--usk-text-light);
    z-index:        1;
    font-size:      0.78rem;
}

.usk-tool .usk-input-with-icon input {
    padding-left: 52px !important;
}

/* Field help / error */
.usk-tool .usk-field-help {
    font-size:  0.78rem;
    color:      var(--usk-text-light);
}

.usk-tool .usk-field-error {
    font-size:   0.78rem;
    color:       var(--usk-error);
    display:     none;
}

/* Global form error */
.usk-tool .usk-form-error-global {
    margin-top:    12px;
    padding:       10px 12px;
    border-radius: var(--usk-radius-md);
    border:        1px solid rgba(220, 38, 38, 0.3);
    background:    #FEF2F2;
    color:         #991B1B;
    font-size:     0.83rem;
    display:       flex;
    align-items:   center;
}

/* Form actions */
.usk-tool .usk-form-actions {
    display:        flex;
    align-items:    center;
    justify-content: flex-start;
    gap:           10px;
    margin-top:    18px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.usk-tool .usk-btn {
    border-radius: 999px;
    border:        1px solid transparent;
    font-size:     0.88rem;
    font-weight:   600;
    cursor:        pointer;
    padding:       0 18px;
    height:        44px;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:          6px;
    transition:    background-color var(--usk-transition),
                   border-color var(--usk-transition),
                   color var(--usk-transition),
                   box-shadow var(--usk-transition),
                   transform 0.08s ease;
    white-space:   nowrap;
}

.usk-tool .usk-btn svg {
    display: block;
}

.usk-tool .usk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.9);
}

/* Primary */
.usk-tool .usk-btn--primary {
    background:  var(--usk-primary);
    color:       #FFFFFF;
    border-color: var(--usk-primary);
    min-width:   170px;
}

.usk-tool .usk-btn--primary:hover {
    background:    var(--usk-primary-hover);
    border-color:  var(--usk-primary-hover);
    box-shadow:    0 12px 22px rgba(37, 99, 235, 0.32);
    transform:     translateY(-0.5px);
}

.usk-tool .usk-btn--primary:disabled {
    cursor:      not-allowed;
    opacity:     0.7;
    box-shadow:  none;
    transform:   none;
}

/* Ghost */
.usk-tool .usk-btn--ghost {
    background:  #FFFFFF;
    color:       var(--usk-text-muted);
    border-color: var(--usk-border);
}

.usk-tool .usk-btn--ghost:hover {
    background:   var(--usk-bg);
    border-color: var(--usk-primary);
    color:        var(--usk-primary);
}

/* Outline small */
.usk-tool .usk-btn--outline-sm {
    background:   #FFFFFF;
    border-radius: 999px;
    border-color: var(--usk-border);
    color:        var(--usk-text-muted);
    font-size:    0.8rem;
    height:       34px;
    padding:      0 12px;
}

.usk-tool .usk-btn--outline-sm:hover {
    border-color: var(--usk-primary);
    color:        var(--usk-primary);
}

/* Button loading state */
.usk-tool .usk-btn-loading {
    display:     none;
    align-items: center;
    gap:         8px;
    font-size:   0.86rem;
}

.usk-tool .usk-spinner {
    width:          14px;
    height:         14px;
    border-radius:  999px;
    border:         2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    animation:      usk-spin 0.8s linear infinite;
}

@keyframes usk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   RESULTS SECTION
   ============================================================ */
.usk-tool .usk-results-section {
    background: var(--usk-bg);
    padding:    44px 24px 48px;
    border-top: 1px solid var(--usk-border);
}

.usk-tool .usk-results-wrapper {
    max-width:  var(--usk-max-width);
    margin:     0 auto;
}

.usk-tool .usk-results-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:           14px;
    margin-bottom: 18px;
}

.usk-tool .usk-results-title {
    margin:      0 0 4px;
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-results-meta {
    margin:    0;
    font-size: 0.8rem;
    color:     var(--usk-text-light);
}

.usk-tool .usk-results-actions {
    display:       flex;
    align-items:   center;
    justify-content: flex-end;
    flex-wrap:     wrap;
    gap:           8px;
}

/* Highlight */
.usk-tool .usk-result-highlight {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-lg);
    padding:       24px 24px 20px;
    border:        1px solid rgba(37, 99, 235, 0.2);
    box-shadow:    var(--usk-shadow-sm);
    margin-bottom: 22px;
}

.usk-tool .usk-result-highlight-label {
    font-size:   0.86rem;
    font-weight: 600;
    color:       var(--usk-text-muted);
    margin-bottom: 4px;
}

.usk-tool .usk-result-highlight-amount {
    font-size:   2.35rem;
    font-weight: 800;
    color:       var(--usk-primary);
    margin-bottom: 4px;
    letter-spacing: -0.03em;
}

.usk-tool .usk-result-highlight-context {
    font-size:  0.83rem;
    color:      var(--usk-text-light);
}

/* Summary cards */
.usk-tool .usk-summary-cards {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   12px;
    margin-bottom:         22px;
}

.usk-tool .usk-summary-card {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-md);
    padding:       12px 14px;
    border:        1px solid var(--usk-border);
}

.usk-tool .usk-summary-card--highlight {
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow:   0 12px 26px rgba(16, 185, 129, 0.18);
}

.usk-tool .usk-summary-card-label {
    font-size:   0.8rem;
    color:       var(--usk-text-muted);
    margin-bottom: 4px;
}

.usk-tool .usk-summary-card-value {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

/* Breakdown table */
.usk-tool .usk-breakdown-section {
    margin-top:    10px;
    margin-bottom: 22px;
}

.usk-tool .usk-breakdown-title {
    margin:      0 0 8px;
    font-size:   0.98rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-breakdown-table {
    width:          100%;
    border-collapse: collapse;
    background:     #FFFFFF;
    border-radius:  var(--usk-radius-md);
    overflow:       hidden;
    border:         1px solid var(--usk-border);
    font-size:      0.83rem;
}

.usk-tool .usk-breakdown-table th,
.usk-tool .usk-breakdown-table td {
    padding:     10px 16px;
    border-bottom: 1px solid var(--usk-border);
}

.usk-tool .usk-breakdown-table th {
    background:    var(--usk-bg);
    text-align:    left;
    font-weight:   600;
    color:         var(--usk-navy);
}

.usk-tool .usk-breakdown-table td {
    color: var(--usk-text-muted);
}

.usk-tool .usk-breakdown-table tr:last-child td {
    border-bottom: none;
}

.usk-tool .usk-breakdown-row--highlight {
    background: #EEF2FF;
}

.usk-tool .usk-breakdown-row--highlight td {
    color: var(--usk-navy);
}

/* Utility */
.usk-tool .usk-text-right {
    text-align: right;
}

/* Formula section */
.usk-tool .usk-formula-section {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-md);
    border:        1px solid var(--usk-border);
    padding:       14px 16px;
    margin-bottom: 22px;
}

.usk-tool .usk-formula-title {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.86rem;
    font-weight: 600;
    color:       var(--usk-navy);
    margin-bottom: 6px;
}

.usk-tool .usk-formula-title svg {
    color: var(--usk-primary);
}

.usk-tool .usk-formula-box {
    background:    #F9FAFB;
    border-radius: 8px;
    padding:       10px 12px;
    font-size:     0.8rem;
    color:         var(--usk-text-muted);
    overflow-x:    auto;
}

.usk-tool .usk-formula-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Chart section */
.usk-tool .usk-chart-section {
    margin-bottom: 22px;
}

.usk-tool .usk-chart-title {
    margin:      0 0 8px;
    font-size:   0.98rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-chart-container {
    max-width:    360px;
    margin:       0 auto 10px;
    background:   #FFFFFF;
    border-radius: var(--usk-radius-md);
    padding:      16px;
    border:       1px solid var(--usk-border);
}

.usk-tool .usk-chart-container canvas {
    display: block;
}

/* Insights */
.usk-tool .usk-insights-section {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-md);
    border:        1px solid var(--usk-border);
    padding:       14px 16px 12px;
    margin-bottom: 18px;
}

.usk-tool .usk-insights-title {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.86rem;
    font-weight: 600;
    color:       var(--usk-navy);
    margin-bottom: 6px;
}

.usk-tool .usk-insights-title svg {
    color: var(--usk-primary);
}

.usk-tool .usk-insights-list {
    display:        grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:            10px;
}

.usk-tool .usk-insight-card {
    border-radius: var(--usk-radius-md);
    border:        1px solid var(--usk-border);
    padding:       10px 10px 8px;
    background:    #FFFFFF;
}

.usk-tool .usk-insight-card--overtime_share {
    border-color: rgba(37, 99, 235, 0.4);
}

.usk-tool .usk-insight-card--billable_rate {
    border-color: rgba(16, 185, 129, 0.4);
}

.usk-tool .usk-insight-title {
    font-size:   0.84rem;
    font-weight: 600;
    color:       var(--usk-navy);
    margin-bottom: 3px;
}

.usk-tool .usk-insight-message {
    margin:      0;
    font-size:   0.8rem;
    color:       var(--usk-text-muted);
    line-height: 1.5;
}

/* Results disclaimer */
.usk-tool .usk-results-disclaimer {
    margin-top:    10px;
    font-size:     0.78rem;
    color:         var(--usk-text-light);
    display:       flex;
    gap:           6px;
    align-items:   flex-start;
}

.usk-tool .usk-results-disclaimer svg {
    margin-top: 1px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.usk-tool .usk-how-it-works {
    background: #FFFFFF;
}

.usk-tool .usk-methods-grid {
    max-width:             var(--usk-max-width);
    margin:                0 auto 18px;
    display:               grid;
    grid-template-columns: 1.4fr 1.1fr;
    gap:                   16px;
}

.usk-tool .usk-method-card {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-lg);
    border:        1px solid var(--usk-border);
    padding:       18px 18px 14px;
}

.usk-tool .usk-method-card--featured {
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow:   0 18px 38px rgba(37, 99, 235, 0.16);
}

.usk-tool .usk-method-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 8px;
    border-radius: 999px;
    background:    rgba(37, 99, 235, 0.08);
    color:         var(--usk-primary);
    font-size:     0.7rem;
    font-weight:   600;
    margin-bottom: 6px;
}

.usk-tool .usk-method-title {
    margin:      0 0 6px;
    font-size:   0.98rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-method-formula {
    font-size:   0.78rem;
    color:       var(--usk-text-muted);
    background:  #F9FAFB;
    border-radius: 8px;
    padding:     8px 10px;
    margin-bottom: 6px;
    overflow-x:  auto;
}

.usk-tool .usk-method-formula code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.usk-tool .usk-method-card p {
    margin:      0 0 4px;
    font-size:   0.83rem;
    color:       var(--usk-text-muted);
    line-height: 1.6;
}

.usk-tool .usk-method-example {
    margin-top:    4px;
    padding-top:   4px;
    border-top:    1px dashed var(--usk-border);
    font-size:     0.8rem;
    color:         var(--usk-text-muted);
    line-height:   1.5;
}

.usk-tool .usk-method-example strong {
    color: var(--usk-navy);
}

/* Steps */
.usk-tool .usk-steps-list {
    max-width: var(--usk-max-width);
    margin:    0 auto;
}

.usk-tool .usk-steps-title {
    margin:      0 0 8px;
    font-size:   0.98rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-ordered-steps {
    list-style:  none;
    padding:     0;
    margin:      0;
    display:     flex;
    flex-direction: column;
    gap:        10px;
}

.usk-tool .usk-ordered-steps li {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       10px 12px;
    border-radius: var(--usk-radius-md);
    background:    #F9FAFB;
    border:        1px solid var(--usk-border);
}

.usk-tool .usk-step-icon {
    width:           22px;
    height:          22px;
    min-width:       22px;
    border-radius:   999px;
    background:      #E5E7EB;
    color:           #4B5563;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.78rem;
    font-weight:     700;
}

.usk-tool .usk-ordered-steps strong {
    font-size:   0.86rem;
    color:       var(--usk-navy);
}

.usk-tool .usk-ordered-steps p {
    margin:      3px 0 0;
    font-size:   0.8rem;
    color:       var(--usk-text-muted);
    line-height: 1.5;
}

/* ============================================================
   KEY INFORMATION
   ============================================================ */
.usk-tool .usk-key-info {
    background: var(--usk-bg);
}

.usk-tool .usk-info-grid {
    max-width:             var(--usk-max-width);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   14px;
}

.usk-tool .usk-info-card {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-md);
    padding:       14px 16px 12px;
    border:        1px solid var(--usk-border);
}

.usk-tool .usk-info-card h3 {
    margin:      0 0 6px;
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-info-card p {
    margin:      0;
    font-size:   0.84rem;
    color:       var(--usk-text-muted);
    line-height: 1.6;
}

/* ============================================================
   EXAMPLES
   ============================================================ */
.usk-tool .usk-examples {
    background: #FFFFFF;
}

.usk-tool .usk-examples-grid {
    max-width:             var(--usk-max-width);
    margin:                0 auto 16px;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   16px;
}

.usk-tool .usk-example-card {
    background:    #FFFFFF;
    border-radius: var(--usk-radius-lg);
    border:        1px solid var(--usk-border);
    padding:       14px 16px 12px;
}

.usk-tool .usk-example-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 8px;
    border-radius: 999px;
    font-size:     0.72rem;
    font-weight:   600;
    margin-bottom: 4px;
    color:         #FFFFFF;
}

.usk-tool .usk-example-badge--blue {
    background: #1D4ED8;
}

.usk-tool .usk-example-badge--green {
    background: #10B981;
}

.usk-tool .usk-example-badge--orange {
    background: #F97316;
}

.usk-tool .usk-example-badge--red {
    background: #DC2626;
}

.usk-tool .usk-example-title {
    margin:      0 0 8px;
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--usk-navy);
}

.usk-tool .usk-example-details {
    margin-bottom: 6px;
}

.usk-tool .usk-example-row {
    display:        flex;
    justify-content: space-between;
    align-items:    baseline;
    font-size:      0.8rem;
    color:          var(--usk-text-muted);
    margin-bottom:  2px;
}

.usk-tool .usk-example-row strong {
    color: var(--usk-navy);
    font-weight: 600;
}

.usk-tool .usk-example-calc {
    font-size:   0.8rem;
    color:       var(--usk-text-muted);
    line-height: 1.5;
}

.usk-tool .usk-example-calc p {
    margin: 0 0 2px;
}

.usk-tool .usk-example-result {
    font-weight: 700;
    color:       var(--usk-primary);
}

.usk-tool .usk-examples-note {
    max-width:  var(--usk-max-width);
    margin:     0 auto;
    font-size:  0.8rem;
    color:      var(--usk-text-light);
    display:    flex;
    align-items: flex-start;
    gap:        6px;
}

/* ============================================================
   FAQ
   ============================================================ */
.usk-tool .usk-faq {
    background: var(--usk-white);
    padding:    56px 24px;
}

.usk-tool .usk-faq-list {
    max-width: 820px;
    margin:    0 auto;
    display:   flex;
    flex-direction: column;
    gap:       10px;
}

.usk-tool .usk-faq-item {
    border:        1px solid var(--usk-border);
    border-radius: var(--usk-radius-md);
    overflow:      hidden;
    transition:    border-color 0.15s ease;
}

.usk-tool .usk-faq-item:has(.usk-faq-question[aria-expanded="true"]) {
    border-color: var(--usk-primary);
}

.usk-tool .usk-faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         18px 22px;
    background:      var(--usk-white);
    border:          none;
    cursor:          pointer;
    font-size:       0.9rem;
    font-weight:     600;
    color:           var(--usk-navy);
    font-family:     var(--usk-font);
    text-align:      left;
    gap:             12px;
    transition:      background 0.15s ease;
}

.usk-tool .usk-faq-question:hover {
    background: var(--usk-bg);
}

.usk-tool .usk-faq-question[aria-expanded="true"] {
    background: var(--usk-bg);
    color:      var(--usk-primary);
}

.usk-tool .usk-faq-icon {
    flex-shrink: 0;
    transition:  transform 0.25s ease;
    color:       var(--usk-text-light);
}

.usk-tool .usk-faq-question[aria-expanded="true"] .usk-faq-icon {
    transform: rotate(180deg);
    color:     var(--usk-primary);
}

.usk-tool .usk-faq-answer {
    padding:     0 22px 18px;
    font-size:   0.86rem;
    color:       var(--usk-text-muted);
    line-height: 1.7;
}

.usk-tool .usk-faq-answer p {
    margin: 0;
}

/* ============================================================
   DATA SOURCES
   ============================================================ */
.usk-tool .usk-sources {
    background: var(--usk-bg);
    padding:    48px 24px;
}

.usk-tool .usk-sources-list {
    max-width:      820px;
    margin:         0 auto 20px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.usk-tool .usk-source-item {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    background:    var(--usk-white);
    border:        1px solid var(--usk-border);
    border-radius: var(--usk-radius-sm);
    padding:       14px 16px;
    font-size:     0.85rem;
    color:         var(--usk-text-muted);
}

.usk-tool .usk-source-item svg {
    color:       var(--usk-primary);
    flex-shrink: 0;
    margin-top:  2px;
}

.usk-tool .usk-source-item strong {
    display:      block;
    color:        var(--usk-navy);
    font-size:    0.85rem;
    margin-bottom: 3px;
}

.usk-tool .usk-source-link {
    color:      var(--usk-primary);
    font-size:  0.78rem;
    word-break: break-all;
}

.usk-tool .usk-assumption-note {
    max-width:     820px;
    margin:        0 auto;
    font-size:     0.82rem;
    color:         var(--usk-text-muted);
    background:    var(--usk-white);
    border:        1px solid var(--usk-border);
    border-radius: var(--usk-radius-sm);
    padding:       14px 16px;
    line-height:   1.6;
}

.usk-tool .usk-assumption-note strong {
    color: var(--usk-navy);
}

/* ============================================================
   PRIVACY
   ============================================================ */
.usk-tool .usk-privacy {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    padding:    40px 24px;
    border-top: 1px solid #A7F3D0;
    border-bottom: 1px solid #A7F3D0;
}

.usk-tool .usk-privacy-inner {
    display:     flex;
    align-items: center;
    gap:         20px;
    max-width:   820px;
    margin:      0 auto;
}

.usk-tool .usk-privacy-icon {
    width:           56px;
    height:          56px;
    min-width:       56px;
    border-radius:   50%;
    background:      var(--usk-success);
    color:           var(--usk-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.usk-tool .usk-privacy-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #065F46;
    margin:      0 0 6px;
}

.usk-tool .usk-privacy-content p {
    font-size:   0.85rem;
    color:       #047857;
    margin:      0;
    line-height: 1.6;
}

/* ============================================================
   TRUST / DEVELOPER SECTION
   ============================================================ */
.usk-tool .usk-trust {
    background: var(--usk-white);
    padding:    40px 24px;
    border-top: 1px solid var(--usk-border);
}

.usk-tool .usk-trust-card {
    display:       flex;
    align-items:   flex-start;
    gap:           20px;
    max-width:     820px;
    margin:        0 auto;
    background:    var(--usk-bg);
    border:        1.5px solid var(--usk-border);
    border-radius: var(--usk-radius-lg);
    padding:       28px 28px 24px;
}

.usk-tool .usk-trust-avatar {
    flex-shrink: 0;
    position:    relative;
}

.usk-tool .usk-trust-avatar img {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--usk-primary);
    display:       block;
}

.usk-tool .usk-trust-avatar-fallback {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--usk-primary);
    color:           var(--usk-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.2rem;
    font-weight:     700;
}

.usk-tool .usk-trust-label {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--usk-text-muted);
    margin-bottom:  4px;
}

.usk-tool .usk-trust-name {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-size:       1.05rem;
    font-weight:     700;
    color:           var(--usk-navy);
    text-decoration: none;
    margin-bottom:   8px;
    transition:      color 0.15s ease;
}

.usk-tool .usk-trust-name:hover {
    color:           var(--usk-primary);
    text-decoration: none;
}

.usk-tool .usk-trust-statement {
    font-size:   0.84rem;
    color:       var(--usk-text-muted);
    margin:      0 0 12px;
    line-height: 1.6;
}

.usk-tool .usk-trust-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px 20px;
    font-size: 0.78rem;
    color:     var(--usk-text-muted);
}

.usk-tool .usk-trust-meta span {
    display:     flex;
    align-items: center;
    gap:         5px;
}

/* ============================================================
   RELATED TOOLS
   ============================================================ */
.usk-tool .usk-related-tools {
    background: var(--usk-bg);
    padding:    56px 24px;
}

.usk-tool .usk-related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   14px;
    max-width:             var(--usk-max-width);
    margin:                0 auto;
}

.usk-tool .usk-related-card {
    display:         flex;
    align-items:     center;
    gap:             14px;
    background:      var(--usk-white);
    border:          1.5px solid var(--usk-border);
    border-radius:   var(--usk-radius-md);
    padding:         16px 18px;
    text-decoration: none;
    transition:      var(--usk-transition);
    color:           var(--usk-text);
}

.usk-tool .usk-related-card:hover {
    border-color:    var(--usk-primary);
    box-shadow:      var(--usk-shadow-sm);
    transform:       translateY(-1px);
    text-decoration: none;
    color:           var(--usk-text);
}

.usk-tool .usk-related-icon {
    width:           40px;
    height:          40px;
    min-width:       40px;
    border-radius:   var(--usk-radius-sm);
    background:      var(--usk-bg);
    color:           var(--usk-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.usk-tool .usk-related-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.usk-tool .usk-related-body strong {
    font-size:     0.88rem;
    font-weight:   700;
    color:         var(--usk-navy);
    line-height:   1.3;
}

.usk-tool .usk-related-body span {
    font-size:      0.77rem;
    color:          var(--usk-text-muted);
    line-height:    1.4;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

.usk-tool .usk-related-arrow {
    color:       var(--usk-text-light);
    flex-shrink: 0;
    transition:  transform 0.15s ease, color 0.15s ease;
}

.usk-tool .usk-related-card:hover .usk-related-arrow {
    transform: translateX(3px);
    color:     var(--usk-primary);
}

/* ============================================================
   RESPONSIVE — TABLET (max-width: 900px)
   ============================================================ */
@media (max-width: 900px) {

    .usk-tool .usk-hero-title {
        font-size: 2rem;
    }

    .usk-tool .usk-key-facts-grid {
        grid-template-columns: 1fr 1fr;
    }

    .usk-tool .usk-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .usk-tool .usk-methods-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-info-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-examples-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-calc-wrapper {
        border-radius: var(--usk-radius-lg);
    }

    .usk-tool .usk-form {
        padding: 24px 24px 28px;
    }

    .usk-tool .usk-result-highlight-amount {
        font-size: 2.5rem;
    }

}

/* ============================================================
   RESPONSIVE — MOBILE (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {

    .usk-tool section {
        padding: 36px 16px;
    }

    .usk-tool .usk-hero {
        padding: 48px 16px 40px;
    }

    .usk-tool .usk-hero-title {
        font-size: 1.65rem;
        letter-spacing: -0.01em;
    }

    .usk-tool .usk-hero-subtitle {
        font-size: 0.95rem;
    }

    .usk-tool .usk-hero-trust {
        font-size: 0.75rem;
    }

    .usk-tool .usk-key-facts {
        padding: 28px 16px;
    }

    .usk-tool .usk-key-facts-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-audience-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-calculator-section {
        padding: 0 16px 40px;
    }

    .usk-tool .usk-calc-header {
        padding: 22px 20px;
    }

    .usk-tool .usk-calc-title {
        font-size: 1.1rem;
    }

    .usk-tool .usk-form {
        padding: 20px 16px 24px;
    }

    .usk-tool .usk-form-row--two {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-btn--primary {
        min-width:  unset;
        width:      100%;
    }

    .usk-tool .usk-btn--ghost {
        width: 100%;
    }

    .usk-tool .usk-form-actions {
        flex-direction: column;
    }

    .usk-tool .usk-result-highlight {
        padding: 28px 22px;
    }

    .usk-tool .usk-result-highlight-amount {
        font-size: 2rem;
    }

    .usk-tool .usk-results-header {
        flex-direction: column;
        gap: 14px;
    }

    .usk-tool .usk-results-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .usk-tool .usk-btn--outline-sm {
        height:    36px;
        padding:   0 11px;
        font-size: 0.78rem;
    }

    .usk-tool .usk-summary-cards {
        grid-template-columns: 1fr 1fr;
    }

    .usk-tool .usk-breakdown-table th,
    .usk-tool .usk-breakdown-table td {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .usk-tool .usk-section-title {
        font-size: 1.35rem;
    }

    .usk-tool .usk-methods-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .usk-tool .usk-method-card {
        padding: 22px 18px 18px;
    }

    .usk-tool .usk-ordered-steps li {
        padding: 14px 16px;
        gap: 12px;
    }

    .usk-tool .usk-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .usk-tool .usk-examples-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-trust-card {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        padding:        24px 18px 20px;
    }

    .usk-tool .usk-trust-meta {
        justify-content: center;
    }

    .usk-tool .usk-privacy-inner {
        flex-direction: column;
        text-align:     center;
    }

    .usk-tool .usk-related-grid {
        grid-template-columns: 1fr;
    }

    .usk-tool .usk-chart-container {
        max-width: 280px;
    }

    .usk-tool .usk-faq-question {
        font-size: 0.85rem;
        padding:   16px 16px;
    }

    .usk-tool .usk-faq-answer {
        padding: 0 16px 14px;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

    .usk-tool .usk-hero,
    .usk-tool .usk-key-facts,
    .usk-tool .usk-audience,
    .usk-tool .usk-calculator-section,
    .usk-tool .usk-how-it-works,
    .usk-tool .usk-key-info,
    .usk-tool .usk-examples,
    .usk-tool .usk-faq,
    .usk-tool .usk-sources,
    .usk-tool .usk-privacy,
    .usk-tool .usk-trust,
    .usk-tool .usk-related-tools {
        display: none !important;
    }

    .usk-tool .usk-results-section {
        display: block !important;
        padding: 0;
    }

    .usk-tool .usk-results-actions {
        display: none !important;
    }

    .usk-tool .usk-result-highlight {
        background:    none !important;
        border:        2px solid #000;
        box-shadow:    none;
        color:         #000;
    }

    .usk-tool .usk-result-highlight-label,
    .usk-tool .usk-result-highlight-amount,
    .usk-tool .usk-result-highlight-context {
        color: #000 !important;
    }

    .usk-tool .usk-breakdown-table th,
    .usk-tool .usk-breakdown-table td {
        border: 1px solid #ccc !important;
    }

    .usk-tool .usk-breakdown-row--highlight {
        background: #f0f0f0 !important;
    }

    .usk-tool .usk-breakdown-row--highlight td {
        color: #000 !important;
    }

    .usk-tool .usk-chart-section {
        display: none !important;
    }

    .usk-tool .usk-results-disclaimer {
        font-size: 0.75rem;
    }

    .usk-tool * {
        box-shadow: none !important;
    }

}