/* =========================================================
   RYTHON ACADEMIC ENGINE
   PART 2 — DESKTOP CSS
========================================================= */

.rython-engine{
    position:relative;
    overflow:hidden;
    padding:120px 24px 95px;
    background:
        radial-gradient(circle at 12% 45%, rgba(37,99,235,.055), transparent 30%),
        radial-gradient(circle at 90% 40%, rgba(37,99,235,.04), transparent 32%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.rython-engine::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    left:-350px;
    bottom:-300px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(37,99,235,.08),
        transparent 70%
    );
    pointer-events:none;
}

.engine-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1500px;
    margin:0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.engine-header{
    max-width:1100px;
    margin:0 auto 58px;
    text-align:center;
}

.engine-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:9px 20px;
    margin-bottom:20px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #1747c9,
        #2563eb
    );

    color:#fff;

    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:1.15px;

    box-shadow:
        0 10px 25px rgba(37,99,235,.17);
}

.engine-tag svg{
    width:16px;
    height:16px;
    stroke-width:1.9;
}

.engine-header h2{
    margin:0;

    color:#081b4b;

    font-size:clamp(44px,4.2vw,68px);
    line-height:1.04;
    letter-spacing:-2.8px;
    font-weight:900;
}

.engine-header h2 span{
    color:#2563eb;
}

.engine-header p{
    max-width:950px;
    margin:18px auto 0;

    color:#64748b;

    font-size:18px;
    line-height:1.65;
}

.engine-heading-line{
    width:68px;
    height:4px;

    margin:20px auto 0;

    border-radius:999px;

    background:#2563eb;
}


/* =========================================================
   MAIN SHOWCASE
========================================================= */

.engine-showcase{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(360px, .86fr)
        minmax(610px, 1.38fr)
        minmax(190px, .38fr);

    gap:34px;

    align-items:stretch;
}


/* =========================================================
   LEFT
   RYTHON ACADEMIC ENGINE
========================================================= */

.engine-visual{
    position:relative;

    min-height:650px;

    padding:28px 24px 20px;

    overflow:hidden;

    border-radius:26px;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(0,132,255,.26),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,128,255,.22),
            transparent 32%
        ),
        linear-gradient(
            160deg,
            #0b397d 0%,
            #082b66 42%,
            #061c4d 100%
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 30px 70px rgba(8,27,75,.16);
}

.engine-visual::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:35px 35px;

    pointer-events:none;
}

.engine-visual::after{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    left:50%;
    top:50%;

    transform:translate(-50%,-46%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,153,255,.15),
            transparent 68%
        );

    filter:blur(10px);

    pointer-events:none;
}

.engine-visual > h3{
    position:relative;
    z-index:5;

    margin:0;

    text-align:center;

    color:#fff;

    font-size:18px;
    font-weight:800;
    letter-spacing:.25px;
}

.engine-title-line{
    position:relative;
    z-index:5;

    width:150px;
    height:2px;

    margin:10px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            transparent
        );
}


/* =========================================================
   ENGINE ORBIT
========================================================= */

.engine-orbit{
    position:absolute;

    z-index:3;

    width:390px;
    height:480px;

    left:50%;
    top:55%;

    transform:translate(-50%,-50%);
}


/* ORBIT RINGS */

.orbit-ring{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    pointer-events:none;
}

.orbit-ring-one{
    width:330px;
    height:405px;

    border:
        1px dashed rgba(255,255,255,.68);
}

.orbit-ring-two{
    width:275px;
    height:335px;

    border:
        1px solid rgba(56,189,248,.20);

    box-shadow:
        0 0 40px rgba(14,165,233,.08);
}


/* =========================================================
   ENGINE CORE
========================================================= */

.engine-core{
    position:absolute;

    z-index:5;

    width:220px;
    height:220px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            #94a3b8 0deg 5deg,
            #475569 5deg 10deg
        );

    padding:22px;

    box-shadow:
        0 0 0 8px rgba(255,255,255,.08),
        0 0 0 13px rgba(0,132,255,.20),
        0 0 40px rgba(0,153,255,.75),
        0 0 90px rgba(37,99,235,.45);
}

.engine-core::before{
    content:"";

    position:absolute;

    inset:12px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #e2e8f0,
            #475569 22%,
            #cbd5e1 44%,
            #334155 68%,
            #e2e8f0
        );

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.65);
}

.engine-core::after{
    content:"";

    position:absolute;

    inset:29px;

    border-radius:50%;

    border:5px solid #0ea5e9;

    box-shadow:
        0 0 8px #38bdf8,
        0 0 22px #0ea5e9,
        inset 0 0 22px rgba(14,165,233,.65);
}

.engine-core-glow{
    position:absolute;

    inset:-30px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.24),
            transparent 66%
        );

    filter:blur(12px);
}

.engine-core-inner{
    position:relative;
    z-index:8;

    width:145px;
    height:145px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 25%,
            #ffffff,
            #eaf4ff
        );

    border:
        4px solid rgba(255,255,255,.96);

    box-shadow:
        inset 0 0 25px rgba(37,99,235,.08),
        0 0 18px rgba(255,255,255,.35);
}


/* TEMP R LOGO */

.engine-r-logo{
    color:#1477f8;

    font-size:48px;
    line-height:.9;

    font-weight:1000;
    font-style:italic;

    letter-spacing:-6px;

    text-shadow:
        0 4px 10px rgba(37,99,235,.18);
}

.engine-core-inner strong{
    display:block;

    margin-top:7px;

    color:#081b4b;

    font-size:19px;
    line-height:1;
    font-weight:900;

    letter-spacing:.8px;
}

