/**
 * ==========================================
 * ILL IT SOLUTIONS - INTERNET SPEED TEST
 * ==========================================
 *
 * Dedicated presentation for:
 * /self-help/internet-speed-test/
 *
 * Desktop Light / Dark v1.1 polished build.
 *
 * DarkLooks remains responsible for the
 * Light / Dark mode engine.
 *
 * Brand blue:  #4A99D4
 * Dark surface: #232323
 */


/* ==========================================
 * SHARED PAGE TYPOGRAPHY
 * ========================================== */

.illit-speed-eyebrow {
    margin-bottom: 8px;

    color: #4A99D4 !important;
    -webkit-text-fill-color: #4A99D4 !important;

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}


.illit-speed-section-heading {
    max-width: 820px;

    margin-right: auto;
    margin-bottom: 32px;
    margin-left: auto;

    text-align: center;
}


.illit-speed-section-heading h2 {
    margin-bottom: 12px;

    color: #303030 !important;

    font-size: 2rem;
    line-height: 1.18;
}


.illit-speed-section-heading > p:last-child {
    margin-bottom: 0;

    color: #5D5D5D !important;

    line-height: 1.65;
}


/* ==========================================
 * HERO
 * ========================================== */

.illit-speed-hero {
    position: relative;

    background: #F4F7FA;
    background-color: #F4F7FA;
}


.illit-speed-hero-row {
    align-items: center;

    min-height: 310px;
}


.illit-speed-hero-copy > .col-inner {
    max-width: 690px;

    padding-top: 40px;
    padding-bottom: 40px;
}


.illit-speed-hero h1 {
    max-width: 650px;

    margin-bottom: 16px;

    color: #303030 !important;

    font-size: 2.35rem;
    line-height: 1.12;
}


.illit-speed-hero-intro {
    max-width: 640px;

    margin-bottom: 20px;

    color: #5D5D5D !important;

    font-size: 1rem;
    line-height: 1.65;
}


.illit-speed-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.illit-speed-hero-points span {
    display: inline-flex;
    align-items: center;

    min-height: 32px;
    padding: 6px 11px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 1px solid #DFE5EA;
    border-radius: 999px;

    color: #5D5D5D !important;

    font-size: 0.78rem;
    font-weight: 600;
}


/* HERO VISUAL */

.illit-speed-hero-visual > .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}


.illit-speed-meter-card {
    width: 100%;
    max-width: 430px;

    padding: 28px 26px 24px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    border: 1px solid #DFE5EA;
    border-radius: 16px;

    box-shadow:
        0 12px 30px rgba(31, 41, 55, 0.10);
}


.illit-speed-meter-ring {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 150px;
    height: 150px;

    margin: 0 auto 22px;

    padding: 12px;

    background:
        conic-gradient(
            #4A99D4 0deg 252deg,
            #E8EDF1 252deg 360deg
        );

    border-radius: 50%;
}


.illit-speed-meter-ring-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border-radius: 50%;
}


.illit-speed-meter-label {
    margin-bottom: 2px;

    color: #7B858E !important;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}


.illit-speed-meter-ring strong {
    color: #4A99D4 !important;
    -webkit-text-fill-color: #4A99D4 !important;

    font-size: 1.55rem;
    line-height: 1;
}


.illit-speed-meter-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


.illit-speed-meter-stats > div {
    padding: 11px 8px;

    background: #F7F9FB !important;
    background-color: #F7F9FB !important;

    border: 1px solid #E4E8EC;
    border-radius: 8px;

    text-align: center;
}


.illit-speed-meter-stats span {
    display: block;

    margin-bottom: 4px;

    color: #7A838B !important;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


.illit-speed-meter-stats strong {
    color: #303030 !important;

    font-size: 0.88rem;
}


/* ==========================================
 * RUN TEST
 * ========================================== */

.illit-speed-intro {
    padding-top: 56px;
    padding-bottom: 56px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}


.illit-speed-launch-row > .col {
    margin-right: auto;
    margin-left: auto;
}


.illit-speed-launch-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    align-items: center;
    gap: 34px;

    padding: 30px 34px;

    background: #F7F9FB !important;
    background-color: #F7F9FB !important;

    border: 1px solid #E0E5E9;
    border-radius: 14px;

    box-shadow:
        0 5px 16px rgba(31, 41, 55, 0.045);
}


.illit-speed-launch-copy {
    display: block;
}


.illit-speed-launch-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0;

    background: rgba(74, 153, 212, 0.12) !important;

    border-radius: 50%;

    color: #4A99D4 !important;
    -webkit-text-fill-color: #4A99D4 !important;

    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}


