/* =========================================================
OKGames Tongits Beginner Guide
Guide V2 Ultimate - Complete CSS
File: tongits-beginner-guide.css
Namespace: okg-tongits-guide-*
========================================================= */


/* =========================================================
Design Tokens
========================================================= */

:root{
    --otg-brand:#0564C8;
    --otg-brand-hover:#034F9F;
    --otg-brand-dark:#12355F;
    --otg-brand-light:#EAF4FF;

    --otg-title:#12355F;
    --otg-text:#365A80;
    --otg-muted:#64809E;

    --otg-page:#F4F8FD;
    --otg-white:#FFFFFF;
    --otg-surface:#F5F9FE;
    --otg-surface-blue:#E8F3FF;

    --otg-border:#C8DDF4;
    --otg-border-strong:#A9CBEF;

    --otg-success:#138A58;
    --otg-success-light:#EAF8F1;
    --otg-success-border:#BCE4D0;

    --otg-warning:#B77900;
    --otg-warning-light:#FFF6DE;
    --otg-warning-border:#E9C97D;

    --otg-danger:#C13F4B;
    --otg-danger-dark:#7D2430;
    --otg-danger-light:#FFF0F2;
    --otg-danger-border:#F1C2C8;

    --otg-shadow:
        0 10px 28px rgba(28,67,108,.08);

    --otg-shadow-hover:
        0 14px 34px rgba(28,67,108,.14);

    --otg-radius:10px;
    --otg-gap:20px;
    --otg-padding:20px;
}


/* =========================================================
Global Reset
========================================================= */

.okg-tongits-guide-page,
.okg-tongits-guide-page *{
    box-sizing:border-box;
}

.okg-tongits-guide-page{
    width:100%;
    margin:0;
    padding:0;
    color:var(--otg-text);
    font-family:inherit;
}

.okg-tongits-guide-page img{
    max-width:100%;
}

.okg-tongits-guide-page a{
    text-decoration:none;
}

.okg-tongits-guide-page button,
.okg-tongits-guide-page a{
    font-family:inherit;
}


/* =========================================================
Shared Sections
========================================================= */

.okg-tongits-guide-hero,
.okg-tongits-guide-section,
.okg-tongits-guide-cta,
.okg-tongits-guide-disclaimer{
    width:calc(100% - 1px);
    margin:0 auto 20px;
    border-radius:10px;
}

.okg-tongits-guide-section{
    padding:20px;
    border:1px solid var(--otg-border);
    background:var(--otg-white);
    box-shadow:var(--otg-shadow);
}

.okg-tongits-guide-inner{
    width:100%;
    max-width:100%;
    margin:0 auto;
}

.okg-tongits-guide-heading{
    width:100%;
    max-width:880px;
    margin:0 auto 20px;
    text-align:center;
}

.okg-tongits-guide-section-top,
.okg-tongits-guide-hero-top{
    width:100%;
    margin-bottom:20px;
}


/* =========================================================
Labels and Typography
========================================================= */

