/* =========================================================
OKGames Guides Hub V2 Ultimate
Complete Final CSS
========================================================= */


/* =========================================================
1. Variables
========================================================= */

:root{
    --okg-brand:#0564C8;
    --okg-brand-dark:#034F9F;
    --okg-brand-light:#EAF4FF;
    --okg-brand-soft:#D9E9FA;

    --okg-title:#102A4C;
    --okg-text:#405A78;
    --okg-muted:#6D829A;

    --okg-white:#FFFFFF;
    --okg-bg:#F4F9FF;
    --okg-bg-alt:#EDF6FF;

    --okg-border:#C9DEF6;
    --okg-border-light:#DCEBFA;

    --okg-warning:#A96800;
    --okg-warning-bg:#FFF8E7;
    --okg-warning-border:#F1D28A;

    --okg-radius:10px;
    --okg-gap:20px;
    --okg-padding:20px;

    --okg-shadow:0 8px 24px rgba(23,36,58,.08);
    --okg-shadow-hover:0 14px 32px rgba(5,100,200,.14);
}


/* =========================================================
2. Global Reset
========================================================= */

.okg-guides-section,
.okg-guides-section *,
.okg-guides-section *::before,
.okg-guides-section *::after{
    box-sizing:border-box;
}

.okg-guides-section{
    width:calc(100% - 1px);
    margin:0 auto 20px;
    color:var(--okg-text);
    font-family:inherit;
}

.okg-guides-section-inner{
    width:100%;
    margin:0 auto;
    padding:20px;
    background:var(--okg-white);
    border:1px solid var(--okg-border);
    border-radius:var(--okg-radius);
    box-shadow:var(--okg-shadow);
}

.okg-guides-section img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

.okg-guides-section h1,
.okg-guides-section h2,
.okg-guides-section h3,
.okg-guides-section h4{
    color:var(--okg-title);
    font-family:inherit;
    font-weight:800;
    line-height:1.25;
}

.okg-guides-section p{
    margin-top:0;
    color:var(--okg-text);
    line-height:1.75;
}

.okg-guides-section a{
    text-decoration:none;
}

.okg-guides-section ul{
    color:var(--okg-text);
}

.okg-guides-section li{
    line-height:1.65;
}


/* =========================================================
3. Shared Headings
========================================================= */

.okg-guides-section-heading{
    max-width:820px;
    margin:0 auto 20px;
    text-align:center;
}

.okg-guides-section-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    margin:0 0 12px;
    padding:5px 12px;
    border:1px solid #B7D5F7;
    border-radius:999px;
    background:var(--okg-brand-light);
    color:var(--okg-brand);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.okg-guides-section-title{
    margin:0 0 12px;
    font-size:clamp(28px,3vw,40px);
}

.okg-guides-section-description{
    max-width:800px;
    margin:0 auto 10px;
    font-size:16px;
}

.okg-guides-section-description:last-child{
    margin-bottom:0;
}


/* =========================================================
4. Shared Buttons
========================================================= */

.okg-guides-buttons{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:20px;
}

.okg-guides-button{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border:1px solid transparent;
    border-radius:10px;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.okg-guides-button:hover{
    transform:translateY(-2px);
}

.okg-guides-button-primary{
    background:var(--okg-brand);
    color:#fff;
    border-color:var(--okg-brand);
}

.okg-guides-button-primary:hover{
    background:var(--okg-brand-dark);
    border-color:var(--okg-brand-dark);
    color:#fff;
    box-shadow:0 10px 22px rgba(5,100,200,.22);
}

.okg-guides-button-secondary{
    background:#fff;
    color:var(--okg-brand);
    border-color:#AFCFF2;
}

.okg-guides-button-secondary:hover{
    background:var(--okg-brand-light);
    border-color:var(--okg-brand);
    color:var(--okg-brand-dark);
}


/* =========================================================
5. Shared Notices
========================================================= */

.okg-guides-notice{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:20px;
    padding:20px;
    background:var(--okg-brand-light);
    border:1px solid #BDD9F7;
    border-radius:10px;
}

.okg-guides-notice-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.okg-guides-notice-content{
    flex:1;
    min-width:0;
}

.okg-guides-notice-content h3{
    margin:0 0 6px;
    font-size:18px;
}

.okg-guides-notice-content p{
    margin:0;
}

.okg-guides-notice-warning{
    background:var(--okg-warning-bg);
    border-color:var(--okg-warning-border);
}

.okg-guides-notice-warning .okg-guides-notice-icon{
    background:var(--okg-warning);
}


/* =========================================================
6. Shared Split Layout
========================================================= */

.okg-guides-split{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
    gap:20px;
    align-items:center;
}

.okg-guides-split-reverse{
    grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr);
}

