/* ============================================================================
   HELP — /help index + article pages (lab layout)
   ============================================================================ */

/* Mode cards (explain vs handle) */
.help-mode-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.help-mode-grid .lab-card{display:flex;flex-direction:column;gap:.35rem;min-height:100%}
.help-mode-grid .lab-card p{margin:0;flex:1 1 auto}
@media(max-width:720px){
    .help-mode-grid{grid-template-columns:1fr}
}

/* Guide cards on the index */
.help-guide-card .svc-card-body{gap:.55rem}
.help-guide-card .help-guide-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.25rem;
    height:2.25rem;
    border-radius:10px;
    background:var(--blue-a20);
    color:var(--blue);
    font-size:1rem;
}
.help-guide-card .help-guide-eyebrow{
    margin:0;
    font-family:var(--font-data);
    font-size:.68rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--blue);
}
.help-guide-card .svc-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Article hero */
.help-article-hero{
    position:relative;
    overflow:hidden;
    background:var(--bg);
}
.help-article-hero-inner{
    position:relative;
    z-index:1;
    padding-top:clamp(56px,8vw,96px);
    padding-bottom:clamp(36px,5vw,64px);
    max-width:48rem;
}
.help-article-hero .blog-crumb{margin-bottom:1.1rem}
.help-article-hero .eyebrow{margin-bottom:1rem}
.help-article-title{
    margin:0 0 1.1rem;
    font-family:var(--font-display);
    font-size:clamp(1.85rem,4.2vw,2.85rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
    color:var(--white);
    max-width:22ch;
}
.help-article-lede{
    margin:0;
    max-width:48ch;
    font-size:clamp(1.05rem,1.4vw,1.18rem);
    font-weight:300;
    line-height:1.7;
    color:var(--gray);
}

/* Short-version panel */
.help-short{
    margin:0 0 1.75rem;
    padding:1.35rem 1.5rem;
    border-radius:16px;
    background:var(--bg-2);
    border:1px solid var(--gray-line);
    border-left:3px solid var(--blue);
}
.help-short-label{
    margin:0 0 .55rem;
    font-family:var(--font-data);
    font-size:.68rem;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--blue);
}
.help-short-answer{
    margin:0 0 .85rem;
    color:var(--white);
    font-size:1.02rem;
    line-height:1.65;
    max-width:52ch;
}
.help-short-direct{
    margin:0;
    color:var(--gray);
    font-size:.95rem;
    line-height:1.6;
    max-width:52ch;
}
.help-short-direct a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-a20)}
.help-short-direct a:hover{border-bottom-color:var(--blue)}

/* Article body panels */
.help-article-section{padding-top:clamp(28px,4vw,48px)}
.help-article-body{max-width:48rem}
.help-panel{
    margin:0 0 1.1rem;
    padding:1.35rem 1.5rem;
    border-radius:16px;
    background:var(--bg-2);
    border:1px solid var(--gray-line);
}
.help-panel-title{
    margin:0 0 .75rem;
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.15rem;
    color:var(--white);
}
.help-panel-copy{
    margin:0 0 .85rem;
    color:var(--gray);
    font-size:.98rem;
    line-height:1.7;
    max-width:56ch;
}
.help-panel-copy:last-child{margin-bottom:0}
.help-bullets{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.55rem;
}
.help-bullets li{
    position:relative;
    padding-left:1.35rem;
    color:var(--gray);
    font-size:.95rem;
    line-height:1.55;
}
.help-bullets li::before{
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue-a20);
    border:1px solid var(--blue);
}

.help-related{margin-top:1.75rem}
.help-related-label{
    margin:0 0 .65rem;
    font-family:var(--font-data);
    font-size:.68rem;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--blue);
}
.help-related-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.help-related-links a{
    display:inline-flex;
    align-items:center;
    padding:.55rem .9rem;
    border-radius:999px;
    border:1px solid var(--gray-line);
    background:var(--bg-2);
    color:var(--white);
    text-decoration:none;
    font-size:.88rem;
    transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.help-related-links a:hover{
    border-color:var(--blue-a20);
    transform:translateY(-1px);
}

/* Related guides strip on article pages */
.help-more-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.help-more-grid--quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){
    .help-more-grid--quad{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
    .help-more-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
    .help-more-grid,
    .help-more-grid--quad{grid-template-columns:1fr}
}
.help-more-card{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    min-width:0;
    padding:22px;
    border-radius:16px;
    background:var(--bg-2);
    border:1px solid var(--gray-line);
    text-decoration:none;
    color:inherit;
    transition:transform .45s var(--ease-spring),border-color .3s var(--ease);
}
@media(hover:hover){
    .help-more-card:hover{transform:translateY(-3px);border-color:var(--blue-a20)}
}
.help-more-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.help-more-card strong{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.02rem;
    color:var(--white);
}
.help-more-card span{
    font-size:.88rem;
    color:var(--gray);
    line-height:1.5;
}
.help-all-link{
    display:inline-block;
    margin-top:1.5rem;
    color:var(--blue);
    font-weight:600;
    text-decoration:none;
}
.help-all-link:hover{text-decoration:underline}