.engine-core-inner small{
    display:block;

    max-width:105px;

    margin-top:5px;

    color:#2563eb;

    font-size:5.8px;
    line-height:1.2;

    font-weight:800;
    letter-spacing:.35px;
}


/* =========================================================
   ORBIT ITEMS
========================================================= */

.orbit-item{
    position:absolute;

    z-index:10;

    width:100px;
    height:100px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf6ff
        );

    border:
        4px solid rgba(255,255,255,.95);

    box-shadow:
        0 9px 25px rgba(0,0,0,.20),
        0 0 0 1px rgba(56,189,248,.25),
        0 0 22px rgba(14,165,233,.16);
}

.orbit-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:6px;

    color:#1747c9;
}

.orbit-icon svg{
    width:29px;
    height:29px;

    stroke-width:1.8;
}

.orbit-item span{
    color:#081b4b;

    font-size:8.5px;
    line-height:1.18;

    font-weight:850;
}


/* POSITIONS */

.orbit-faculty{
    top:-8px;
    left:50%;

    transform:translateX(-50%);
}

.orbit-planning{
    top:78px;
    right:-5px;
}

.orbit-technology{
    right:-20px;
    bottom:82px;
}

.orbit-development{
    bottom:-8px;
    left:50%;

    transform:translateX(-50%);
}

.orbit-analytics{
    left:-20px;
    bottom:82px;
}

.orbit-assessment{
    left:-5px;
    top:78px;
}


/* =========================================================
   ORBIT NODES
========================================================= */

.orbit-node{
    position:absolute;

    z-index:4;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 10px #38bdf8;
}

.node-one{
    left:26px;
    top:47%;
}

.node-two{
    right:26px;
    top:47%;
}

.node-three{
    left:27%;
    bottom:30px;
}

.node-four{
    right:27%;
    top:30px;
}


/* =========================================================
   ENGINE PLATFORM
========================================================= */

.engine-platform{
    position:absolute;

    z-index:2;

    left:50%;
    bottom:16px;

    width:88%;
    height:70px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,174,255,.65),
            rgba(0,98,255,.18) 38%,
            transparent 70%
        );

    border-bottom:
        2px solid rgba(56,189,248,.55);
}

.engine-platform span{
    position:absolute;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    border:
        1px solid rgba(56,189,248,.55);
}

.engine-platform span:nth-child(1){
    width:90%;
    height:55px;

    top:3px;
}

.engine-platform span:nth-child(2){
    width:72%;
    height:40px;

    top:10px;
}

.engine-platform span:nth-child(3){
    width:50%;
    height:25px;

    top:18px;

    box-shadow:
        0 0 25px rgba(56,189,248,.7);
}


/* =========================================================
   CENTER
   OPERATIONAL LAYERS
========================================================= */

.engine-layers{
    display:grid;

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

    gap:14px;
}


/* =========================================================
   COMMON LAYER
========================================================= */

.engine-layer{
    --layer-color:#2563eb;
    --layer-soft:#eff6ff;

    position:relative;

    min-height:205px;

    display:grid;

    grid-template-columns:
        155px
        minmax(185px,1fr)
        1px
        minmax(185px,1fr);

    align-items:center;

    gap:22px;

    padding:
        18px 25px 18px 0;

    overflow:visible;

    border-radius:20px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(37,99,235,.13);

    box-shadow:
        0 12px 35px rgba(15,23,42,.06);
}


/* LAYER COLORS */

.layer-people{
    --layer-color:#1557e8;
    --layer-soft:#eef5ff;
}

.layer-academics{
    --layer-color:#16a34a;
    --layer-soft:#eefbf2;
}

.layer-systems{
    --layer-color:#7047cf;
    --layer-soft:#f4efff;
}


/* =========================================================
   CATEGORY BLOCK
========================================================= */

.layer-category{
    position:relative;

    align-self:stretch;

    min-height:100%;

    display:flex;
    flex-direction:column;

    align-items:flex-start;
    justify-content:center;

    padding:20px 25px;

    color:#fff;

    border-radius:
        19px 0 0 19px;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--layer-color) 85%, #fff 15%),
            var(--layer-color)
        );
}

.layer-category::after{
    content:"";

    position:absolute;

    z-index:1;

    right:-34px;
    top:0;

    width:36px;
    height:100%;

    background:var(--layer-color);

    clip-path:
        polygon(
            0 0,
            100% 50%,
            0 100%
        );
}

.layer-category-icon{
    position:relative;
    z-index:2;

    margin-bottom:11px;
}

.layer-category-icon svg{
    width:38px;
    height:38px;

    stroke-width:1.7;
}

.layer-category h3{
    position:relative;
    z-index:2;

    margin:0 0 7px;

    color:#fff;

    font-size:18px;
    font-weight:850;
}

.layer-category p{
    position:relative;
    z-index:2;

    margin:0;

    color:
        rgba(255,255,255,.87);

    font-size:12px;
    line-height:1.5;
}


/* =========================================================
   SERVICE BLOCKS
========================================================= */

.layer-service{
    min-width:0;

    padding-left:10px;
}

.service-top{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:7px;
}

.service-number{
    width:25px;
    height:25px;

    flex:0 0 25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--layer-color);

    color:#fff;

    font-size:11px;
    font-weight:800;
}

.service-icon{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--layer-color);

    background:var(--layer-soft);
}

.service-icon svg{
    width:27px;
    height:27px;

    stroke-width:1.7;
}

.layer-service h4{
    margin:0 0 7px;

    color:#081b4b;

    font-size:14px;
    line-height:1.32;

    font-weight:800;
}

.layer-service p{
    margin:0;

    color:#475569;

    font-size:11.5px;
    line-height:1.55;
}


/* =========================================================
   SERVICE DIVIDER
========================================================= */

