:root {

    --navy:#0f172a;

    --navy-2:#172554;

    --blue:#2563eb;

    --blue-dark:#1d4ed8;

    --blue-soft:#eff6ff;

    --green:#059669;

    --green-soft:#ecfdf5;

    --green-border:#a7f3d0;

    --red:#dc2626;

    --bg:#f4f7fb;

    --surface:#ffffff;

    --surface-soft:#f8fafc;

    --text:#1e293b;

    --muted:#64748b;

    --border:#dbe3ee;

    --shadow:0 18px 55px rgba(15,23,42,.08);

    --radius:16px;

}



\* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    background:

        radial-gradient(

            circle at top left,

            rgba(37,99,235,.07),

            transparent 35%

        ),

        var(--bg);

    color:var(--text);

    font-family:

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Roboto,

        Helvetica,

        Arial,

        sans-serif;

    font-size:16px;

    line-height:1.5;

}



button,

input,

select {

    font:inherit;

}



button {

    -webkit-tap-highlight-color:transparent;

}



.site-shell {

    width:100%;

    max-width:1120px;

    margin:0 auto;

    padding:28px 18px 70px;

}



.calculator-card {

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:38px;

}



.ad-placeholder {

    height:90px;

    margin-bottom:32px;

    border:1px dashed #b8c4d4;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fafcff;

    color:#94a3b8;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;

}



.hero {

    max-width:850px;

}



.eyebrow,

.section-kicker {

    color:var(--blue);

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

}



h1 {

    margin:8px 0 12px;

    color:var(--navy);

    font-size:clamp(2.15rem,5vw,3.15rem);

    line-height:1.04;

    letter-spacing:-.055em;

}



.subtitle {

    margin:0;

    color:var(--muted);

    font-size:1.08rem;

    max-width:760px;

}



.trust-bar {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;

}



.trust-pill {

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 11px;

    border-radius:999px;

    background:var(--green-soft);

    border:1px solid var(--green-border);

    color:#047857;

    font-size:.78rem;

    font-weight:800;

}



.status-dot {

    width:7px;

    height:7px;

    border-radius:50%;

    background:#10b981;

}



.section {

    margin-top:38px;

}



.section-heading,

.results-heading,

.details-heading {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    margin-bottom:17px;

}



h2 {

    margin:4px 0 0;

    color:var(--navy);

    font-size:1.35rem;

    letter-spacing:-.025em;

}



h3 {

    margin:4px 0 0;

    color:var(--navy);

    font-size:1.15rem;

}



.form-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

}



.input-group {

    display:flex;

    flex-direction:column;

}



label {

    margin-bottom:7px;

    color:var(--navy);

    font-size:.82rem;

    font-weight:800;

}



input,

select {

    width:100%;

    min-height:48px;

    padding:10px 13px;

    border:2px solid var(--border);

    border-radius:10px;

    outline:none;

    background:#fff;

    color:var(--text);

    transition:

        border-color .15s ease,

        box-shadow .15s ease;

}



input:focus,

select:focus {

    border-color:var(--blue);

    box-shadow:0 0 0 3px rgba(37,99,235,.1);

}



.rule-card {

    display:flex;

    gap:13px;

    margin-top:17px;

    padding:15px 17px;

    border:1px solid #bfdbfe;

    border-radius:12px;

    background:var(--blue-soft);

}



.rule-check {

    flex:0 0 auto;

    width:25px;

    height:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dbeafe;

    color:var(--blue);

    font-weight:900;

}



.rule-title {

    color:var(--navy);

    font-weight:900;

}



.rule-description {

    margin-top:2px;

    color:var(--muted);

    font-size:.88rem;

}



.rule-meta {

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:5px;

    color:#475569;

    font-size:.76rem;

    font-weight:700;

}



.separator {

    color:#94a3b8;

}



.package-heading {

    align-items:center;

}



.package-count {

    padding:6px 10px;

    border-radius:999px;

    background:#f1f5f9;

    color:#475569;

    font-size:.78rem;

    font-weight:800;

}



.package-list {

    display:flex;

    flex-direction:column;

    gap:13px;

}



.package-row {

    padding:18px;

    border:1px solid var(--border);

    border-radius:13px;

    background:linear-gradient(

        180deg,

        #ffffff,

        #fbfdff

    );

}



.package-row-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}



.package-title {

    color:var(--navy);

    font-weight:900;

}



.remove-package {

    border:0;

    padding:6px 9px;

    border-radius:7px;

    background:#fee2e2;

    color:#b91c1c;

    cursor:pointer;

    font-size:.78rem;

    font-weight:800;

}


.package-grid {
    display:grid;
    grid-template-columns:90px repeat(4, 1fr);
    gap:12px;
}