.okg-tongits-guide-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    padding:7px 14px;
    border:1px solid var(--otg-border-strong);
    border-radius:999px;
    background:var(--otg-brand-light);
    color:var(--otg-brand);
    font-size:12px;
    font-weight:900;
    line-height:1;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.okg-tongits-guide-title{
    margin:14px 0 10px;
    color:var(--otg-title);
    font-size:clamp(28px,3vw,35px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.6px;
}

.okg-tongits-guide-title-left{
    max-width:100%;
    text-align:left;
}

.okg-tongits-guide-description{
    margin:0;
    color:var(--otg-text);
    font-size:16px;
    line-height:1.75;
}

.okg-tongits-guide-full-intro{
    width:100%;
    max-width:none;
}

.okg-tongits-guide-full-intro p{
    margin:0 0 14px;
    color:var(--otg-text);
    font-size:16px;
    line-height:1.75;
}

.okg-tongits-guide-full-intro p:last-child{
    margin-bottom:0;
}


/* =========================================================
Buttons
========================================================= */

.okg-tongits-guide-button{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    border:1px solid transparent;
    border-radius:10px;
    font-size:15px;
    font-weight:850;
    line-height:1.2;
    text-align:center;
    cursor:pointer;
    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

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

.okg-tongits-guide-button-primary{
    border-color:var(--otg-brand);
    background:var(--otg-brand);
    color:#FFFFFF;
}

.okg-tongits-guide-button-primary:hover{
    border-color:var(--otg-brand-hover);
    background:var(--otg-brand-hover);
    color:#FFFFFF;
    box-shadow:0 9px 20px rgba(5,100,200,.20);
}

.okg-tongits-guide-button-secondary{
    border-color:var(--otg-border-strong);
    background:#FFFFFF;
    color:var(--otg-brand);
}

.okg-tongits-guide-button-secondary:hover{
    border-color:var(--otg-brand);
    background:var(--otg-brand-light);
    color:var(--otg-brand-hover);
}


/* =========================================================
Shared Split Layout
Hero and Overview
========================================================= */

.okg-tongits-guide-split{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    align-items:stretch;
    gap:20px;
}

.okg-tongits-guide-landscape-media{
    min-width:0;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    background:#DCEBFA;
}

.okg-tongits-guide-landscape-media::before{
    content:"";
    display:block;
    padding-top:56.25%;
}

.okg-tongits-guide-landscape-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    border-radius:10px;
}


/* =========================================================
Hero V2 Ultimate
========================================================= */

.okg-tongits-guide-hero{
    overflow:hidden;
    padding:20px;
    border:1px solid var(--otg-border);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(5,100,200,.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F4F9FF 52%,
            #E3F1FF 100%
        );
    box-shadow:var(--otg-shadow);
}

.okg-tongits-guide-hero-title{
    max-width:100%;
    margin:18px 0 14px;
    color:var(--otg-title);
    font-size:clamp(44px,5.4vw,50px);
    font-weight:950;
    line-height:1.03;
    letter-spacing:-1.5px;
}

.okg-tongits-guide-hero-actions{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.okg-tongits-guide-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 16px;
}

.okg-tongits-guide-hero-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 16px;
}

.okg-tongits-guide-hero-point{
    min-width:0;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:rgba(255,255,255,.92);
}

.okg-tongits-guide-hero-point span{
    flex:0 0 27px;
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:13px;
    font-weight:900;
}

.okg-tongits-guide-hero-point p{
    margin:0;
    color:var(--otg-title);
    font-size:14px;
    font-weight:850;
    line-height:1.4;
}

.okg-tongits-guide-hero-note{
    flex:1;
    min-height:88px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:0;
    padding:16px;
    border:1px solid var(--otg-border-strong);
    border-radius:10px;
    background:rgba(234,244,255,.94);
}

.okg-tongits-guide-hero-note-icon{
    flex:0 0 30px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:15px;
    font-weight:900;
}

.okg-tongits-guide-hero-note p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}


/* =========================================================
Tongits Basics Overview V2 Ultimate
========================================================= */

.okg-tongits-guide-overview-v2
.okg-tongits-guide-overview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:stretch;
    gap:10px;
    margin:0;
}

.okg-tongits-guide-overview-card{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:var(--otg-surface);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.okg-tongits-guide-overview-card:hover{
    transform:translateY(-2px);
    border-color:var(--otg-border-strong);
    box-shadow:var(--otg-shadow-hover);
}

.okg-tongits-guide-overview-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:19px;
    font-weight:900;
}

.okg-tongits-guide-overview-card-content{
    min-width:0;
}

.okg-tongits-guide-overview-card h3{
    margin:0 0 6px;
    color:var(--otg-title);
    font-size:17px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-overview-card p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.6;
}


/* =========================================================
Summary Cards
========================================================= */

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

.okg-tongits-guide-summary-card{
    min-width:0;
    position:relative;
    padding:20px;
    overflow:hidden;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F1F7FE
        );
}

.okg-tongits-guide-summary-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:25px;
    margin-bottom:14px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:11px;
    font-weight:900;
    line-height:1;
    letter-spacing:.5px;
}

.okg-tongits-guide-summary-card h3{
    margin:0 0 8px;
    color:var(--otg-title);
    font-size:19px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-summary-card p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.7;
}


/* =========================================================
Notice
========================================================= */

.okg-tongits-guide-notice{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:20px;
    padding:18px 20px;
    border:1px solid var(--otg-border-strong);
    border-radius:10px;
    background:var(--otg-brand-light);
}

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