.service-divider{
    width:1px;
    height:72%;

    justify-self:center;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(148,163,184,.38),
            transparent
        );
}


/* =========================================================
   OUTPUT DOT
========================================================= */

.layer-output-dot{
    position:absolute;

    z-index:5;

    width:12px;
    height:12px;

    right:-7px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:#fff;

    border:
        3px solid var(--layer-color);

    box-shadow:
        0 0 0 3px #fff;
}


/* =========================================================
   RIGHT FINAL OUTPUT
========================================================= */

.engine-result{
    position:relative;

    min-height:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:35px 22px;

    text-align:center;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );

    border:
        1px solid rgba(37,99,235,.17);

    box-shadow:
        0 16px 45px rgba(15,23,42,.06);
}

.result-school-icon{
    width:96px;
    height:96px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:28px;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #2563eb,
            #1747c9
        );

    box-shadow:
        0 15px 35px rgba(37,99,235,.24);
}

.result-school-icon svg{
    width:48px;
    height:48px;

    stroke-width:1.55;
}

.engine-result h3{
    margin:0;

    color:#081b4b;

    font-size:24px;
    line-height:1.2;

    font-weight:900;
}

.result-line{
    width:52px;
    height:3px;

    margin:24px auto;

    border-radius:99px;

    background:#2563eb;
}

.engine-result p{
    margin:0;

    color:#334155;

    font-size:17px;
    line-height:1.65;
}

.engine-result strong{
    display:block;

    margin-top:13px;

    color:#1557e8;

    font-size:19px;
    font-weight:850;
}


/* =========================================================
   CONNECTORS
========================================================= */

.engine-connectors{
    position:absolute;

    z-index:1;

    top:0;
    bottom:0;

    right:calc(190px + 17px);

    width:45px;

    pointer-events:none;
}

.connector{
    position:absolute;

    width:42px;
    height:2px;

    right:-5px;

    background:currentColor;
}

.connector::after{
    content:"";

    position:absolute;

    right:-2px;
    top:50%;

    width:10px;
    height:10px;

    border-top:
        2px solid currentColor;

    border-right:
        2px solid currentColor;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.connector-people{
    top:16.5%;

    color:#1557e8;
}

.connector-academics{
    top:50%;

    color:#16a34a;
}

.connector-systems{
    top:83.5%;

    color:#7047cf;
}


/* =========================================================
   BOTTOM PRINCIPLES
========================================================= */

.engine-principles{
    position:relative;

    display:grid;

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

    margin-top:22px;

    padding:
        22px 18px;

    border-radius:22px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(37,99,235,.10);

    box-shadow:
        0 12px 40px rgba(15,23,42,.05);
}

.engine-principle{
    position:relative;

    display:flex;

    align-items:flex-start;

    gap:12px;

    min-width:0;

    padding:
        4px 17px;
}

.engine-principle:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:5px;

    width:1px;
    height:calc(100% - 10px);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(37,99,235,.22),
            transparent
        );
}

.principle-icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#1557e8;

    background:#eef5ff;
}

.principle-icon svg{
    width:25px;
    height:25px;

    stroke-width:1.8;
}

.engine-principle h4{
    margin:2px 0 6px;

    color:#081b4b;

    font-size:12.5px;
    line-height:1.35;

    font-weight:800;
}

.engine-principle p{
    margin:0;

    color:#64748b;

    font-size:9.5px;
    line-height:1.5;
}


/* =========================================================
   MICRO INTERACTIONS
========================================================= */

.engine-layer,
.engine-principle,
.orbit-item{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.engine-layer:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 48px rgba(15,23,42,.09);
}

.engine-principle:hover{
    transform:translateY(-3px);
}

.orbit-item:hover{
    box-shadow:
        0 12px 32px rgba(0,0,0,.20),
        0 0 0 1px rgba(56,189,248,.35),
        0 0 30px rgba(14,165,233,.30);
}


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

@media (prefers-reduced-motion:reduce){

    .engine-layer,
    .engine-principle,
    .orbit-item{
        transition:none;
    }

}

/* =========================================================
   RYTHON ACADEMIC ENGINE
   PART 3 — RESPONSIVE CSS
========================================================= */


/* =========================================================
   1350PX — SMALL DESKTOP / LAPTOP
========================================================= */

@media (max-width:1350px){

    .engine-container{
        max-width:1180px;
    }

    .engine-showcase{
        grid-template-columns:
            minmax(330px,.82fr)
            minmax(540px,1.35fr)
            minmax(175px,.40fr);

        gap:24px;
    }

    /* LEFT ENGINE */

    .engine-visual{
        min-height:620px;
        padding-left:18px;
        padding-right:18px;
    }

    .engine-orbit{
        width:350px;
        height:450px;
    }

    .orbit-ring-one{
        width:300px;
        height:385px;
    }

    .orbit-ring-two{
        width:250px;
        height:320px;
    }

    .engine-core{
        width:200px;
        height:200px;
    }

    .engine-core-inner{
        width:130px;
        height:130px;
    }

    .orbit-item{
        width:90px;
        height:90px;
    }

    .orbit-icon svg{
        width:25px;
        height:25px;
    }

    .orbit-item span{
        font-size:7.8px;
    }


    /* CENTER LAYERS */

    .engine-layer{
        grid-template-columns:
            135px
            minmax(160px,1fr)
            1px
            minmax(160px,1fr);

        gap:17px;

        padding-right:18px;
    }

    .layer-category{
        padding:18px;
    }

    .layer-category h3{
        font-size:16px;
    }

    .layer-category p{
        font-size:11px;
    }

    .layer-service{
        padding-left:7px;
    }

    .layer-service h4{
        font-size:13px;
    }

    .layer-service p{
        font-size:10.5px;
    }


    /* RESULT */

    .engine-result{
        padding-left:15px;
        padding-right:15px;
    }

    .result-school-icon{
        width:82px;
        height:82px;
    }

    .result-school-icon svg{
        width:41px;
        height:41px;
    }

    .engine-result h3{
        font-size:21px;
    }

    .engine-result p{
        font-size:15px;
    }

    .engine-result strong{
        font-size:17px;
    }


    /* BOTTOM */

    .engine-principles{
        padding-left:10px;
        padding-right:10px;
    }

    .engine-principle{
        padding-left:10px;
        padding-right:10px;
    }

    .principle-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

}