.primary-button {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    margin-top:15px;
    padding:16px;
    border:0;
    border-radius:10px;
    background:#2563eb !important;
    color:#ffffff !important;
    cursor:pointer;
    font-size:1.02rem;
    font-weight:900;
    box-shadow:0 8px 22px rgba(37,99,235,.22);
    transition:
        transform .12s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.primary-button:hover {
    background:#1d4ed8 !important;
    color:#ffffff !important;
    transform:translateY(-1px);
}



.secondary-button {

    margin-top:14px;

    padding:10px 14px;

    background:#eef2ff;

    color:#3730a3;

}



.results-section {

    margin-top:42px;

    padding-top:32px;

    border-top:2px solid #edf1f6;

}



.results-heading p {

    margin:4px 0 0;

    color:var(--muted);

}



.table-container {

    overflow-x:auto;

    border:1px solid var(--border);

    border-radius:11px;

}



table {

    width:100%;

    min-width:650px;

    border-collapse:collapse;

}



th {

    padding:13px 14px;

    background:#f8fafc;

    color:#475569;

    text-align:left;

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.07em;

    text-transform:uppercase;

}



td {

    padding:15px 14px;

    border-top:1px solid var(--border);

    color:var(--text);

}



.billable {

    color:var(--blue);

    font-weight:900;

}



.summary-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

    margin-top:16px;

}



.summary-card {

    padding:17px;

    border:1px solid var(--border);

    border-radius:12px;

    background:var(--surface-soft);

}



.summary-card.featured {

    border-color:#bfdbfe;

    background:var(--blue-soft);

}



.summary-label {

    color:var(--muted);

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.06em;

    text-transform:uppercase;

}



.summary-value {

    margin-top:4px;

    color:var(--navy);

    font-size:1.32rem;

    font-weight:900;

}



.density-card {

    margin-top:16px;

    padding:21px;

    border:1px solid #bfdbfe;

    border-radius:13px;

    background:

        linear-gradient(

            135deg,

            #eff6ff,

            #f8fbff

        );

}



.density-main {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}



.density-label {

    color:#64748b;

    font-size:.76rem;

    font-weight:900;

    letter-spacing:.06em;

    text-transform:uppercase;

}



.freight-class {

    margin-top:3px;

    color:var(--blue);

    font-size:1.65rem;

    font-weight:950;

}



.density-stat {

    text-align:right;

}



.density-value {

    margin-top:3px;

    color:var(--navy);

    font-size:1.3rem;

    font-weight:900;

}



.density-disclaimer {

    margin:13px 0 0;

    padding-top:13px;

    border-top:1px solid #dbeafe;

    color:var(--muted);

    font-size:.82rem;

}



.rule-details,

.comparison-section,

.verification-section {

    margin-top:18px;

    padding:19px;

    border:1px solid var(--border);

    border-radius:13px;

    background:#fff;

}



.details-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}



.detail {

    padding:11px;

    border-radius:9px;

    background:#f8fafc;

}



.detail span {

    display:block;

    color:var(--muted);

    font-size:.7rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.04em;

}



.detail strong {

    display:block;

    margin-top:2px;

    color:var(--navy);

    font-size:.88rem;

}



.comparison-description,

.verification-description {

    margin:0;

    color:var(--muted);

    font-size:.87rem;

}



.compare-button {

    margin-top:13px;

}



.comparison-table {

    margin-top:14px;

}



.status-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:14px;

}



.status-item {

    padding:12px;

    border-radius:9px;

    background:#f8fafc;

}



.status-name {

    color:var(--navy);

    font-weight:900;

}



.status-state {

    margin-top:2px;

    color:#047857;

    font-size:.76rem;

    font-weight:800;

}



.status-date {

    margin-top:2px;

    color:var(--muted);

    font-size:.72rem;

}



.secondary-ad {

    margin-top:28px;

    margin-bottom:0;

    height:120px;

}



.site-footer {

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid var(--border);

    color:var(--muted);

    font-size:.76rem;

}



.site-footer p {

    margin:4px 0;

}



\[hidden] {

    display:none !important;

}



@media(max-width:900px) {



    .form-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .package-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .summary-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .status-grid {

        grid-template-columns:repeat(2,1fr);

    }



}



@media(max-width:650px) {



    .site-shell {

        padding:12px 10px 40px;

    }



    .calculator-card {

        padding:21px;

        border-radius:12px;

    }



    .ad-placeholder {

        height:65px;

        margin-bottom:24px;

    }



    h1 {

        font-size:2.1rem;

    }



    .form-grid,

    .package-grid,

    .summary-grid,

    .details-grid,

    .status-grid {

        grid-template-columns:1fr;

    }



    .density-main {

        display:block;

    }



    .density-stat {

        margin-top:15px;

        text-align:left;

    }



    .section-heading {

        align-items:flex-start;

    }



    .package-count {

        margin-top:3px;

    }



}