/* ============================================================
   Documentation page (/docs)
   All selectors scoped under .mg-site. Loaded after site.css
   and site-pages.css. Brand tokens (--blue, --ink, --muted,
   --paper) come from site.css :root on .mg-site.
   ============================================================ */

.mg-site .docs{--docs-border:#e8ecf1;--docs-paper:#f7f8fa;--docs-blue-soft:#eaf2ff}

/* ---------- Hero ---------- */
.mg-site .docs-hero{
    text-align:center;
    padding:150px max(7vw,24px) 30px;
    background:linear-gradient(180deg,#ffffff,#eef4ff);
}
.mg-site .docs-hero .label{margin:0 auto}
.mg-site .docs-hero h1{
    font-size:clamp(38px,5.2vw,68px);
    line-height:1.02;
    letter-spacing:-.045em;
    font-weight:600;
    margin:18px auto 16px;
    max-width:820px;
    text-wrap:balance;
}
.mg-site .docs-lead{
    font-size:18px;
    line-height:1.65;
    color:#5c6774;
    max-width:640px;
    margin:0 auto;
}
.mg-site .docs-lead strong{color:var(--ink);font-weight:600}

/* ---------- Tabs ---------- */
.mg-site .docs-tabs{
    display:inline-flex;
    gap:8px;
    margin:34px auto 0;
    padding:6px;
    border:1px solid var(--docs-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 34px rgba(20,50,100,.07);
    flex-wrap:wrap;
    justify-content:center;
}
.mg-site .docs-tab{
    display:inline-flex;
    align-items:center;
    gap:9px;
    height:50px;
    padding:0 22px;
    border:1px solid transparent;
    border-radius:13px;
    background:transparent;
    color:#5c6774;
    font:inherit;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .22s,color .22s,box-shadow .22s;
}
.mg-site .docs-tab:hover{color:var(--ink);background:var(--docs-paper)}
.mg-site .docs-tab.active{
    background:var(--blue);
    color:#fff;
    box-shadow:0 12px 26px rgba(20,104,243,.28);
}
.mg-site .docs-tab-ic{display:inline-flex}
.mg-site .docs-tab-ic svg{width:18px;height:18px}

/* ---------- Layout wrap ---------- */
.mg-site .docs-wrap{max-width:1120px;margin:0 auto;padding:44px max(7vw,24px) 40px}
.mg-site .docs-panel{display:flex;flex-direction:column;gap:26px}

/* ---------- Cards ---------- */
.mg-site .docs-card{
    background:#fff;
    border:1px solid var(--docs-border);
    border-radius:20px;
    padding:clamp(22px,3vw,36px);
    box-shadow:0 12px 36px rgba(20,50,100,.05);
}
.mg-site .docs-card-head{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:26px;
}
.mg-site .docs-card-ic{
    flex-shrink:0;
    width:52px;height:52px;
    display:grid;place-items:center;
    border-radius:15px;
    background:linear-gradient(140deg,#e3efff,#d3e5ff);
    color:var(--blue);
}
.mg-site .docs-card-ic svg{width:26px;height:26px}
.mg-site .docs-card-head>div{flex:1;min-width:0}
.mg-site .docs-card-head h2{
    font-size:clamp(21px,2.4vw,27px);
    letter-spacing:-.03em;
    font-weight:600;
    margin:2px 0 5px;
}
.mg-site .docs-card-head p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;max-width:560px}
.mg-site .docs-pill{
    flex-shrink:0;
    align-self:center;
    padding:7px 13px;
    border-radius:999px;
    background:var(--docs-blue-soft);
    color:var(--blue);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

/* ---------- Feature grid (3 up) ---------- */
.mg-site .docs-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:6px;
}
.mg-site .docs-feature{
    padding:22px;
    border:1px solid var(--docs-border);
    border-radius:16px;
    background:linear-gradient(180deg,#fbfdff,#f5f9ff);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.mg-site .docs-feature:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,50,100,.09)}
.mg-site .docs-feature-ic{
    display:grid;place-items:center;
    width:42px;height:42px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--docs-border);
    color:var(--blue);
    margin-bottom:14px;
}
.mg-site .docs-feature-ic svg{width:21px;height:21px}
.mg-site .docs-feature h3{font-size:16px;letter-spacing:-.02em;font-weight:600;margin:0 0 7px}
.mg-site .docs-feature p{font-size:13.5px;line-height:1.58;color:var(--muted);margin:0}

/* ---------- Two column blocks ---------- */
.mg-site .docs-two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,4vw,56px);
    margin-top:30px;
    padding-top:30px;
    border-top:1px solid var(--docs-border);
}
.mg-site .docs-sub{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}

/* ---------- Checklist ---------- */
.mg-site .docs-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.mg-site .docs-check li{
    display:flex;
    gap:11px;
    font-size:14px;
    line-height:1.5;
    color:#41505f;
}
.mg-site .docs-check-ic{flex-shrink:0;color:var(--blue);display:inline-flex;margin-top:1px}
.mg-site .docs-check-ic svg{width:19px;height:19px}

/* ---------- Numbered steps ---------- */
.mg-site .docs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.mg-site .docs-steps li{display:flex;gap:14px}
.mg-site .docs-steps li>div{font-size:14px;line-height:1.55;color:#51606f;padding-top:3px}
.mg-site .docs-steps strong{color:var(--ink);font-weight:600}
.mg-site .docs-step-n{
    flex-shrink:0;
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-size:13px;
    font-weight:700;
}

/* ---------- Entity grid ---------- */
.mg-site .docs-entity-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.mg-site .docs-entity{
    position:relative;
    padding:20px;
    border:1px solid var(--docs-border);
    border-radius:16px;
    background:linear-gradient(160deg,#ffffff,#f4f8ff);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.mg-site .docs-entity:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,50,100,.1);border-color:#d5e3f5}
.mg-site .docs-entity-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.mg-site .docs-entity-ic{
    display:grid;place-items:center;
    width:38px;height:38px;
    border-radius:11px;
    background:var(--docs-blue-soft);
    color:var(--blue);
    flex-shrink:0;
}
.mg-site .docs-entity-ic svg{width:19px;height:19px}
.mg-site .docs-entity h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.mg-site .docs-entity p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 13px}
.mg-site .docs-entity-tag{
    position:absolute;
    top:14px;right:14px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.01em;
}

/* ---------- Chips ---------- */
.mg-site .docs-chips{display:flex;flex-wrap:wrap;gap:7px}
.mg-site .docs-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border:1px solid #dbe7f6;
    border-radius:8px;
    background:#fff;
    color:var(--blue);
    font-size:12px;
    font-weight:500;
}
.mg-site .docs-chip i{color:#e0364f;font-style:normal;margin-left:2px}
.mg-site .docs-chips--lg .docs-chip{
    padding:8px 15px;
    border-radius:999px;
    background:var(--docs-blue-soft);
    border-color:#d5e3f5;
    font-size:13px;
    font-weight:600;
}
.mg-site .docs-note{font-size:12.5px;color:var(--muted);margin:18px 0 0}
.mg-site .docs-note i{color:#e0364f;font-style:normal}

/* ---------- Best practices / mistakes ---------- */
.mg-site .docs-advice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mg-site .docs-advice-col{
    padding:24px;
    border-radius:16px;
    border:1px solid var(--docs-border);
}
.mg-site .docs-advice-col--good{background:linear-gradient(170deg,#f2f8ff,#ffffff);border-color:#d8e7f8}
.mg-site .docs-advice-col--bad{background:linear-gradient(170deg,#fff4f5,#ffffff);border-color:#f6dadd}
.mg-site .docs-advice-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mg-site .docs-advice-ic{display:inline-flex}
.mg-site .docs-advice-ic svg{width:20px;height:20px}
.mg-site .docs-advice-col--good .docs-advice-ic{color:var(--blue)}
.mg-site .docs-advice-col--bad .docs-advice-ic{color:#e0364f}
.mg-site .docs-advice-head h3{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0;flex:1}
.mg-site .docs-tag{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600}
.mg-site .docs-tag--good{background:var(--docs-blue-soft);color:var(--blue)}
.mg-site .docs-tag--bad{background:#fde3e6;color:#c62a41}
.mg-site .docs-advice-group{margin-bottom:16px}
.mg-site .docs-advice-group:last-child{margin-bottom:0}
.mg-site .docs-advice-group h4{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 7px}
.mg-site .docs-advice-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mg-site .docs-advice-group li{
    position:relative;
    padding-left:16px;
    font-size:13px;
    line-height:1.5;
    color:#51606f;
}
.mg-site .docs-advice-group li::before{
    content:"";
    position:absolute;
    left:0;top:8px;
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
    opacity:.35;
}

/* ---------- Callout ---------- */
.mg-site .docs-callout{
    display:flex;
    gap:15px;
    margin-top:26px;
    padding:24px;
    border-radius:16px;
    border:1px solid #cfe0f8;
    background:linear-gradient(150deg,#eaf2ff,#f7fbff);
}
.mg-site .docs-callout-ic{flex-shrink:0;color:var(--blue);display:inline-flex;margin-top:2px}
.mg-site .docs-callout-ic svg{width:24px;height:24px}
.mg-site .docs-callout h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.mg-site .docs-callout p{font-size:14px;line-height:1.6;color:#4a5968;margin:0 0 14px;max-width:640px}
.mg-site .docs-callout-chips{display:flex;flex-wrap:wrap;gap:16px}
.mg-site .docs-callout-chips span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#41505f}
.mg-site .docs-callout-chips svg{width:16px;height:16px;color:var(--blue)}

/* ---------- API setup steps ---------- */
.mg-site .docs-setup{display:flex;flex-direction:column;gap:16px}
.mg-site .docs-setup-step{
    padding:22px;
    border:1px solid #dce7f5;
    border-radius:16px;
    background:linear-gradient(120deg,#f4f9ff,#ffffff);
}
.mg-site .docs-setup-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mg-site .docs-setup-head h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:0}
.mg-site .docs-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.mg-site .docs-ol li{font-size:14px;line-height:1.55;color:#51606f}
.mg-site .docs-ol strong,.mg-site .docs-setup-p strong{color:var(--ink);font-weight:600}
.mg-site .docs-setup-p{font-size:14px;line-height:1.55;color:#51606f;margin:0 0 14px}
.mg-site .docs-setup-p--muted{color:var(--muted);font-size:13px;margin:14px 0 0}
.mg-site .docs-setup-p code,.mg-site .docs-setup-p--muted code{
    background:#eef3f9;
    border:1px solid #e0e8f1;
    border-radius:6px;
    padding:1px 6px;
    font-size:12.5px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    color:#2a3746;
}

/* ---------- Credentials ---------- */
.mg-site .docs-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mg-site .docs-cred{
    padding:14px 16px;
    border:1px solid #dce7f5;
    border-radius:12px;
    background:#fff;
}
.mg-site .docs-cred-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.mg-site .docs-cred code{
    display:block;
    padding:9px 12px;
    border-radius:8px;
    background:#f4f6f9;
    color:#3a4756;
    font-size:13px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.02em;
    overflow-x:auto;
}

/* ---------- Required info list ---------- */
.mg-site .docs-need{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mg-site .docs-need li{
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px 15px;
    border:1px solid var(--docs-border);
    border-radius:13px;
    background:#fff;
}
.mg-site .docs-need-ic{
    flex-shrink:0;
    display:grid;place-items:center;
    width:38px;height:38px;
    border-radius:11px;
    background:var(--docs-blue-soft);
    color:var(--blue);
}
.mg-site .docs-need-ic svg{width:19px;height:19px}
.mg-site .docs-need strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.mg-site .docs-need em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .mg-site .docs-feature-grid{grid-template-columns:1fr 1fr}
    .mg-site .docs-entity-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
    .mg-site .docs-hero{padding-top:130px}
    .mg-site .docs-two-col{grid-template-columns:1fr;gap:28px}
    .mg-site .docs-advice{grid-template-columns:1fr}
    .mg-site .docs-cred-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
    .mg-site .docs-feature-grid{grid-template-columns:1fr}
    .mg-site .docs-entity-grid{grid-template-columns:1fr}
    .mg-site .docs-card-head{flex-wrap:wrap}
    .mg-site .docs-pill{align-self:flex-start}
    .mg-site .docs-tab{flex:1;justify-content:center}
}