/* =========================================================
   1180PX — LAPTOP / TABLET LANDSCAPE
========================================================= */

@media (max-width:1180px){

    .rython-engine{
        padding:
            105px 28px 85px;
    }

    .engine-header{
        margin-bottom:50px;
    }

    /*
       Main layout becomes:
       LEFT ENGINE
       +
       RIGHT OPERATIONAL SYSTEM

       Final result moves below the 3 layers.
    */

    .engine-showcase{
        grid-template-columns:
            minmax(320px,.75fr)
            minmax(500px,1.25fr);

        gap:25px;

        align-items:stretch;
    }


    /* LEFT */

    .engine-visual{
        grid-column:1;
        grid-row:1;

        min-height:660px;
    }


    /* CENTER */

    .engine-layers{
        grid-column:2;
        grid-row:1;
    }

    .engine-layer{
        min-height:210px;

        grid-template-columns:
            130px
            minmax(150px,1fr)
            1px
            minmax(150px,1fr);

        gap:15px;
    }


    /* FINAL RESULT BELOW */

    .engine-result{
        grid-column:1 / -1;
        grid-row:2;

        min-height:auto;

        display:grid;

        grid-template-columns:
            auto auto 1px 1fr auto;

        align-items:center;

        justify-content:center;

        gap:25px;

        padding:25px 35px;

        text-align:left;
    }

    .result-school-icon{
        width:70px;
        height:70px;

        margin:0;
    }

    .result-school-icon svg{
        width:35px;
        height:35px;
    }

    .engine-result h3{
        font-size:20px;
    }

    .engine-result h3 br{
        display:none;
    }

    .result-line{
        width:1px;
        height:55px;

        margin:0;

        background:
            linear-gradient(
                180deg,
                transparent,
                #2563eb,
                transparent
            );
    }

    .engine-result p{
        font-size:14px;
        line-height:1.55;
    }

    .engine-result p br{
        display:none;
    }

    .engine-result strong{
        margin:0;

        white-space:nowrap;
    }


    /* DESKTOP CONNECTORS NO LONGER NEEDED */

    .engine-connectors{
        display:none;
    }


    /* PRINCIPLES */

    .engine-principles{
        grid-template-columns:
            repeat(3,1fr);

        row-gap:25px;

        padding:
            25px 20px;
    }

    .engine-principle{
        padding:
            5px 20px;
    }

    .engine-principle:nth-child(3)::after{
        display:none;
    }

}


/* =========================================================
   992PX — TABLET
========================================================= */

@media (max-width:992px){

    .rython-engine{
        padding:
            95px 22px 80px;
    }


    /* HEADER */

    .engine-header h2{
        font-size:
            clamp(42px,6vw,56px);

        letter-spacing:-2px;
    }

    .engine-header p{
        font-size:16px;
    }


    /*
       Main structure now vertical:
       Engine visual
       ↓
       Operational layers
       ↓
       Final system
    */

    .engine-showcase{
        display:flex;

        flex-direction:column;

        gap:25px;
    }


    /* LEFT VISUAL */

    .engine-visual{
        width:100%;
        max-width:700px;

        min-height:620px;

        margin:0 auto;
    }

    .engine-orbit{
        width:420px;
        height:470px;
    }

    .orbit-ring-one{
        width:350px;
        height:410px;
    }

    .orbit-ring-two{
        width:285px;
        height:340px;
    }

    .engine-core{
        width:220px;
        height:220px;
    }

    .engine-core-inner{
        width:145px;
        height:145px;
    }

    .orbit-item{
        width:100px;
        height:100px;
    }


    /* OPERATIONAL LAYERS */

    .engine-layers{
        width:100%;
        max-width:760px;

        margin:0 auto;
    }

    .engine-layer{
        grid-template-columns:
            150px
            minmax(190px,1fr)
            1px
            minmax(190px,1fr);

        min-height:205px;

        gap:20px;

        padding-right:24px;
    }

    .layer-category{
        padding:20px 22px;
    }

    .layer-category h3{
        font-size:17px;
    }

    .layer-service h4{
        font-size:14px;
    }

    .layer-service p{
        font-size:11.5px;
    }


    /* RESULT */

    .engine-result{
        width:100%;
        max-width:760px;

        margin:0 auto;
    }


    /* PRINCIPLES */

    .engine-principles{
        max-width:760px;

        margin:
            25px auto 0;
    }

}


/* =========================================================
   768PX — TABLET PORTRAIT
========================================================= */