.okg-tongits-guide-notice-content{
    min-width:0;
}

.okg-tongits-guide-notice-content h3{
    margin:0 0 5px;
    color:var(--otg-title);
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-notice-content p{
    margin:0;
    color:var(--otg-text);
    font-size:15px;
    line-height:1.65;
}

.okg-tongits-guide-notice-warning{
    border-color:#F0D390;
    background:var(--otg-warning-light);
}

.okg-tongits-guide-notice-warning
.okg-tongits-guide-notice-icon{
    background:var(--otg-warning);
}


/* =========================================================
Tongits Terminology
Desktop 4 Columns
========================================================= */

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

.okg-tongits-guide-term-card{
    min-width:0;
    position:relative;
    padding:20px;
    overflow:hidden;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.okg-tongits-guide-term-card:hover{
    transform:translateY(-3px);
    border-color:var(--otg-border-strong);
    box-shadow:var(--otg-shadow-hover);
}

.okg-tongits-guide-term-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:18px;
    font-weight:900;
}

.okg-tongits-guide-term-card h3{
    margin:0 0 8px;
    color:var(--otg-title);
    font-size:18px;
    font-weight:900;
    line-height:1.25;
}

.okg-tongits-guide-term-card p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}

.okg-tongits-guide-term-example{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--otg-border);
    color:var(--otg-brand);
    font-size:12px;
    font-weight:850;
    line-height:1.5;
}


/* =========================================================
How Tongits Works
Desktop 3 Columns
========================================================= */

.okg-tongits-guide-steps-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.okg-tongits-guide-step-card{
    min-width:0;
    position:relative;
    padding:20px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
}

.okg-tongits-guide-step-number{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:16px;
    font-weight:900;
}

.okg-tongits-guide-step-card h3{
    margin:0 0 8px;
    color:var(--otg-title);
    font-size:18px;
    font-weight:900;
    line-height:1.25;
}

.okg-tongits-guide-step-card p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}

.okg-tongits-guide-step-list{
    margin:14px 0 0;
    padding:12px 0 0 18px;
    border-top:1px solid var(--otg-border);
}

.okg-tongits-guide-step-list li{
    margin:0 0 5px;
    color:var(--otg-text);
    font-size:13px;
    line-height:1.5;
}

.okg-tongits-guide-step-list li:last-child{
    margin-bottom:0;
}


/* =========================================================
Tongits Categories Carousel
========================================================= */

.okg-tongits-carousel{
    position:relative;
    width:100%;
    min-width:0;
}

.okg-tongits-carousel-viewport{
    width:100%;
    overflow:hidden;
    border-radius:10px;
    touch-action:pan-y;
}

.okg-tongits-carousel-track{
    display:flex;
    align-items:stretch;
    gap:20px;
    will-change:transform;
    transition:
        transform .55s cubic-bezier(.22,.61,.36,1);
}

.okg-tongits-carousel-slide{
    flex:0 0 calc((100% - 40px) / 3);
    min-width:0;
    margin:0;
}

.okg-tongits-guide-type-card{
    height:100%;
    overflow:hidden;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.okg-tongits-guide-type-card:hover{
    transform:translateY(-3px);
    border-color:var(--otg-border-strong);
    box-shadow:var(--otg-shadow-hover);
}

.okg-tongits-guide-type-image{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#DCEBFA;
}

.okg-tongits-guide-type-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .45s ease;
}

.okg-tongits-guide-type-card:hover
.okg-tongits-guide-type-image img{
    transform:scale(1.04);
}

.okg-tongits-guide-type-content{
    padding:20px;
}

.okg-tongits-guide-type-tag{
    display:inline-block;
    margin-bottom:10px;
    color:var(--otg-brand);
    font-size:12px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.okg-tongits-guide-type-content h3{
    margin:0 0 8px;
    color:var(--otg-title);
    font-size:21px;
    font-weight:900;
    line-height:1.25;
}

.okg-tongits-guide-type-content p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}

.okg-tongits-guide-type-list{
    margin:14px 0 0;
    padding:12px 0 0 18px;
    border-top:1px solid var(--otg-border);
}

.okg-tongits-guide-type-list li{
    margin:0 0 5px;
    color:var(--otg-text);
    font-size:13px;
    line-height:1.5;
}