.illit-speed-launch-text h3 {
    margin-bottom: 8px;

    color: #303030 !important;

    font-size: 1.45rem;
    line-height: 1.2;
}


.illit-speed-launch-text p {
    max-width: 650px;

    margin-bottom: 0;

    color: #5D5D5D !important;

    line-height: 1.62;
}


.illit-speed-launch-action {
    text-align: center;
}


.illit-speed-launch-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 46px;

    margin: 0 0 9px !important;
    padding: 10px 20px !important;

    background: #4A99D4 !important;
    background-color: #4A99D4 !important;

    border: 1px solid #4A99D4 !important;
    border-radius: 6px !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;

    box-shadow: none !important;
}


.illit-speed-launch-button span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-launch-button:hover,
.illit-speed-launch-button:focus {
    background: #3787C2 !important;
    background-color: #3787C2 !important;

    border-color: #3787C2 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-launch-button:hover span,
.illit-speed-launch-button:focus span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-external-note {
    max-width: 280px;

    margin: 0 auto !important;

    color: #7A838B !important;

    font-size: 0.72rem;
    line-height: 1.5;
}


/* ==========================================
 * PREPARE / BEFORE TEST
 * ========================================== */

.illit-speed-prepare {
    padding-top: 54px;
    padding-bottom: 54px;

    background: #F5F7F9 !important;
    background-color: #F5F7F9 !important;
}


.illit-speed-card-row > .col,
.illit-speed-metric-row > .col {
    display: flex;
}


.illit-speed-card-row > .col > .col-inner,
.illit-speed-metric-row > .col > .col-inner {
    width: 100%;
}


.illit-speed-info-card,
.illit-speed-metric-card {
    width: 100%;
    height: 100%;

    padding: 28px 26px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    border: 1px solid #E1E5E9;
    border-radius: 12px;

    box-shadow:
        0 5px 16px rgba(31, 41, 55, 0.06);
}


.illit-speed-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 30px;

    margin-bottom: 16px;
    padding: 0 10px;

    background: rgba(74, 153, 212, 0.12) !important;

    border-radius: 999px;

    color: #4A99D4 !important;
    -webkit-text-fill-color: #4A99D4 !important;

    font-size: 0.72rem;
    font-weight: 700;
}


.illit-speed-info-card h3,
.illit-speed-metric-card h3 {
    margin-bottom: 10px;

    color: #303030 !important;

    font-size: 1.2rem;
    line-height: 1.3;
}


.illit-speed-info-card p,
.illit-speed-metric-card p {
    margin-bottom: 0;

    color: #5D5D5D !important;

    line-height: 1.6;
}


/* ==========================================
 * RESULT METRICS
 * ========================================== */

.illit-speed-results {
    padding-top: 56px;
    padding-bottom: 56px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}


.illit-speed-metric-card {
    border-top: 4px solid #4A99D4;
}


.illit-speed-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 16px;

    background: rgba(74, 153, 212, 0.12) !important;

    border-radius: 50%;

    color: #4A99D4 !important;

    font-size: 1.4rem;
    font-weight: 700;
}