@media (max-width:768px){

    .rython-engine{
        padding:
            82px 18px 70px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .engine-header{
        margin-bottom:42px;
    }

    .engine-tag{
        padding:
            8px 15px;

        margin-bottom:17px;

        font-size:10px;

        letter-spacing:.8px;
    }

    .engine-tag svg{
        width:14px;
        height:14px;
    }

    .engine-header h2{
        font-size:
            clamp(35px,7.5vw,46px);

        line-height:1.07;

        letter-spacing:-1.6px;
    }

    .engine-header h2 span{
        display:block;

        margin-top:5px;
    }

    .engine-header p{
        max-width:560px;

        margin-top:15px;

        font-size:15px;

        line-height:1.65;
    }

    .engine-header p br{
        display:none;
    }

    .engine-heading-line{
        margin-top:17px;
    }


    /* =====================================================
       ENGINE VISUAL
    ===================================================== */

    .engine-visual{
        min-height:570px;

        border-radius:24px;
    }

    .engine-visual > h3{
        font-size:17px;
    }

    .engine-orbit{
        width:380px;
        height:430px;
    }

    .orbit-ring-one{
        width:315px;
        height:375px;
    }

    .orbit-ring-two{
        width:255px;
        height:310px;
    }

    .engine-core{
        width:195px;
        height:195px;

        padding:20px;
    }

    .engine-core-inner{
        width:128px;
        height:128px;
    }

    .engine-r-logo{
        font-size:42px;
    }

    .engine-core-inner strong{
        font-size:17px;
    }

    .orbit-item{
        width:90px;
        height:90px;
    }

    .orbit-icon svg{
        width:25px;
        height:25px;
    }

    .orbit-item span{
        font-size:7.8px;
    }


    /* =====================================================
       LAYERS
    ===================================================== */

    .engine-layers{
        gap:18px;
    }

    /*
       Category becomes full-width header.
       Services sit below in two columns.
    */

    .engine-layer{
        display:grid;

        grid-template-columns:
            1fr 1px 1fr;

        grid-template-rows:
            auto 1fr;

        gap:
            18px 20px;

        min-height:auto;

        padding:
            0 20px 22px;

        overflow:hidden;

        border-radius:22px;
    }


    /* CATEGORY */

    .layer-category{
        grid-column:1 / -1;

        min-height:auto;

        margin:
            0 -20px;

        padding:
            18px 24px;

        display:grid;

        grid-template-columns:
            auto auto 1fr;

        align-items:center;

        justify-content:start;

        gap:14px;

        border-radius:
            21px 21px 0 0;
    }

    .layer-category::after{
        display:none;
    }

    .layer-category-icon{
        margin:0;
    }

    .layer-category-icon svg{
        width:32px;
        height:32px;
    }

    .layer-category h3{
        margin:0;

        font-size:17px;
    }

    .layer-category p{
        margin-left:5px;

        font-size:11px;
    }


    /* SERVICE */

    .layer-service{
        padding:
            0 5px;
    }

    .service-top{
        margin-bottom:9px;
    }

    .service-icon{
        width:48px;
        height:48px;
    }

    .service-icon svg{
        width:25px;
        height:25px;
    }

    .layer-service h4{
        font-size:13.5px;
    }

    .layer-service p{
        font-size:11px;
    }


    /* DIVIDER */

    .service-divider{
        height:100%;

        align-self:stretch;
    }


    /* OUTPUT DOT */

    .layer-output-dot{
        display:none;
    }


    /* =====================================================
       FINAL RESULT
    ===================================================== */

    .engine-result{
        grid-template-columns:
            auto 1fr;

        gap:
            18px 20px;

        padding:
            25px;

        text-align:left;
    }

    .result-school-icon{
        grid-row:
            1 / 3;

        width:72px;
        height:72px;
    }

    .engine-result h3{
        align-self:end;

        font-size:20px;
    }

    .result-line{
        display:none;
    }

    .engine-result p{
        align-self:start;

        font-size:13.5px;
    }

    .engine-result strong{
        grid-column:
            1 / -1;

        justify-self:center;

        padding:
            8px 18px;

        margin-top:3px;

        border-radius:999px;

        color:#1557e8;

        background:#eef5ff;

        font-size:16px;
    }


    /* =====================================================
       PRINCIPLES
    ===================================================== */

    .engine-principles{
        grid-template-columns:
            repeat(2,1fr);

        gap:0;

        padding:
            18px 12px;
    }

    .engine-principle{
        padding:
            16px 18px;
    }

    .engine-principle:nth-child(2)::after,
    .engine-principle:nth-child(4)::after,
    .engine-principle:nth-child(6)::after{
        display:none;
    }

    .engine-principle:nth-child(3)::after{
        display:block;
    }

    .principle-icon{
        width:46px;
        height:46px;

        flex-basis:46px;
    }

    .engine-principle h4{
        font-size:12px;
    }

    .engine-principle p{
        font-size:9.5px;
    }

}


/* =========================================================
   576PX — MOBILE
========================================================= */

@media (max-width:576px){

    .rython-engine{
        padding:
            70px 14px 62px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .engine-header{
        margin-bottom:34px;
    }

    .engine-tag{
        max-width:100%;

        padding:
            8px 13px;

        font-size:9px;

        letter-spacing:.55px;
    }

    .engine-header h2{
        font-size:
            clamp(31px,9vw,38px);

        letter-spacing:-1.2px;
    }

    .engine-header p{
        font-size:14px;

        line-height:1.6;
    }


    /* =====================================================
       ENGINE VISUAL
    ===================================================== */

    .engine-visual{
        min-height:500px;

        padding:
            23px 12px 15px;

        border-radius:21px;
    }

    .engine-visual > h3{
        font-size:14px;

        letter-spacing:.15px;
    }

    .engine-title-line{
        width:120px;
    }

    .engine-orbit{
        width:315px;
        height:380px;

        top:56%;
    }

    .orbit-ring-one{
        width:270px;
        height:340px;
    }

    .orbit-ring-two{
        width:220px;
        height:280px;
    }


    /* CORE */

    .engine-core{
        width:165px;
        height:165px;

        padding:17px;
    }

    .engine-core::after{
        inset:24px;

        border-width:4px;
    }

    .engine-core-inner{
        width:108px;
        height:108px;
    }

    .engine-r-logo{
        font-size:34px;

        letter-spacing:-4px;
    }

    .engine-core-inner strong{
        margin-top:4px;

        font-size:14px;
    }

    .engine-core-inner small{
        max-width:85px;

        font-size:4.7px;
    }


    /* ORBIT ITEMS */

    .orbit-item{
        width:76px;
        height:76px;

        border-width:3px;
    }

    .orbit-icon{
        margin-bottom:4px;
    }

    .orbit-icon svg{
        width:21px;
        height:21px;
    }

    .orbit-item span{
        font-size:6.5px;
    }

    .orbit-faculty{
        top:1px;
    }

    .orbit-planning{
        top:67px;
        right:-2px;
    }

    .orbit-technology{
        right:-5px;
        bottom:65px;
    }

    .orbit-development{
        bottom:0;
    }

    .orbit-analytics{
        left:-5px;
        bottom:65px;
    }

    .orbit-assessment{
        left:-2px;
        top:67px;
    }


    /* PLATFORM */

    .engine-platform{
        bottom:13px;

        height:55px;
    }


    /* =====================================================
       LAYERS
    ===================================================== */

    .engine-layers{
        gap:15px;
    }

    /*
       On phones every service becomes vertical.
    */

    .engine-layer{
        display:block;

        padding:
            0 15px 18px;

        border-radius:19px;
    }


    /* CATEGORY */

    .layer-category{
        margin:
            0 -15px 20px;

        padding:
            16px 18px;

        grid-template-columns:
            auto 1fr;

        gap:
            4px 12px;

        border-radius:
            18px 18px 0 0;
    }

    .layer-category-icon{
        grid-row:
            1 / 3;
    }

    .layer-category-icon svg{
        width:30px;
        height:30px;
    }

    .layer-category h3{
        font-size:16px;
    }

    .layer-category p{
        margin:0;

        font-size:10.5px;
    }


    /* SERVICES */

    .layer-service{
        position:relative;

        padding:
            4px 4px 18px;
    }

    .layer-service:last-of-type{
        padding-top:18px;
        padding-bottom:4px;
    }

    .service-top{
        gap:10px;
    }

    .service-number{
        width:24px;
        height:24px;

        flex-basis:24px;

        font-size:10px;
    }

    .service-icon{
        width:46px;
        height:46px;
    }

    .service-icon svg{
        width:24px;
        height:24px;
    }

    .layer-service h4{
        font-size:13.5px;

        line-height:1.35;
    }

    .layer-service p{
        font-size:11px;

        line-height:1.55;
    }


    /* DIVIDER HORIZONTAL */

    .service-divider{
        width:100%;
        height:1px;

        margin:0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(148,163,184,.35),
                transparent
            );
    }


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

    .engine-result{
        display:flex;

        flex-direction:column;

        align-items:center;

        padding:
            28px 20px;

        text-align:center;
    }

    .result-school-icon{
        width:76px;
        height:76px;

        margin-bottom:7px;
    }

    .result-school-icon svg{
        width:38px;
        height:38px;
    }

    .engine-result h3{
        font-size:20px;

        line-height:1.25;
    }

    .engine-result h3 br{
        display:block;
    }

    .result-line{
        display:block;

        width:45px;
        height:3px;

        margin:
            15px auto;
    }

    .engine-result p{
        font-size:14px;

        line-height:1.6;
    }

    .engine-result p br{
        display:block;
    }

    .engine-result strong{
        margin-top:12px;

        padding:
            8px 18px;

        font-size:16px;
    }


    /* =====================================================
       PRINCIPLES
    ===================================================== */

    .engine-principles{
        grid-template-columns:1fr;

        padding:
            8px 14px;

        border-radius:19px;
    }

    .engine-principle{
        padding:
            16px 5px;

        align-items:center;
    }

    .engine-principle:not(:last-child)::after{
        display:block;

        width:100%;
        height:1px;

        left:0;
        right:auto;
        top:auto;
        bottom:0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(37,99,235,.18),
                transparent
            );
    }

    .principle-icon{
        width:48px;
        height:48px;

        flex-basis:48px;
    }

    .principle-icon svg{
        width:24px;
        height:24px;
    }

    .engine-principle h4{
        margin-bottom:4px;

        font-size:13px;
    }

    .engine-principle p{
        font-size:10.5px;
    }

}