.okg-guides-split-content,
.okg-guides-split-media{
    min-width:0;
}

.okg-guides-split-title{
    margin:0 0 14px;
    font-size:clamp(26px,3vw,38px);
}

.okg-guides-split-description{
    margin:0 0 14px;
    font-size:16px;
}

.okg-guides-split-media{
    overflow:hidden;
    border-radius:10px;
    background:linear-gradient(135deg,#E9F4FF,#D5E9FC);
    box-shadow:var(--okg-shadow);
}

.okg-guides-split-media img{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
}


/* =========================================================
7. Hero
========================================================= */

.okg-guides-hero{
    padding:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 85% 15%,rgba(255,255,255,.9),transparent 27%),
        linear-gradient(135deg,#E8F4FF,#D5E9FA);
    border:1px solid var(--okg-border);
    border-radius:10px;
    box-shadow:var(--okg-shadow);
}

.okg-guides-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
    gap:20px;
    align-items:center;
}

.okg-guides-hero-content,
.okg-guides-hero-media{
    min-width:0;
}

.okg-guides-hero-badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    margin-bottom:12px;
    padding:5px 12px;
    border:1px solid #ACCEF2;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    color:var(--okg-brand);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.okg-guides-hero-title{
    margin:0 0 14px;
    font-size:clamp(34px,5vw,58px);
}

.okg-guides-hero-description{
    margin:0 0 12px;
    font-size:16px;
}

.okg-guides-hero-highlights{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.okg-guides-hero-highlight{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:12px;
    background:rgba(255,255,255,.82);
    border:1px solid #C1DCF8;
    border-radius:10px;
    color:var(--okg-title);
    font-size:14px;
    font-weight:700;
}

.okg-guides-hero-highlight-icon{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-size:12px;
}

.okg-guides-hero-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding:14px;
    border:1px solid #BBD8F6;
    border-radius:10px;
    background:rgba(255,255,255,.7);
}

.okg-guides-hero-note-icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-weight:900;
}

.okg-guides-hero-note p{
    margin:0;
    font-size:13px;
}

.okg-guides-hero-media{
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(5,100,200,.12);
}

.okg-guides-hero-media img{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
}


/* =========================================================
8. Guides Overview
========================================================= */

.okg-guides-feature-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.okg-guides-feature-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border-light);
    border-radius:10px;
}

.okg-guides-feature-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:19px;
}

.okg-guides-feature-content{
    flex:1;
    min-width:0;
}

.okg-guides-feature-content h3{
    margin:0 0 6px;
    font-size:16px;
}

.okg-guides-feature-content p{
    margin:0;
    font-size:13px;
}

.okg-guides-overview-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:20px;
}

.okg-guides-overview-card{
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-overview-card h3{
    margin:0 0 8px;
    font-size:19px;
}

.okg-guides-overview-card p{
    margin:0;
}


/* =========================================================
9. Popular Guides Marquee
========================================================= */

.okg-guides-slider{
    width:100%;
    overflow:hidden;
    margin-top:20px;
    padding:4px 0 10px;
}

.okg-guides-slider-track{
    display:flex;
    width:max-content;
    gap:20px;
    animation:okgGuidesMarquee 48s linear infinite;
}

.okg-guides-slider:hover .okg-guides-slider-track{
    animation-play-state:paused;
}

@keyframes okgGuidesMarquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(-50% - 10px));
    }
}

.okg-guides-popular-card{
    flex:0 0 290px;
    width:290px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    box-shadow:0 5px 16px rgba(23,36,58,.06);
    transition:transform .25s ease,box-shadow .25s ease;
}

.okg-guides-popular-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--okg-shadow-hover);
}

.okg-guides-popular-image{
    display:block;
    overflow:hidden;
    background:var(--okg-brand-light);
}

.okg-guides-popular-image img{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    transition:transform .35s ease;
}

.okg-guides-popular-card:hover .okg-guides-popular-image img{
    transform:scale(1.04);
}

.okg-guides-popular-content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:20px;
}