.okg-tongits-guide-type-list li:last-child{
    margin-bottom:0;
}

.okg-tongits-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:20px;
}

.okg-tongits-carousel-button{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--otg-brand);
    border-radius:10px;
    background:#FFFFFF;
    color:var(--otg-brand);
    font-size:28px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.okg-tongits-carousel-button:hover{
    transform:translateY(-2px);
    background:var(--otg-brand);
    color:#FFFFFF;
    box-shadow:0 8px 18px rgba(5,100,200,.18);
}

.okg-tongits-carousel-button:focus-visible{
    outline:3px solid rgba(5,100,200,.25);
    outline-offset:3px;
}

.okg-tongits-carousel-status{
    min-width:68px;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 14px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:var(--otg-brand-light);
    color:var(--otg-brand-dark);
    font-size:14px;
    font-weight:850;
}


/* =========================================================
Beginner Selection Checklist
========================================================= */

.okg-tongits-guide-checklist{
    margin-top:20px;
    padding:20px;
    border:1px solid var(--otg-border-strong);
    border-radius:10px;
    background:var(--otg-brand-light);
}

.okg-tongits-guide-checklist-heading{
    margin-bottom:16px;
    text-align:center;
}

.okg-tongits-guide-checklist-heading h3{
    margin:0 0 7px;
    color:var(--otg-title);
    font-size:23px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-checklist-heading p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}

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

.okg-tongits-guide-checklist-item{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid rgba(169,203,239,.8);
    border-radius:10px;
    background:rgba(255,255,255,.88);
}

.okg-tongits-guide-checklist-item span{
    flex:0 0 24px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:12px;
    font-weight:900;
}

.okg-tongits-guide-checklist-item p{
    margin:1px 0 0;
    color:var(--otg-title);
    font-size:14px;
    font-weight:750;
    line-height:1.5;
}


/* =========================================================
Beginner Mistakes
========================================================= */

.okg-tongits-guide-mistakes-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.okg-tongits-guide-mistake-card{
    min-width:0;
    padding:20px;
    border:1px solid var(--otg-danger-border);
    border-radius:10px;
    background:var(--otg-danger-light);
}

.okg-tongits-guide-mistake-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--otg-danger);
    color:#FFFFFF;
    font-size:17px;
    font-weight:900;
}

.okg-tongits-guide-mistake-card h3{
    margin:0 0 8px;
    color:var(--otg-danger-dark);
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-mistake-card > p{
    margin:0;
    color:#754750;
    font-size:14px;
    line-height:1.65;
}

.okg-tongits-guide-mistake-fix{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed #DEA3AB;
}

.okg-tongits-guide-mistake-fix strong{
    display:block;
    margin-bottom:4px;
    color:#A12F3D;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.okg-tongits-guide-mistake-fix p{
    margin:0;
    color:#754750;
    font-size:13px;
    line-height:1.55;
}


/* =========================================================
Responsible Tongits Tips
========================================================= */

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

.okg-tongits-guide-responsible-card{
    min-width:0;
    padding:20px;
    border:1px solid var(--otg-success-border);
    border-radius:10px;
    background:var(--otg-success-light);
}

.okg-tongits-guide-responsible-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:10px;
    background:var(--otg-success);
    color:#FFFFFF;
    font-size:18px;
    font-weight:900;
}