/* =========================================================
   400PX — SMALL MOBILE
========================================================= */

@media (max-width:400px){

    .rython-engine{
        padding:
            65px 11px 58px;
    }

    .engine-header h2{
        font-size:30px;
    }

    .engine-header p{
        font-size:13.5px;
    }


    /* ENGINE */

    .engine-visual{
        min-height:465px;
    }

    .engine-orbit{
        width:285px;
        height:350px;
    }

    .orbit-ring-one{
        width:245px;
        height:315px;
    }

    .orbit-ring-two{
        width:200px;
        height:255px;
    }

    .engine-core{
        width:150px;
        height:150px;
    }

    .engine-core-inner{
        width:98px;
        height:98px;
    }

    .engine-r-logo{
        font-size:31px;
    }

    .engine-core-inner strong{
        font-size:12px;
    }

    .engine-core-inner small{
        font-size:4.2px;
    }


    /* ORBIT ITEMS */

    .orbit-item{
        width:68px;
        height:68px;
    }

    .orbit-icon svg{
        width:18px;
        height:18px;
    }

    .orbit-item span{
        font-size:5.8px;
    }

    .orbit-planning{
        right:0;
    }

    .orbit-technology{
        right:0;
    }

    .orbit-assessment{
        left:0;
    }

    .orbit-analytics{
        left:0;
    }


    /* LAYERS */

    .engine-layer{
        padding:
            0 12px 16px;
    }

    .layer-category{
        margin:
            0 -12px 18px;

        padding:
            14px 15px;
    }

    .layer-category h3{
        font-size:15px;
    }

    .layer-category p{
        font-size:10px;
    }

    .layer-service{
        padding-left:2px;
        padding-right:2px;
    }

    .layer-service h4{
        font-size:13px;
    }

    .layer-service p{
        font-size:10.5px;
    }


    /* RESULT */

    .engine-result{
        padding:
            25px 16px;
    }

    .engine-result h3{
        font-size:19px;
    }

}