.illit-speed-metric-card
.illit-speed-unit {
    margin-top: -4px;
    margin-bottom: 12px;

    color: #4A99D4 !important;
    -webkit-text-fill-color: #4A99D4 !important;

    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}


/* ==========================================
 * TROUBLESHOOTING
 * ========================================== */

.illit-speed-troubleshoot {
    padding-top: 54px;
    padding-bottom: 54px;

    background: #F5F7F9 !important;
    background-color: #F5F7F9 !important;
}


.illit-speed-troubleshoot-row {
    align-items: center;
}


.illit-speed-troubleshoot-copy > .col-inner {
    padding-right: 42px;
}


.illit-speed-troubleshoot h2 {
    margin-bottom: 14px;

    color: #303030 !important;

    font-size: 2rem;
    line-height: 1.18;
}


.illit-speed-troubleshoot-copy p {
    color: #5D5D5D !important;

    line-height: 1.65;
}


.illit-speed-check-card {
    padding: 30px 30px 26px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 1px solid #E1E5E9;
    border-top: 4px solid #4A99D4;
    border-radius: 14px;

    box-shadow:
        0 7px 22px rgba(31, 41, 55, 0.08);
}


.illit-speed-check-card h3 {
    margin-bottom: 15px;

    color: #303030 !important;

    font-size: 1.3rem;
}


.illit-speed-check-card ul {
    margin: 0;
}


.illit-speed-check-card li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 4px;

    color: #5D5D5D !important;

    line-height: 1.55;
}


.illit-speed-check-card li:last-child {
    margin-bottom: 0;
}


.illit-speed-check-card li::marker {
    color: #4A99D4;
}


/* ==========================================
 * FINAL BLUE HELP CTA
 * ========================================== */

.illit-speed-help {
    padding-top: 38px;
    padding-bottom: 38px;

    background: #4A99D4 !important;
    background-color: #4A99D4 !important;
    background-image: none !important;
}


.illit-speed-help-row {
    align-items: center;
}


.illit-speed-help-row
> .col:first-child
> .col-inner {
    padding-right: 34px;
}


.illit-speed-help-eyebrow {
    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color:
        rgba(255, 255, 255, 0.9) !important;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}


.illit-speed-help h2 {
    margin-bottom: 9px;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 1.75rem;
    line-height: 1.18;
}


.illit-speed-help p {
    max-width: 720px;

    margin-bottom: 0;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 0.96rem;
    line-height: 1.6;
}


.illit-speed-help-actions
> .col-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    width: 100%;
    max-width: 300px;

    margin-left: auto;
}


.illit-speed-help-actions .button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;

    margin: 0 !important;
    padding: 9px 18px !important;

    border-radius: 6px !important;

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.2;

    box-shadow: none !important;
}


.illit-speed-help-primary {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 1px solid #FFFFFF !important;

    color: #303030 !important;
    -webkit-text-fill-color: #303030 !important;
}


.illit-speed-help-primary span {
    color: #303030 !important;
    -webkit-text-fill-color: #303030 !important;
}


.illit-speed-help-primary:hover,
.illit-speed-help-primary:focus {
    background: #F2F4F6 !important;
    background-color: #F2F4F6 !important;

    border-color: #F2F4F6 !important;

    color: #303030 !important;
    -webkit-text-fill-color: #303030 !important;
}


.illit-speed-help-primary:hover span,
.illit-speed-help-primary:focus span {
    color: #303030 !important;
    -webkit-text-fill-color: #303030 !important;
}


.illit-speed-help-secondary {
    background: transparent !important;
    background-color: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.92) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-help-secondary span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-help-secondary:hover,
.illit-speed-help-secondary:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;

    border-color: #FFFFFF !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


.illit-speed-help-secondary:hover span,
.illit-speed-help-secondary:focus span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ==========================================
 * DISCLAIMER
 * ========================================== */

.illit-speed-disclaimer {
    padding-top: 36px;
    padding-bottom: 36px;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}