.okg-guides-popular-category{
    margin-bottom:8px;
    color:var(--okg-brand);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.okg-guides-popular-title{
    margin:0 0 10px;
    font-size:20px;
}

.okg-guides-popular-text{
    flex:1;
    margin:0 0 14px;
    font-size:14px;
}

.okg-guides-popular-link{
    display:inline-flex;
    align-items:center;
    margin-top:auto;
    color:var(--okg-brand);
    font-size:14px;
    font-weight:800;
}


/* =========================================================
10. Getting Started
Desktop: 3 × 2
========================================================= */

.okg-guides-start-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.okg-guides-step-card{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    padding:10px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.okg-guides-step-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--okg-shadow-hover);
}

.okg-guides-step-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.okg-guides-step-number{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.okg-guides-step-label{
    color:var(--okg-muted);
    font-size:13px;
    font-weight:700;
}

.okg-guides-step-title{
    margin:0 0 10px;
    font-size:20px;
}

.okg-guides-step-text{
    margin:0 0 12px;
    font-size:14px;
}

.okg-guides-step-list{
    margin:0;
    padding-left:20px;
}

.okg-guides-step-list li{
    margin-bottom:7px;
    font-size:14px;
}

.okg-guides-start-checklist,
.okg-guides-payment-checklist,
.okg-guides-responsible-checklist{
    margin-top:20px;
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-start-checklist-heading,
.okg-guides-payment-checklist-heading,
.okg-guides-responsible-checklist-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.okg-guides-start-checklist-icon,
.okg-guides-payment-checklist-icon,
.okg-guides-responsible-checklist-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-weight:900;
}

.okg-guides-start-checklist-heading h3,
.okg-guides-payment-checklist-heading h3,
.okg-guides-responsible-checklist-heading h3{
    margin:0 0 4px;
    font-size:21px;
}

.okg-guides-start-checklist-heading p,
.okg-guides-payment-checklist-heading p,
.okg-guides-responsible-checklist-heading p{
    margin:0;
}

.okg-guides-start-checklist-grid,
.okg-guides-payment-checklist-grid,
.okg-guides-responsible-checklist-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.okg-guides-start-checklist-item,
.okg-guides-payment-checklist-item,
.okg-guides-responsible-checklist-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    background:#fff;
    border:1px solid var(--okg-border-light);
    border-radius:10px;
}

.okg-guides-start-checklist-item span,
.okg-guides-payment-checklist-item span,
.okg-guides-responsible-checklist-item span{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.okg-guides-start-checklist-item p,
.okg-guides-payment-checklist-item p,
.okg-guides-responsible-checklist-item p{
    margin:0;
    font-size:14px;
}


/* =========================================================
11. Account Security
========================================================= */

.okg-guides-security-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.okg-guides-security-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border-light);
    border-radius:10px;
}

.okg-guides-security-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:19px;
}

.okg-guides-security-content{
    flex:1;
    min-width:0;
}

.okg-guides-security-content h3{
    margin:0 0 6px;
    font-size:16px;
}

.okg-guides-security-content p{
    margin:0;
    font-size:13px;
}

.okg-guides-security-warning,
.okg-guides-responsible-warning{
    margin-top:20px;
    padding:20px;
    background:var(--okg-warning-bg);
    border:1px solid var(--okg-warning-border);
    border-radius:10px;
}

.okg-guides-security-warning-heading,
.okg-guides-responsible-warning-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.okg-guides-security-warning-icon,
.okg-guides-responsible-warning-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-warning);
    color:#fff;
    font-weight:900;
}

.okg-guides-security-warning-heading h3,
.okg-guides-responsible-warning-heading h3{
    margin:0 0 4px;
    font-size:21px;
}

.okg-guides-security-warning-heading p,
.okg-guides-responsible-warning-heading p{
    margin:0;
}

.okg-guides-security-warning-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.okg-guides-security-warning-item,
.okg-guides-responsible-warning-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    background:#fff;
    border:1px solid var(--okg-warning-border);
    border-radius:10px;
}

.okg-guides-security-warning-item span,
.okg-guides-responsible-warning-item span{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-warning);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.okg-guides-security-warning-item p,
.okg-guides-responsible-warning-item p{
    margin:0;
    font-size:14px;
}

.okg-guides-security-checklist{
    display:grid;
    grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);
    gap:20px;
    margin-top:20px;
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-security-checklist-content h3{
    margin:0 0 8px;
    font-size:23px;
}

.okg-guides-security-checklist-content p{
    margin:0;
}

.okg-guides-checklist{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 20px;
    margin:0;
    padding-left:20px;
}


/* =========================================================
12. Payment & Verification
========================================================= */

.okg-guides-payment-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.okg-guides-payment-point{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border-light);
    border-radius:10px;
}