.okg-tongits-guide-responsible-card h3{
    margin:0 0 8px;
    color:#12613F;
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-responsible-card p{
    margin:0;
    color:#346B55;
    font-size:14px;
    line-height:1.65;
}


/* =========================================================
Pause Review Decide
========================================================= */

.okg-tongits-guide-framework{
    padding:20px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:
        linear-gradient(
            135deg,
            #F5FAFF,
            #E7F3FF
        );
}

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

.okg-tongits-guide-framework-heading h3{
    margin:0 0 8px;
    color:var(--otg-title);
    font-size:26px;
    font-weight:900;
    line-height:1.25;
}

.okg-tongits-guide-framework-heading p{
    margin:0;
    color:var(--otg-text);
    font-size:15px;
    line-height:1.65;
}

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

.okg-tongits-guide-framework-card{
    min-width:0;
    padding:20px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
    text-align:center;
}

.okg-tongits-guide-framework-number{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    border-radius:50%;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:15px;
    font-weight:900;
}

.okg-tongits-guide-framework-card h4{
    margin:0 0 7px;
    color:var(--otg-title);
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-framework-card p{
    margin:0;
    color:var(--otg-text);
    font-size:14px;
    line-height:1.65;
}


/* =========================================================
Quick Reference
========================================================= */

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

.okg-tongits-guide-reference-card{
    min-width:0;
    padding:20px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
}

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

.okg-tongits-guide-reference-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:16px;
    font-weight:900;
}

.okg-tongits-guide-reference-category{
    color:var(--otg-brand);
    font-size:11px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.4px;
    text-align:right;
    text-transform:uppercase;
}

.okg-tongits-guide-reference-card h3{
    margin:0 0 10px;
    color:var(--otg-title);
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-reference-list{
    margin:0;
    padding-left:18px;
}

.okg-tongits-guide-reference-list li{
    margin:0 0 6px;
    color:var(--otg-text);
    font-size:13px;
    line-height:1.5;
}

.okg-tongits-guide-reference-list li:last-child{
    margin-bottom:0;
}


/* =========================================================
Before You Play Checklist
========================================================= */

.okg-tongits-guide-final-check{
    display:grid;
    grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
    gap:20px;
    padding:20px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:var(--otg-surface);
}

.okg-tongits-guide-final-check-content h3{
    margin:14px 0 8px;
    color:var(--otg-title);
    font-size:25px;
    font-weight:900;
    line-height:1.25;
}

.okg-tongits-guide-final-check-content p{
    margin:0;
    color:var(--otg-text);
    font-size:15px;
    line-height:1.7;
}

.okg-tongits-guide-final-check-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.okg-tongits-guide-final-check-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--otg-border);
    border-radius:10px;
    background:#FFFFFF;
}

.okg-tongits-guide-final-check-item span{
    flex:0 0 30px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--otg-brand);
    color:#FFFFFF;
    font-size:11px;
    font-weight:900;
}

.okg-tongits-guide-final-check-item p{
    margin:0;
    color:var(--otg-title);
    font-size:13px;
    font-weight:750;
    line-height:1.45;
}


/* CTA */

.okg-tongits-guide-cta-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.okg-tongits-guide-cta-content p{

    margin:20px 0 30px;

    font-size:17px;
    line-height:1.9;

    color:#5A7398;

}

.okg-tongits-guide-cta-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

}

@media(max-width:991px){

.okg-tongits-guide-cta-buttons{

    justify-content:center;

}

}

/* =========================================================
Disclaimer
========================================================= */

.okg-tongits-guide-disclaimer{
    padding:20px;
    border:1px solid var(--otg-warning-border);
    background:var(--otg-warning-light);
}

.okg-tongits-guide-disclaimer-box{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.okg-tongits-guide-disclaimer-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--otg-warning);
    color:#FFFFFF;
    font-size:18px;
    font-weight:900;
}

.okg-tongits-guide-disclaimer-content{
    min-width:0;
}

.okg-tongits-guide-disclaimer-content h2{
    margin:0 0 8px;
    color:#754B00;
    font-size:20px;
    font-weight:900;
    line-height:1.3;
}

.okg-tongits-guide-disclaimer-content p{
    margin:0 0 8px;
    color:#735A2A;
    font-size:13px;
    line-height:1.65;
}

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


/* =========================================================
Tablet
========================================================= */

@media (max-width:1024px){

    .okg-tongits-guide-split{
        grid-template-columns:minmax(0,1fr) minmax(340px,.86fr);
    }

    .okg-tongits-guide-hero-title{
        font-size:54px;
    }

    .okg-tongits-guide-overview-v2
    .okg-tongits-guide-overview-grid{
        grid-template-columns:1fr;
    }

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

    .okg-tongits-carousel-slide{
        flex-basis:calc((100% - 20px) / 2);
    }

    .okg-tongits-guide-cta-wrap{
        grid-template-columns:minmax(0,1fr) minmax(310px,.8fr);
    }

}


/* =========================================================
Mobile
========================================================= */