.illit-speed-disclaimer-col {
    margin-right: auto;
    margin-left: auto;
}


.illit-speed-disclaimer-card {
    padding: 24px 28px;

    background: #F7F9FB !important;
    background-color: #F7F9FB !important;

    border: 1px solid #E2E6EA;
    border-radius: 10px;
}


.illit-speed-disclaimer-card h2 {
    margin-bottom: 9px;

    color: #303030 !important;

    font-size: 1.15rem;
}


.illit-speed-disclaimer-card p {
    margin-bottom: 8px;

    color: #6A6A6A !important;

    font-size: 0.88rem;
    line-height: 1.6;
}


.illit-speed-disclaimer-card p:last-child {
    margin-bottom: 0;
}


/* ==========================================
 * DARK MODE
 * ========================================== */

html.darklooks-mode-changer-enabled
.illit-speed-hero h1,
html.darklooks-mode-changer-enabled
.illit-speed-section-heading h2,
html.darklooks-mode-changer-enabled
.illit-speed-launch-card h3,
html.darklooks-mode-changer-enabled
.illit-speed-info-card h3,
html.darklooks-mode-changer-enabled
.illit-speed-metric-card h3,
html.darklooks-mode-changer-enabled
.illit-speed-troubleshoot h2,
html.darklooks-mode-changer-enabled
.illit-speed-check-card h3,
html.darklooks-mode-changer-enabled
.illit-speed-disclaimer-card h2 {
    color: #F3F3F3 !important;
    -webkit-text-fill-color: #F3F3F3 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-hero-intro,
html.darklooks-mode-changer-enabled
.illit-speed-section-heading > p:last-child,
html.darklooks-mode-changer-enabled
.illit-speed-launch-text p,
html.darklooks-mode-changer-enabled
.illit-speed-info-card p,
html.darklooks-mode-changer-enabled
.illit-speed-metric-card p,
html.darklooks-mode-changer-enabled
.illit-speed-troubleshoot-copy p,
html.darklooks-mode-changer-enabled
.illit-speed-check-card li,
html.darklooks-mode-changer-enabled
.illit-speed-disclaimer-card p {
    color: #D7D7D7 !important;
    -webkit-text-fill-color: #D7D7D7 !important;
}


/* MAIN DARK SURFACES */

html.darklooks-mode-changer-enabled
.illit-speed-intro,
html.darklooks-mode-changer-enabled
.illit-speed-results,
html.darklooks-mode-changer-enabled
.illit-speed-disclaimer {
    background: #232323 !important;
    background-color: #232323 !important;
    background-image: none !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-prepare,
html.darklooks-mode-changer-enabled
.illit-speed-troubleshoot {
    background: #262626 !important;
    background-color: #262626 !important;
    background-image: none !important;
}


/* HERO CHIPS */

html.darklooks-mode-changer-enabled
.illit-speed-hero-points span {
    background: #2B2B2B !important;
    background-color: #2B2B2B !important;

    border-color: #414141 !important;

    color: #D7D7D7 !important;
    -webkit-text-fill-color: #D7D7D7 !important;
}


/* HERO METER */

html.darklooks-mode-changer-enabled
.illit-speed-meter-card,
html.darklooks-mode-changer-enabled
.illit-speed-info-card,
html.darklooks-mode-changer-enabled
.illit-speed-metric-card,
html.darklooks-mode-changer-enabled
.illit-speed-check-card {
    background: #2B2B2B !important;
    background-color: #2B2B2B !important;

    border-color: #414141 !important;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.18);
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-ring {
    background:
        conic-gradient(
            #4A99D4 0deg 252deg,
            #454545 252deg 360deg
        ) !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-ring-inner {
    background: #2B2B2B !important;
    background-color: #2B2B2B !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-label {
    color: #B7BEC4 !important;
    -webkit-text-fill-color: #B7BEC4 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-stats > div {
    background: #242424 !important;
    background-color: #242424 !important;

    border-color: #414141 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-stats span {
    color: #B7BEC4 !important;
    -webkit-text-fill-color: #B7BEC4 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-meter-stats strong {
    color: #F3F3F3 !important;
    -webkit-text-fill-color: #F3F3F3 !important;
}


/* LAUNCH CARD */

html.darklooks-mode-changer-enabled
.illit-speed-launch-card,
html.darklooks-mode-changer-enabled
.illit-speed-disclaimer-card {
    background: #2B2B2B !important;
    background-color: #2B2B2B !important;

    border-color: #414141 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-launch-icon {
    background: rgba(74, 153, 212, 0.18) !important;

    color: #6EB2E2 !important;
    -webkit-text-fill-color: #6EB2E2 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-external-note {
    color: #B7BEC4 !important;
    -webkit-text-fill-color: #B7BEC4 !important;
}


/* PRESERVE METRIC BLUE */

html.darklooks-mode-changer-enabled
.illit-speed-metric-card,
html.darklooks-mode-changer-enabled
.illit-speed-check-card {
    border-top-color: #4A99D4 !important;
}


/* BLUE CTA */

html.darklooks-mode-changer-enabled
.illit-speed-help {
    background: #4A99D4 !important;
    background-color: #4A99D4 !important;
    background-image: none !important;

    filter: none !important;
    -webkit-filter: none !important;

    opacity: 1 !important;
}


html.darklooks-mode-changer-enabled
.illit-speed-help h2,
html.darklooks-mode-changer-enabled
.illit-speed-help p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ==========================================
 * ACCESSIBILITY
 * ========================================== */

.illit-speed-launch-button:focus-visible,
.illit-speed-help .button:focus-visible {
    outline: 2px solid #0F2740;
    outline-offset: 3px;
}


/* ==========================================
 * RESPONSIVE STRUCTURAL SAFETY ONLY
 * ==========================================
 *
 * Full tablet/mobile polish remains deferred
 * until the final site-wide responsive pass.
 */

@media (max-width: 849px) {

    .illit-speed-launch-card {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .illit-speed-launch-action {
        width: 100%;
        max-width: 420px;

        margin-right: auto;
        margin-left: auto;
    }


    .illit-speed-hero-copy > .col-inner {
        max-width: none;
    }


    .illit-speed-hero-visual > .col-inner {
        padding-top: 10px;
        padding-bottom: 34px;
    }


    .illit-speed-card-row > .col,
    .illit-speed-metric-row > .col {
        display: block;
    }


    .illit-speed-info-card,
    .illit-speed-metric-card {
        height: auto;

        margin-bottom: 18px;
    }


    .illit-speed-troubleshoot-copy > .col-inner {
        padding-right: 0;
        padding-bottom: 24px;
    }


    .illit-speed-help-row
    > .col:first-child
    > .col-inner {
        padding-right: 0;
    }


    .illit-speed-help-actions > .col-inner {
        max-width: 420px;

        margin-top: 24px;
        margin-right: auto;
        margin-left: auto;
    }

}


@media (max-width: 549px) {

    .illit-speed-launch-copy {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .illit-speed-launch-icon {
        margin-right: auto;
        margin-left: auto;
    }


    .illit-speed-hero h1 {
        font-size: 1.9rem;
    }


    .illit-speed-section-heading h2,
    .illit-speed-troubleshoot h2 {
        font-size: 1.7rem;
    }


    .illit-speed-meter-card {
        padding-right: 18px;
        padding-left: 18px;
    }


    .illit-speed-meter-stats {
        grid-template-columns: 1fr;
    }


    .illit-speed-launch-card,
    .illit-speed-info-card,
    .illit-speed-metric-card,
    .illit-speed-check-card {
        padding-right: 22px;
        padding-left: 22px;
    }


    .illit-speed-launch-button {
        width: 100%;
        min-width: 0;
    }

}