/* ===========================
   WHY BAOIAM STAND OUT
   =========================== */

.standout-section{
    width:100%;
    background:#ffffff;
    padding:var(--space-section) 20px;
}

.standout-container{
    max-width:1280px;
    width:100%;
    margin:auto;
}

/* Header */

.standout-header{
    text-align:center;
    width:100%;
    margin-bottom:var(--space-block);
}

.standout-header h1{
    /* Slightly under --fs-section. The rewritten heading is a full question —
       "A Course Can Teach You. But Who Helps You After That?" — which needs
       ~990px at the shared 35px, more than this section's 950px container, so
       it broke and left "That?" alone on a second line. This keeps it to one.
       balance is the safety net: if a narrower viewport does force a wrap, the
       two lines come out even instead of orphaning the last word. */
    font-size:var(--fs-section);
    text-wrap:balance;
    font-weight:800;
    color:var(--ink);
    letter-spacing:-0.5px;
    /* The -0.5px letter-spacing above pulls the whole line in, which closes
       the word gaps along with it. This opens the gaps back up without
       loosening the letters themselves. em so it tracks the fluid size. */
    word-spacing:.09em;
    margin-bottom:15px;
}

.standout-highlight{
    color:#FF6F00;
}

.standout-header p{
    /* A step under --fs-lead. At 880px/16px the two lines came out almost
       the same length; opening the measure to the full container and easing
       the size lets the first line hold more, so the second is clearly the
       shorter of the two. */
    font-size:var(--fs-lead);
    color:var(--ink-500);
    font-weight:400;
    max-width:100%;
    margin:auto;
    line-height:1.55;
    word-spacing:.07em;
    /* Plain wrapping fills the first line to the measure and leaves the
       remainder on the second, so the block tapers. */
    text-wrap:normal;
}

/* Table */

/* The whole comparison table sits inside one white card. The section
   background is already white, so the card is read from its border, radius
   and soft shadow rather than from a colour change — the grey columns inside
   supply the contrast. */

.standout-table-container{
    display:grid;
    grid-template-columns:4.5fr 1.8fr 1.8fr;
    gap:22px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:var(--shadow-soft);
}

.standout-column{
    background:#F7F7F7;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.standout-col-header{
    background:#DBDBDB;
    color:#000;
    font-size:22px;
    font-weight:700;
    text-align:center;
    padding:16px;
}

.standout-cell{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    font-size:15px;
    font-weight:500;
    color:#000;
}

.standout-text-left{
    justify-content:flex-start;
    padding-left:24px;
}

.standout-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    font-size:14px;
    font-weight:bold;
}

.standout-check{
    background:#4CAF50;
    color:#fff;
}

.standout-cross{
    background:#F44336;
    color:#fff;
    font-size:12px;
}

/* Responsive */

@media(max-width:768px){

.standout-section{
    padding:var(--space-section) 15px;
}

.standout-header h1{
    font-size:30px;
}

.standout-header p{
    font-size:15px;
}

.standout-table-container{
    grid-template-columns:1fr;
    gap:16px;
    /* Card padding eases off on phones so the columns keep their width. */
    padding:14px;
    border-radius:var(--radius-md);
}

.standout-text-left{
    justify-content:center;
    text-align:center;
    padding-left:15px;
}

.standout-col-header{
    font-size:18px;
    padding:12px;
}

}