.okg-guides-payment-point-number{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.okg-guides-payment-point h3{
    margin:0 0 5px;
    font-size:16px;
}

.okg-guides-payment-point p{
    margin:0;
    font-size:13px;
}

.okg-guides-payment-process{
    margin-top:20px;
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-payment-process-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.okg-guides-payment-process-card{
    height:100%;
    padding:20px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.okg-guides-payment-process-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--okg-shadow-hover);
}

.okg-guides-payment-process-number{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:14px;
    font-weight:900;
}

.okg-guides-payment-process-card h3{
    margin:0 0 8px;
    font-size:18px;
}

.okg-guides-payment-process-card p{
    margin:0;
    font-size:14px;
}

.okg-guides-verification{
    margin-top:20px;
    padding:20px;
    background:linear-gradient(135deg,#F4F9FF,#E8F4FF);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-verification-content{
    max-width:820px;
    margin:0 auto 20px;
    text-align:center;
}

.okg-guides-verification-content h2{
    margin:0 0 10px;
    font-size:clamp(26px,3vw,36px);
}

.okg-guides-verification-content p{
    margin:0;
}

.okg-guides-verification-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.okg-guides-verification-card{
    height:100%;
    padding:20px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    text-align:center;
}

.okg-guides-verification-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-size:21px;
}

.okg-guides-verification-card h3{
    margin:0 0 8px;
    font-size:18px;
}

.okg-guides-verification-card p{
    margin:0;
    font-size:14px;
}


/* =========================================================
13. Responsible Platform Tips
Desktop: 3 × 2
========================================================= */

.okg-guides-responsible-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.okg-guides-responsible-card{
    height:100%;
    padding:20px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.okg-guides-responsible-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--okg-shadow-hover);
}

.okg-guides-responsible-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:21px;
    font-weight:900;
}

.okg-guides-responsible-card h3{
    margin:0 0 8px;
    font-size:20px;
}

.okg-guides-responsible-card > p{
    margin:0 0 12px;
    font-size:14px;
}

.okg-guides-responsible-list{
    margin:0;
    padding-left:20px;
}

.okg-guides-responsible-list li{
    margin-bottom:6px;
    font-size:14px;
}

.okg-guides-responsible-framework{
    margin-top:20px;
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-responsible-framework-heading{
    max-width:760px;
    margin:0 auto 20px;
    text-align:center;
}

.okg-guides-responsible-framework-heading h3{
    margin:0 0 8px;
    font-size:26px;
}

.okg-guides-responsible-framework-heading p{
    margin:0;
}

.okg-guides-responsible-framework-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.okg-guides-responsible-framework-card{
    padding:20px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    text-align:center;
}

.okg-guides-responsible-framework-number{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-weight:900;
}

.okg-guides-responsible-framework-card h4{
    margin:0 0 8px;
    font-size:20px;
}

.okg-guides-responsible-framework-card p{
    margin:0;
    font-size:14px;
}

.okg-guides-responsible-warning-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}


/* =========================================================
14. Quick Reference
Desktop: 4 × 2
========================================================= */

.okg-guides-reference-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.okg-guides-reference-card{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    padding:20px;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.okg-guides-reference-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--okg-shadow-hover);
}

.okg-guides-reference-card-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.okg-guides-reference-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:19px;
}

.okg-guides-reference-category{
    color:var(--okg-brand);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2px;
    text-transform:uppercase;
}

.okg-guides-reference-card h3{
    margin:0 0 12px;
    font-size:19px;
}

.okg-guides-reference-list{
    margin:0;
    padding-left:20px;
}

.okg-guides-reference-list li{
    margin-bottom:8px;
    font-size:14px;
}

.okg-guides-reference-summary{
    display:grid;
    grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);
    gap:20px;
    margin-top:20px;
    padding:20px;
    background:var(--okg-bg);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-reference-summary-content h3{
    margin:0 0 8px;
    font-size:25px;
}

.okg-guides-reference-summary-content p{
    margin:0;
}

.okg-guides-reference-summary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.okg-guides-reference-summary-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    background:#fff;
    border:1px solid var(--okg-border-light);
    border-radius:10px;
}

.okg-guides-reference-summary-item span{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--okg-brand);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.okg-guides-reference-summary-item p{
    margin:0;
    font-size:14px;
}


/* =========================================================
15. FAQ
Desktop: 2 Columns
========================================================= */

.okg-guides-faq-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    align-items:start;
}