/* =========================================================
   340PX — VERY SMALL MOBILE
========================================================= */

@media (max-width:340px){

    .rython-engine{
        padding-left:8px;
        padding-right:8px;
    }

    .engine-header h2{
        font-size:27px;
    }

    .engine-tag{
        font-size:8px;
    }


    /* ENGINE */

    .engine-visual{
        min-height:440px;
    }

    .engine-visual > h3{
        font-size:13px;
    }

    .engine-orbit{
        width:265px;
        height:330px;
    }

    .orbit-ring-one{
        width:225px;
        height:295px;
    }

    .orbit-ring-two{
        width:185px;
        height:240px;
    }

    .engine-core{
        width:140px;
        height:140px;
    }

    .engine-core-inner{
        width:90px;
        height:90px;
    }

    .orbit-item{
        width:63px;
        height:63px;
    }

    .orbit-item span{
        font-size:5.3px;
    }


    /* CONTENT */

    .layer-category{
        padding-left:12px;
        padding-right:12px;
    }

    .engine-result{
        padding-left:13px;
        padding-right:13px;
    }

}


/* =========================================================
   RYTHON ACADEMIC ENGINE — CLEAN CONSOLIDATED OVERRIDE
========================================================= */

.rython-engine, .rython-engine *{box-sizing:border-box}

@media (min-width:1181px){
  .rython-engine{padding:110px 22px 90px}
  .engine-container{max-width:1480px}
  .engine-showcase{
    grid-template-columns:minmax(390px,.9fr) minmax(650px,1.42fr) minmax(195px,.42fr);
    gap:30px;align-items:stretch
  }
  .engine-visual{min-height:670px;padding:29px 23px 23px;border-radius:26px}
  .engine-orbit{width:395px;height:490px;top:55%}
  .orbit-ring-one{width:335px;height:415px}
  .orbit-ring-two{width:278px;height:342px}
  .engine-core{width:220px;height:220px}
  .engine-core-inner{width:145px;height:145px;padding:17px;overflow:hidden}
  .orbit-item{width:100px;height:100px}

  .engine-layers{display:grid;grid-template-rows:repeat(3,1fr);gap:15px;min-width:0}

  .rython-engine .engine-layer{
    position:relative;
    display:grid;
    grid-template-columns:155px minmax(0,1fr) 1px minmax(0,1fr);
    align-items:stretch;
    min-width:0;
    min-height:210px;
    padding:0;
    gap:0;
    overflow:hidden;
    border-radius:22px;
  }

  .rython-engine .layer-category{
    position:relative;
    z-index:3;
    height:100%;
    min-width:0;
    margin:0;
    padding:23px 28px 23px 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    border-radius:21px 0 0 21px;
  }

  .rython-engine .layer-category::after{
    content:"";
    position:absolute;
    right:-28px;top:0;
    width:29px;height:100%;
    background:var(--layer-color);
    clip-path:polygon(0 0,100% 50%,0 100%);
    z-index:1;
    pointer-events:none;
  }

  .layer-category-icon,.layer-category h3,.layer-category p{position:relative;z-index:2}
  .layer-category-icon{margin-bottom:11px}
  .layer-category-icon svg{width:37px;height:37px}
  .layer-category h3{margin:0 0 7px;font-size:17px;line-height:1.15;white-space:nowrap}
  .layer-category p{max-width:108px;margin:0;font-size:11px;line-height:1.48}

  .rython-engine .layer-service{
    position:relative;
    min-width:0;
    margin:0;
    padding:23px 20px 21px 43px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .rython-engine .layer-category + .layer-service{padding-left:52px}

  .service-top{
    display:flex;align-items:center;gap:11px;
    min-height:47px;margin:0 0 10px
  }
  .service-number{
    position:static;
    width:25px;height:25px;min-width:25px;flex:0 0 25px;
    display:flex;align-items:center;justify-content:center;
    margin:0;font-size:10.5px
  }
  .service-icon{
    position:static;
    width:49px;height:49px;min-width:49px;flex:0 0 49px;
    display:flex;align-items:center;justify-content:center;margin:0
  }
  .service-icon svg{width:25px;height:25px}
  .layer-service h4{
    width:100%;max-width:100%;margin:0 0 7px;
    font-size:13.5px;line-height:1.32;
    white-space:normal;word-break:normal;overflow-wrap:normal
  }
  .layer-service p{
    width:100%;max-width:100%;margin:0;
    font-size:10.8px;line-height:1.55;
    white-space:normal;word-break:normal;overflow-wrap:normal
  }
  .service-divider{
    width:1px;height:68%;min-height:120px;
    align-self:center;justify-self:center;margin:0
  }
  .layer-output-dot{right:-1px}

  .engine-result{min-width:195px;padding:32px 17px}
  .result-school-icon{width:88px;height:88px;margin-bottom:25px}
  .result-school-icon svg{width:44px;height:44px}
  .engine-result h3{font-size:22px}
  .engine-result p{font-size:15px;line-height:1.65}
  .engine-result strong{font-size:17px}

  .engine-principles{margin-top:24px;padding:22px 14px}
  .engine-principle{gap:11px;padding:5px 14px}
  .principle-icon{width:44px;height:44px;flex:0 0 44px}
  .engine-principle h4{font-size:11.8px}
  .engine-principle p{font-size:9.2px}
}

/* Actual logo */
.engine-core-inner{overflow:hidden}
.engine-core-logo{
  display:block;width:90%;max-width:120px;height:auto;
  object-fit:contain;position:relative;z-index:10;
  transform:none;animation:none
}

/* Animated tech rings only; core and content stay static */
.engine-orbit::before,.engine-orbit::after{
  content:"";position:absolute;left:50%;top:50%;
  border-radius:50%;pointer-events:none
}
.engine-orbit::before{
  width:360px;height:440px;
  border:2px dotted rgba(125,211,252,.44);
  animation:rythonOrbitRotate 30s linear infinite
}
.engine-orbit::after{
  width:302px;height:370px;
  border-top:1px solid rgba(255,255,255,.48);
  border-right:2px dashed rgba(56,189,248,.32);
  border-bottom:1px solid rgba(255,255,255,.16);
  border-left:2px dashed rgba(56,189,248,.32);
  animation:rythonOrbitRotateReverse 22s linear infinite
}
.orbit-ring-one{animation:rythonRingPulse 5.5s ease-in-out infinite}
.orbit-ring-two{animation:rythonRingPulseTwo 7s ease-in-out infinite}
.orbit-node{animation:rythonNodePulse 3s ease-in-out infinite}

.orbit-item{
  transition:scale .3s ease,box-shadow .3s ease,filter .3s ease;
  cursor:default
}
.orbit-item:hover{
  scale:1.07;z-index:30;filter:brightness(1.03);
  box-shadow:0 15px 34px rgba(0,0,0,.20),0 0 0 2px rgba(255,255,255,.9),0 0 28px rgba(56,189,248,.34)
}
.service-icon{transition:transform .3s ease,box-shadow .3s ease}
.layer-service:hover .service-icon{transform:translateY(-2px) scale(1.045);box-shadow:0 8px 20px rgba(15,23,42,.07)}

@keyframes rythonOrbitRotate{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes rythonOrbitRotateReverse{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0)}
}
@keyframes rythonRingPulse{
  0%,100%{opacity:.6;scale:1}
  50%{opacity:1;scale:1.015}
}
@keyframes rythonRingPulseTwo{
  0%,100%{opacity:.45}
  50%{opacity:.85}
}
@keyframes rythonNodePulse{
  0%,100%{opacity:.65}
  50%{opacity:1}
}

