.lakelaw-means-test-wrap {
--red: #cc0000;
--red-hover: #b30000;
--red-dark: #990000;
--red-light: #ff1a1a;
--red-pale: #ffe6e6;
--red-glow: rgba(204,0,0,.15);
--black: #222222;
--black-true: #000000;
--gray-900: #333333;
--gray-700: #4a4a4a;
--gray-600: #666666;
--gray-500: #888888;
--gray-400: #aaaaaa;
--gray-300: #cccccc;
--gray-200: #e2e2e2;
--gray-100: #f2f2f2;
--white: #ffffff;
--offwhite: #fafafa;
--font: 'Open Sans', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
--radius: 4px;
--radius-lg: 8px;
--shadow: 0 2px 12px rgba(0,0,0,.08);
--shadow-lg: 0 4px 24px rgba(0,0,0,.1);
font-family: var(--font);
color: var(--gray-700);
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.6;
} .lakelaw-means-test-wrap *,
.lakelaw-means-test-wrap *::before,
.lakelaw-means-test-wrap *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
} .lakelaw-means-test-wrap .main-container {
width: 100%;
max-width: 620px;
padding: 32px 20px 48px;
} .lakelaw-means-test-wrap .progress-labels {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.lakelaw-means-test-wrap .progress-label {
font-size: 10px;
font-weight: 700;
color: var(--gray-400);
text-align: center;
flex: 1;
transition: color .4s;
text-transform: uppercase;
letter-spacing: 1px;
}
.lakelaw-means-test-wrap .progress-label.active { color: var(--red); }
.lakelaw-means-test-wrap .progress-track {
height: 3px;
background: var(--gray-200);
border-radius: 3px;
overflow: hidden;
margin-bottom: 28px;
}
.lakelaw-means-test-wrap .progress-fill {
height: 100%;
width: 0%;
background: var(--red);
border-radius: 3px;
transition: width .6s cubic-bezier(.22,1,.36,1);
} .lakelaw-means-test-wrap .card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 40px 36px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--gray-200);
}
.lakelaw-means-test-wrap .step-content {
opacity: 1;
transform: translateY(0);
transition: all .3s ease;
}
.lakelaw-means-test-wrap .step-content.fade-out {
opacity: 0;
transform: translateY(10px);
} .lakelaw-means-test-wrap h1 {
font-size: 28px;
font-weight: 800;
color: var(--black);
margin-bottom: 10px;
line-height: 1.25;
}
.lakelaw-means-test-wrap h2 {
font-size: 22px;
font-weight: 700;
color: var(--black);
margin-bottom: 8px;
line-height: 1.3;
}
.lakelaw-means-test-wrap h3 {
font-size: 15px;
font-weight: 700;
color: var(--black);
margin-bottom: 14px;
}
.lakelaw-means-test-wrap .subtitle {
font-size: 14px;
color: var(--gray-600);
line-height: 1.8;
max-width: 440px;
margin: 0 auto 24px;
font-weight: 400;
}
.lakelaw-means-test-wrap .section-desc {
font-size: 13px;
color: var(--gray-600);
margin-bottom: 24px;
line-height: 1.7;
}
.lakelaw-means-test-wrap .hint {
font-size: 11px;
color: var(--gray-500);
margin-top: 5px;
font-weight: 400;
}
.lakelaw-means-test-wrap .hint-small {
font-size: 10px;
color: var(--gray-500);
margin-top: 4px;
}
.lakelaw-means-test-wrap .accent-line {
width: 50px;
height: 3px;
background: var(--red);
margin: 12px auto 20px;
border-radius: 0;
}
.lakelaw-means-test-wrap .accent-line.left { margin-left: 0; } .lakelaw-means-test-wrap .icon-circle {
width: 70px;
height: 70px;
border-radius: 50%;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.lakelaw-means-test-wrap .icon-circle.brand {
background: var(--red);
color: var(--white);
box-shadow: 0 6px 20px var(--red-glow);
}
.lakelaw-means-test-wrap .icon-circle.green {
background: #27ae60;
color: #fff;
font-size: 34px;
box-shadow: 0 6px 20px rgba(39,174,96,.2);
}
.lakelaw-means-test-wrap .icon-circle.red-result {
background: var(--red);
color: #fff;
font-size: 34px;
box-shadow: 0 6px 20px var(--red-glow);
}
.lakelaw-means-test-wrap .result-icon {
width: 76px;
height: 76px;
margin: 0 auto 16px;
} .lakelaw-means-test-wrap .info-box {
border-radius: var(--radius);
padding: 16px 20px;
font-size: 13px;
line-height: 1.7;
margin-top: 16px;
font-weight: 400;
}
.lakelaw-means-test-wrap .info-box strong { font-weight: 700; }
.lakelaw-means-test-wrap .info-box.info {
background: #ebf5fb;
border-left: 4px solid #3498db;
color: #1a5276;
}
.lakelaw-means-test-wrap .info-box.warning {
background: #fef9e7;
border-left: 4px solid #f1c40f;
color: #7d6608;
}
.lakelaw-means-test-wrap .info-box.success {
background: #eafaf1;
border-left: 4px solid #27ae60;
color: #1e8449;
}
.lakelaw-means-test-wrap .info-box .icon { margin-right: 6px; } .lakelaw-means-test-wrap .form-group { margin-bottom: 22px; }
.lakelaw-means-test-wrap .form-group label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .3px;
}
.lakelaw-means-test-wrap select,
.lakelaw-means-test-wrap .text-input {
width: 100%;
padding: 12px 14px;
border-radius: var(--radius);
border: 1px solid var(--gray-300);
font-size: 14px;
font-family: var(--font);
color: var(--gray-900);
background: var(--white);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.lakelaw-means-test-wrap select:focus,
.lakelaw-means-test-wrap .text-input:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px var(--red-glow);
}
.lakelaw-means-test-wrap select { cursor: pointer; }
.lakelaw-means-test-wrap .input-wrapper { position: relative; }
.lakelaw-means-test-wrap .input-prefix {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-500);
font-size: 14px;
font-weight: 700;
pointer-events: none;
}
.lakelaw-means-test-wrap .input-wrapper .text-input { padding-left: 32px; } .lakelaw-means-test-wrap .toggle-group { display: flex; gap: 10px; }
.lakelaw-means-test-wrap .toggle-btn {
flex: 1;
padding: 11px;
border-radius: var(--radius);
border: 1px solid var(--gray-300);
background: var(--white);
cursor: pointer;
font-size: 13px;
font-weight: 700;
font-family: var(--font);
color: var(--gray-600);
transition: all .2s;
text-transform: uppercase;
letter-spacing: .3px;
}
.lakelaw-means-test-wrap .toggle-btn.active {
border-color: var(--red);
background: var(--red-pale);
color: var(--red);
}
.lakelaw-means-test-wrap .toggle-btn:hover:not(.active) {
border-color: var(--gray-400);
background: var(--offwhite);
} .lakelaw-means-test-wrap .btn {
padding: 13px 28px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 700;
font-family: var(--font);
cursor: pointer;
border: none;
transition: all .2s;
display: inline-flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: .8px;
text-decoration: none;
}
.lakelaw-means-test-wrap .btn:hover:not(:disabled) { transform: translateY(-1px); }
.lakelaw-means-test-wrap .btn:active:not(:disabled) { transform: translateY(0); }
.lakelaw-means-test-wrap .btn:disabled { opacity: .35; cursor: not-allowed; }
.lakelaw-means-test-wrap .btn-primary { background: var(--red); color: var(--white); }
.lakelaw-means-test-wrap .btn-primary:hover:not(:disabled) {
background: var(--red-hover);
box-shadow: 0 4px 14px var(--red-glow);
}
.lakelaw-means-test-wrap .btn-secondary {
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid var(--gray-200);
}
.lakelaw-means-test-wrap .btn-secondary:hover:not(:disabled) { background: var(--gray-200); }
.lakelaw-means-test-wrap .btn-black { background: var(--black); color: var(--white); }
.lakelaw-means-test-wrap .btn-black:hover:not(:disabled) { background: var(--gray-900); }
.lakelaw-means-test-wrap .btn-row {
display: flex;
justify-content: space-between;
margin-top: 30px;
flex-wrap: wrap;
gap: 10px;
}
.lakelaw-means-test-wrap .btn-center {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
flex-wrap: wrap;
} .lakelaw-means-test-wrap .stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 22px;
}
.lakelaw-means-test-wrap .stat-box {
background: var(--offwhite);
border-radius: var(--radius-lg);
padding: 20px;
text-align: center;
border: 1px solid var(--gray-200);
}
.lakelaw-means-test-wrap .stat-label {
font-size: 9px;
color: var(--gray-500);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 700;
}
.lakelaw-means-test-wrap .stat-value {
font-size: 22px;
font-weight: 800;
color: var(--black);
}
.lakelaw-means-test-wrap .stat-value.accent { color: var(--red); } .lakelaw-means-test-wrap .median-panel {
background: var(--offwhite);
border-radius: var(--radius-lg);
padding: 16px 18px;
border: 1px solid var(--gray-200);
margin-bottom: 22px;
}
.lakelaw-means-test-wrap .median-panel .label {
font-size: 11px;
color: var(--gray-500);
margin-bottom: 3px;
font-weight: 500;
}
.lakelaw-means-test-wrap .median-panel .value {
font-size: 20px;
font-weight: 800;
color: var(--red);
}
.lakelaw-means-test-wrap .median-panel .sub {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
} .lakelaw-means-test-wrap .summary-card {
background: var(--offwhite);
border-radius: var(--radius-lg);
padding: 22px;
border: 1px solid var(--gray-200);
margin-bottom: 18px;
}
.lakelaw-means-test-wrap .summary-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.lakelaw-means-test-wrap .summary-item {
padding: 8px 0;
border-bottom: 1px solid var(--gray-200);
}
.lakelaw-means-test-wrap .summary-item .label {
font-size: 9px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: .6px;
font-weight: 700;
}
.lakelaw-means-test-wrap .summary-item .value {
font-size: 15px;
font-weight: 700;
color: var(--black);
} .lakelaw-means-test-wrap .allowance-breakdown {
background: var(--offwhite);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 16px 18px;
margin-bottom: 20px;
}
.lakelaw-means-test-wrap .allowance-breakdown .title {
font-size: 11px;
font-weight: 700;
color: var(--black);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .6px;
}
.lakelaw-means-test-wrap .allowance-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 12px;
border-bottom: 1px solid var(--gray-200);
}
.lakelaw-means-test-wrap .allowance-row:last-child {
border-bottom: none;
font-weight: 700;
padding-top: 8px;
border-top: 2px solid var(--gray-300);
}
.lakelaw-means-test-wrap .allowance-row .name { color: var(--gray-600); }
.lakelaw-means-test-wrap .allowance-row .amt { color: var(--red); font-weight: 700; } .lakelaw-means-test-wrap .expense-total {
background: var(--offwhite);
border-radius: var(--radius-lg);
padding: 16px 18px;
border: 1px solid var(--gray-200);
margin-top: 22px;
}
.lakelaw-means-test-wrap .expense-total .label {
font-size: 11px;
color: var(--gray-500);
font-weight: 500;
}
.lakelaw-means-test-wrap .expense-total .value {
font-size: 22px;
font-weight: 800;
color: var(--red);
}
.lakelaw-means-test-wrap .expense-total .sub {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
} .lakelaw-means-test-wrap .separator {
border-top: 1px solid var(--gray-200);
padding-top: 22px;
margin-top: 10px;
}
.lakelaw-means-test-wrap .data-source {
background: var(--offwhite);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 12px 16px;
margin-top: 16px;
font-size: 11px;
color: var(--gray-600);
line-height: 1.7;
}
.lakelaw-means-test-wrap .data-source a {
color: var(--red);
text-decoration: none;
font-weight: 600;
}
.lakelaw-means-test-wrap .data-source a:hover { text-decoration: underline; }
.lakelaw-means-test-wrap .data-source strong { color: var(--black); }
.lakelaw-means-test-wrap .data-badge {
display: inline-block;
font-size: 9px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: .5px;
margin-left: 4px;
}
.lakelaw-means-test-wrap .data-badge.live {
background: #eafaf1;
color: #1e8449;
border: 1px solid #a9dfbf;
}
.lakelaw-means-test-wrap .data-badge.cached {
background: #fef9e7;
color: #7d6608;
border: 1px solid #f9e79f;
}
.lakelaw-means-test-wrap .cta-link {
color: var(--red);
font-weight: 700;
text-decoration: none;
}
.lakelaw-means-test-wrap .cta-link:hover { text-decoration: underline; }
.lakelaw-means-test-wrap .result-pass { color: #27ae60; }
.lakelaw-means-test-wrap .result-fail { color: var(--red); }
.lakelaw-means-test-wrap .step { display: none; }
.lakelaw-means-test-wrap .step.active { display: block; }
.lakelaw-means-test-wrap .text-center { text-align: center; } @media (max-width: 480px) {
.lakelaw-means-test-wrap .card { padding: 28px 20px; }
.lakelaw-means-test-wrap h1 { font-size: 23px; }
.lakelaw-means-test-wrap h2 { font-size: 19px; }
.lakelaw-means-test-wrap .stat-grid,
.lakelaw-means-test-wrap .summary-row { grid-template-columns: 1fr; }
.lakelaw-means-test-wrap .btn { padding: 12px 20px; font-size: 12px; }
.lakelaw-means-test-wrap .btn-row { flex-direction: column; }
.lakelaw-means-test-wrap .btn-center { flex-direction: column; align-items: stretch; }
} @media print {
.lakelaw-means-test-wrap .card { box-shadow: none; border: 1px solid #ddd; }
.lakelaw-means-test-wrap .btn,
.lakelaw-means-test-wrap .progress-labels,
.lakelaw-means-test-wrap .progress-track { display: none !important; }
}