.okg-guides-faq-item{
    width:100%;
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--okg-border);
    border-radius:10px;
    box-shadow:0 4px 14px rgba(23,36,58,.05);
}

.okg-guides-faq-item[open]{
    border-color:#9FC9F5;
    box-shadow:0 8px 20px rgba(5,100,200,.09);
}

.okg-guides-faq-question{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:52px;
    padding:10px 16px;
    color:var(--okg-title);
    font-size:15px;
    font-weight:800;
    line-height:1.45;
    cursor:pointer;
    list-style:none;
    transition:background-color .25s ease,color .25s ease;
}

.okg-guides-faq-question::-webkit-details-marker{
    display:none;
}

.okg-guides-faq-question::marker{
    display:none;
    content:"";
}

.okg-guides-faq-question:hover{
    background:var(--okg-brand-light);
    color:var(--okg-brand-dark);
}

.okg-guides-faq-item[open] .okg-guides-faq-question{
    background:var(--okg-brand);
    color:#fff;
}

.okg-guides-faq-question-text{
    flex:1;
    min-width:0;
}

.okg-guides-faq-toggle{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand-light);
    color:var(--okg-brand);
    font-size:19px;
    font-weight:700;
    transition:transform .25s ease,background-color .25s ease,color .25s ease;
}

.okg-guides-faq-item[open] .okg-guides-faq-toggle{
    transform:rotate(45deg);
    background:#fff;
    color:var(--okg-brand);
}

.okg-guides-faq-answer{
    padding:16px;
    border-top:1px solid var(--okg-border-light);
    background:#fff;
}

.okg-guides-faq-answer p{
    margin:0 0 10px;
    font-size:14px;
    line-height:1.7;
}

.okg-guides-faq-answer p:last-child{
    margin-bottom:0;
}

.okg-guides-faq-note{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:20px;
    padding:20px;
    background:var(--okg-brand-light);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-faq-note-icon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-weight:900;
}

.okg-guides-faq-note-content{
    flex:1;
    min-width:0;
}

.okg-guides-faq-note-content h3{
    margin:0 0 6px;
    font-size:19px;
}

.okg-guides-faq-note-content p{
    margin:0;
}


/* =========================================================
16. Final CTA
========================================================= */

.okg-guides-cta-wrap{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    gap:20px;
    align-items:center;
    padding:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 90% 20%,rgba(255,255,255,.9),transparent 30%),
        linear-gradient(135deg,#E4F2FF,#CFE6FA);
    border:1px solid var(--okg-border);
    border-radius:10px;
}

.okg-guides-cta-content,
.okg-guides-cta-media{
    min-width:0;
}

.okg-guides-cta-title{
    margin:0 0 14px;
    font-size:clamp(30px,4vw,44px);
}

.okg-guides-cta-description{
    margin:0 0 12px;
}

.okg-guides-cta-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.okg-guides-cta-point{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:12px;
    background:rgba(255,255,255,.82);
    border:1px solid #BEDAF7;
    border-radius:10px;
}

.okg-guides-cta-point-icon{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.okg-guides-cta-point p{
    margin:0;
    font-size:14px;
}

.okg-guides-cta-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding:14px;
    background:rgba(255,255,255,.72);
    border:1px solid #BDD9F7;
    border-radius:10px;
}

.okg-guides-cta-note-icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-brand);
    color:#fff;
    font-weight:900;
}

.okg-guides-cta-note p{
    margin:0;
    font-size:13px;
}

.okg-guides-cta-media{
    overflow:hidden;
    border-radius:10px;
    box-shadow:var(--okg-shadow);
}

.okg-guides-cta-media img{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
}


/* =========================================================
17. Disclaimer
========================================================= */

.okg-guides-disclaimer-box{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    background:var(--okg-warning-bg);
    border:1px solid var(--okg-warning-border);
    border-radius:10px;
}

.okg-guides-disclaimer-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--okg-warning);
    color:#fff;
    font-size:19px;
    font-weight:900;
}

.okg-guides-disclaimer-content{
    flex:1;
    min-width:0;
}

.okg-guides-disclaimer-content h2{
    margin:0 0 10px;
    font-size:24px;
}

.okg-guides-disclaimer-content p{
    margin:0 0 10px;
}

.okg-guides-disclaimer-content p:last-child{
    margin-bottom:0;
}


/* =========================================================
18. Tablet
========================================================= */