/* Tablet */
@media (max-width:992px){
  .engine-showcase{display:flex;flex-direction:column;gap:24px}
  .engine-visual,.engine-layers,.engine-result{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
  .engine-connectors{display:none}
}

/* Tablet portrait: category header + two service columns */
@media (max-width:768px){
  .rython-engine .engine-layer{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;
    padding:0;
    overflow:hidden
  }
  .rython-engine .layer-category{
    grid-column:1/-1;
    min-height:100px;
    margin:0;
    padding:18px 22px;
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:13px;
    border-radius:21px 21px 0 0
  }
  .rython-engine .layer-category::after{display:none}
  .layer-category-icon{margin:0}
  .layer-category h3{margin:0}
  .layer-category p{max-width:none}
  .rython-engine .layer-service,
  .rython-engine .layer-category + .layer-service{padding:23px 22px}
  .service-divider,.layer-output-dot{display:none}
}

/* Mobile: clean vertical cards */
@media (max-width:576px){
  .rython-engine .engine-layer{display:block;padding:0;border-radius:19px;overflow:hidden}
  .rython-engine .layer-category{
    width:100%;min-height:0;margin:0;
    padding:16px 18px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:3px 12px;
    border-radius:18px 18px 0 0
  }
  .layer-category-icon{grid-row:1/3}
  .rython-engine .layer-service,
  .rython-engine .layer-category + .layer-service{padding:21px 18px}
  .rython-engine .layer-service + .layer-service{border-top:1px solid rgba(37,99,235,.1)}
  .engine-core-inner{padding:12px}
  .engine-core-logo{max-width:92px}
}

@media (prefers-reduced-motion:reduce){
  .engine-orbit::before,.engine-orbit::after,.orbit-ring-one,.orbit-ring-two,.orbit-node{
    animation:none !important
  }
}

/* =========================================================
   ENGINE RESULT — MOBILE FINAL OVERRIDE
========================================================= */

@media (max-width:576px){

    .engine-result{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        width:100% !important;
        min-height:auto !important;

        padding:30px 20px !important;

        text-align:center !important;
        gap:0 !important;
    }

    .result-school-icon{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:76px !important;
        height:76px !important;

        margin:0 auto 20px !important;

        grid-column:auto !important;
        grid-row:auto !important;
    }

    .engine-result h3{
        width:100% !important;

        margin:0 !important;

        text-align:center !important;

        font-size:20px !important;
        line-height:1.25 !important;

        align-self:auto !important;
        justify-self:auto !important;

        grid-column:auto !important;
        grid-row:auto !important;
    }

    .result-line{
        display:block !important;

        width:45px !important;
        height:3px !important;

        margin:18px auto !important;
    }

    .engine-result p{
        width:100% !important;

        margin:0 !important;

        text-align:center !important;

        font-size:14px !important;
        line-height:1.55 !important;

        align-self:auto !important;
        justify-self:auto !important;

        grid-column:auto !important;
        grid-row:auto !important;
    }

    .engine-result strong{
        display:inline-block !important;

        margin:20px auto 0 !important;
        padding:8px 18px !important;

        align-self:center !important;
        justify-self:center !important;

        grid-column:auto !important;
        grid-row:auto !important;

        white-space:normal !important;

        font-size:15px !important;
        text-align:center !important;
    }
}