@media (max-width:767px){

    .okg-tongits-guide-section,
    .okg-tongits-guide-hero,
    .okg-tongits-guide-disclaimer{
        padding:15px;
    }

    .okg-tongits-guide-heading{
        margin-bottom:15px;
    }

    .okg-tongits-guide-section-top,
    .okg-tongits-guide-hero-top{
        margin-bottom:15px;
    }

    .okg-tongits-guide-title{
        font-size:29px;
    }

    .okg-tongits-guide-title-left{
        text-align:left;
    }

    .okg-tongits-guide-description,
    .okg-tongits-guide-full-intro p{
        font-size:15px;
        line-height:1.7;
    }

    .okg-tongits-guide-hero-title{
        margin-top:14px;
        font-size:36px;
        line-height:1.08;
        letter-spacing:-.7px;
    }

    .okg-tongits-guide-split,
    .okg-tongits-guide-final-check,
    .okg-tongits-guide-cta-wrap{
        grid-template-columns:1fr;
    }

    .okg-tongits-guide-split{
        gap:15px;
    }

    .okg-tongits-guide-hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .okg-tongits-guide-hero-points,
    .okg-tongits-guide-overview-v2
    .okg-tongits-guide-overview-grid,
    .okg-tongits-guide-summary-grid,
    .okg-tongits-guide-terms-grid,
    .okg-tongits-guide-steps-grid,
    .okg-tongits-guide-checklist-grid,
    .okg-tongits-guide-mistakes-grid,
    .okg-tongits-guide-responsible-grid,
    .okg-tongits-guide-framework-grid,
    .okg-tongits-guide-reference-grid,
    .okg-tongits-guide-final-check-grid,
    .okg-tongits-guide-faq-grid,
    .okg-tongits-guide-cta-points{
        grid-template-columns:1fr;
    }

    .okg-tongits-guide-landscape-media{
        aspect-ratio:16 / 9;
    }

    .okg-tongits-guide-landscape-media::before{
        display:none;
    }

    .okg-tongits-guide-landscape-media img{
        position:static;
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }

    .okg-tongits-guide-summary-grid{
        gap:10px;
        margin-top:15px;
    }

    .okg-tongits-guide-notice{
        margin-top:15px;
        padding:15px;
    }

    .okg-tongits-carousel-track{
        gap:15px;
    }

    .okg-tongits-carousel-slide{
        flex-basis:100%;
    }

    .okg-tongits-carousel-controls{
        margin-top:15px;
    }

    .okg-tongits-carousel-button{
        width:40px;
        height:40px;
    }

    .okg-tongits-guide-term-card,
    .okg-tongits-guide-step-card,
    .okg-tongits-guide-type-content,
    .okg-tongits-guide-summary-card,
    .okg-tongits-guide-mistake-card,
    .okg-tongits-guide-responsible-card,
    .okg-tongits-guide-reference-card{
        padding:16px;
    }

    .okg-tongits-guide-checklist,
    .okg-tongits-guide-framework,
    .okg-tongits-guide-final-check{
        padding:16px;
    }

    .okg-tongits-guide-cta-content{
        padding:20px 15px;
    }

    .okg-tongits-guide-cta-media{
        aspect-ratio:16 / 9;
    }

    .okg-tongits-guide-cta-media::before{
        display:none;
    }

    .okg-tongits-guide-cta-media img{
        position:static;
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }

}


/* =========================================================
Small Mobile
========================================================= */

@media (max-width:480px){

    .okg-tongits-guide-hero-buttons,
    .okg-tongits-guide-buttons{
        display:grid;
        grid-template-columns:1fr;
    }

    .okg-tongits-guide-button{
        width:100%;
    }

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

    .okg-tongits-guide-label{
        font-size:11px;
    }

    .okg-tongits-guide-notice,
    .okg-tongits-guide-faq-note,
    .okg-tongits-guide-disclaimer-box{
        gap:10px;
    }

}


/* =========================================================
Reduced Motion
========================================================= */

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

    .okg-tongits-guide-button,
    .okg-tongits-guide-overview-card,
    .okg-tongits-guide-term-card,
    .okg-tongits-guide-type-card,
    .okg-tongits-guide-type-image img,
    .okg-tongits-carousel-track,
    .okg-tongits-carousel-button,
    .okg-tongits-guide-faq-toggle{
        transition:none;
    }

}