@media (max-width:1024px){

    .okg-guides-hero-inner,
    .okg-guides-cta-wrap{
        grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
    }

    .okg-guides-split,
    .okg-guides-split-reverse{
        grid-template-columns:1fr 1fr;
    }

    .okg-guides-feature-list{
        grid-template-columns:1fr;
    }

    .okg-guides-start-grid,
    .okg-guides-payment-process-grid,
    .okg-guides-responsible-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .okg-guides-verification-grid,
    .okg-guides-reference-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .okg-guides-responsible-warning-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .okg-guides-security-checklist,
    .okg-guides-reference-summary{
        grid-template-columns:1fr;
    }

}


/* =========================================================
19. Mobile
========================================================= */

@media (max-width:767px){

    .okg-guides-section{
        margin-bottom:15px;
    }

    .okg-guides-section-inner,
    .okg-guides-hero{
        padding:15px;
    }

    .okg-guides-hero-inner,
    .okg-guides-split,
    .okg-guides-split-reverse,
    .okg-guides-cta-wrap{
        grid-template-columns:1fr;
    }

    .okg-guides-hero-content,
    .okg-guides-split-content,
    .okg-guides-cta-content{
        order:1;
    }

    .okg-guides-hero-media,
    .okg-guides-split-media,
    .okg-guides-cta-media{
        order:2;
    }

    .okg-guides-section-title{
        font-size:28px;
    }

    .okg-guides-split-title{
        font-size:26px;
    }

    .okg-guides-hero-title{
        font-size:36px;
    }

    .okg-guides-hero-highlights,
    .okg-guides-feature-list,
    .okg-guides-overview-grid,
    .okg-guides-start-grid,
    .okg-guides-security-grid,
    .okg-guides-payment-points,
    .okg-guides-payment-process-grid,
    .okg-guides-verification-grid,
    .okg-guides-responsible-grid,
    .okg-guides-responsible-framework-grid,
    .okg-guides-security-warning-grid,
    .okg-guides-responsible-warning-grid,
    .okg-guides-reference-grid,
    .okg-guides-reference-summary-grid,
    .okg-guides-faq-grid,
    .okg-guides-cta-points,
    .okg-guides-start-checklist-grid,
    .okg-guides-payment-checklist-grid,
    .okg-guides-responsible-checklist-grid,
    .okg-guides-checklist{
        grid-template-columns:1fr;
    }

    .okg-guides-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .okg-guides-button{
        width:100%;
    }

    .okg-guides-popular-card{
        flex-basis:260px;
        width:260px;
    }

    .okg-guides-slider-track{
        gap:15px;
    }

    .okg-guides-payment-process,
    .okg-guides-verification,
    .okg-guides-responsible-framework,
    .okg-guides-security-warning,
    .okg-guides-responsible-warning,
    .okg-guides-start-checklist,
    .okg-guides-payment-checklist,
    .okg-guides-responsible-checklist,
    .okg-guides-security-checklist,
    .okg-guides-reference-summary,
    .okg-guides-cta-wrap{
        padding:15px;
    }

    .okg-guides-notice,
    .okg-guides-faq-note,
    .okg-guides-disclaimer-box{
        padding:15px;
    }

    .okg-guides-faq-question{
        min-height:50px;
        padding:10px 14px;
        font-size:14px;
    }

    .okg-guides-faq-answer{
        padding:14px;
    }

}


/* =========================================================
20. Small Mobile
========================================================= */

@media (max-width:480px){

    .okg-guides-hero-title{
        font-size:32px;
    }

    .okg-guides-section-title,
    .okg-guides-split-title,
    .okg-guides-cta-title{
        font-size:25px;
    }

    .okg-guides-step-card,
    .okg-guides-reference-card,
    .okg-guides-responsible-card,
    .okg-guides-payment-process-card,
    .okg-guides-verification-card,
    .okg-guides-overview-card{
        padding:16px;
    }

    .okg-guides-feature-item,
    .okg-guides-security-item,
    .okg-guides-payment-point{
        padding:14px;
    }

    .okg-guides-hero-media img,
    .okg-guides-split-media img,
    .okg-guides-cta-media img{
        aspect-ratio:4 / 3;
    }

}


/* =========================================================
21. Reduced Motion
========================================================= */

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

    .okg-guides-slider-track{
        animation:none;
    }

    .okg-guides-popular-card,
    .okg-guides-step-card,
    .okg-guides-reference-card,
    .okg-guides-responsible-card,
    .okg-guides-payment-process-card,
    .okg-guides-button,
    .okg-guides-popular-image img{
        transition:none;
    }

}