/* ==========================================================================
   SCALE DOCS — Claude Design 13a (desktop 1440) / 13b (components) / 13c (390)
   One stylesheet for every Doc. Content is per-article; none of this is.
   Loads after scale-site-header.css, which owns the header itself.
   ========================================================================== */

.scale-docs{
    margin:0;
    background:#fff;
    color:#0E1424;
    font-family:"Instrument Sans","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.scale-docs *{box-sizing:border-box}
.scale-docs img{max-width:100%;height:auto}
/* Links inherit by default ON PURPOSE, and via :where() so the base rule has
   ZERO specificity. A plain `.scale-docs a{…}` is (0,1,1) and quietly outranks
   every single-class component rule below — it repainted the sidebar, the
   prev/next cards and the white-on-pink buttons. Prose links are coloured
   explicitly instead, right underneath. */
:where(.scale-docs a){color:inherit;text-decoration:none}
.sdx-p a,.sdx-ul a,.sdx-ol a,.sdx-cap a,.sdx-quote a,.sdx-table a,
.sdx-step__p a,.sdx-faq__p a,.sdx-exp__p a,.sdx-call a,.sd-index__empty a{
    color:#C42A63;text-decoration:underline;text-underline-offset:2px;
}
.sdx-p a:hover,.sdx-ul a:hover,.sdx-ol a:hover,.sdx-cap a:hover,.sdx-quote a:hover,
.sdx-table a:hover,.sdx-step__p a:hover,.sdx-faq__p a:hover,.sdx-exp__p a:hover,
.sdx-call a:hover,.sd-index__empty a:hover{color:#9E1F4E}
.scale-docs .li{display:inline-flex;flex:none}
.scale-docs .li svg{width:100%;height:100%;display:block}
.sd-dot{width:7px;height:7px;border-radius:50%;background:#1E8F57;flex:none}

/* ---- Docs bar (badge + search + progress rule) ----------------------------- */

/* Offsets are pinned to the shared header's real height: 20px padding + a 36px
   CTA + 1px border = 77px, dropping to 59px once .sh-header__in tightens at
   768px (the same 59px .sh-mobilenav is anchored to). The docs bar itself is
   10px padding + 34px controls + 1px = 55px, so the rails sit at 77+55=132. */
.sd-bar{position:sticky;top:77px;z-index:40;background:#fff;border-bottom:1px solid #F1F3F6}
.sd-bar__in{
    max-width:1440px;margin:0 auto;
    display:flex;align-items:center;gap:12px;
    padding:10px 40px;
}
.sd-bar__badge{
    display:inline-flex;align-items:center;
    padding:2px 8px;border-radius:7px;
    background:#F1F3F6;color:#5A6478;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.sd-bar__spacer{flex:1}
/* "Browse docs" — the MOBILE way into the sidebar, and mobile only: on a wide
   screen the sidebar is already there.
   Every declaration is !important because this is a <button> on an Elementor
   page, and the theme's own button rules are specific enough to win. They did:
   the button turned up at desktop width wearing the site's pink accent, which is
   what the owner saw. Do not soften these — the same applies to .sdx-copy below.
   (Sibling of [shell CSS: every display rule is !important].) */
.sd-navtoggle{
    display:none !important;align-items:center;gap:8px;
    height:34px !important;padding:0 12px !important;
    border:1px solid #E4E7EC !important;border-radius:10px !important;background:#fff !important;
    font:inherit !important;font-size:13px !important;font-weight:600 !important;
    color:#0E1424 !important;cursor:pointer;
    box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important;
}
.sd-navtoggle:hover{border-color:#C9D0DA !important;background:#fff !important;color:#0E1424 !important}
.sd-navtoggle .li{width:14px;height:14px;color:#8A93A5}
.sd-search{
    display:flex;align-items:center;gap:8px;
    width:240px;height:34px;padding:0 12px;
    border:1px solid #E4E7EC;border-radius:10px;background:#FAFBFC;
    transition:border-color .2s ease;
}
.sd-search:hover{border-color:#C9D0DA}
.sd-search:focus-within{border-color:#C42A63;box-shadow:0 0 0 3px rgba(196,42,99,.08)}
.sd-search .li{width:14px;height:14px;color:#8A93A5}
.sd-search input{
    flex:1;min-width:0;height:100%;
    border:none;background:none;outline:none;
    font:inherit;font-size:13px;color:#0E1424;
}
.sd-search input::placeholder{color:#8A93A5}
.sd-kbd{
    font-size:11px;font-weight:600;flex:none;
    background:#fff;border:1px solid #EDEFF3;border-radius:5px;padding:1px 6px;color:#8A93A5;
}
.sd-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:transparent}
.sd-progress i{display:block;height:100%;width:0;background:#C42A63;transition:width .1s linear}

/* ---- Three-column shell ----------------------------------------------------- */

.sd-shell{
    max-width:1440px;margin:0 auto;
    display:grid;grid-template-columns:264px minmax(0,1fr) 236px;
    align-items:start;
}

/* ---- Sidebar ---------------------------------------------------------------- */

.sd-nav{
    position:sticky;top:132px;
    max-height:calc(100vh - 132px);overflow-y:auto;
    border-right:1px solid #F1F3F6;
    padding:28px 20px 40px;
    background:#FCFCFD;
}
.sd-nav__empty{font-size:13px;color:#8A93A5}
.sd-nav__title{
    font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A93A5;
}
.sd-nav__group + .sd-nav__group .sd-nav__title{margin-top:24px}
.sd-nav__items{display:flex;flex-direction:column;gap:1px;margin-top:12px}
.sd-nav__link{
    display:flex;align-items:center;gap:9px;
    padding:7px 10px;border-radius:9px;
    font-size:13.5px;color:#5A6478;
    transition:background .15s ease,color .15s ease;
}
.sd-nav__link .li{width:14px;height:14px;color:#A9B1C2}
.sd-nav__link:hover{background:#F1F3F6;color:#0E1424}
.sd-nav__link:hover .li{color:#5A6478}
.sd-nav__link.is-active{font-weight:600;color:#C42A63;background:#FBF1F5}
.sd-nav__link.is-active .li{color:#C42A63}
.sd-nav__sub{
    display:flex;flex-direction:column;gap:1px;
    margin:2px 0 2px 23px;padding-left:11px;
    border-left:1px solid #EDEFF3;
}
.sd-nav__sub a{
    padding:5px 9px;border-radius:8px;
    font-size:12.5px;color:#8A93A5;
    transition:color .15s ease;
}
.sd-nav__sub a:hover{color:#0E1424}
.sd-nav__sub a.is-active{font-weight:600;color:#C42A63}
/* A sub-category inside a category — "Integrations" holding "WhatsApp" and
   "Google". One level only, and it borrows the rail the active article's
   headings already use, so the sidebar gains a shelf without gaining a look. */
.sd-nav__kid{margin-top:12px;padding-inline-start:11px;border-inline-start:1px solid #EDEFF3}
/* Deliberately NOT the uppercase eyebrow the parent wears: two levels that look
   the same are two levels you have to read twice to tell apart. The category is
   the eyebrow, the sub-category is a name — and a name is how "WhatsApp" and
   "Google" are actually written. */
.sd-nav__kidt{font-size:12px;font-weight:600;color:#5A6478;padding:0 10px}
.sd-nav__kid .sd-nav__items{margin-top:6px}
.sd-nav__status{margin-top:28px;padding:16px;border:1px solid #EDEFF3;border-radius:14px;background:#fff}
.sd-nav__statusrow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}

/* ---- Content ---------------------------------------------------------------- */

.sd-main{min-width:0;padding:36px 48px 0}

.sd-crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A93A5;flex-wrap:wrap}
.sd-crumbs a{color:#8A93A5}
.sd-crumbs a:hover{color:#0E1424}
.sd-crumbs .li{width:13px;height:13px}
.sd-crumbs__here{color:#0E1424;font-weight:500}

.sd-tags{display:flex;align-items:center;gap:9px;margin-top:22px;flex-wrap:wrap}
.sd-tag{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:999px;
    font-size:11px;font-weight:600;
}
.sd-tag--cat{background:#FBF1F5;color:#C42A63;letter-spacing:.05em;text-transform:uppercase}
.sd-tag--badge{background:#EAF1FB;color:#2A63B8}

.sd-h1{margin:16px 0 0;font-size:42px;line-height:1.1;font-weight:600;letter-spacing:-.035em}
.sd-lede{margin:16px 0 0;max-width:720px;font-size:17.5px;line-height:1.7;color:#5A6478;text-wrap:pretty}

.sd-meta{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    margin-top:22px;padding:14px 18px;
    border:1px solid #EDEFF3;border-radius:14px;background:#FAFBFC;
}
.sd-meta__author{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5A6478}
.sd-meta__author strong{font-weight:600;color:#0E1424}
.sd-avatar{
    width:26px;height:26px;border-radius:50%;
    background:#EAF1FB;color:#2A63B8;
    display:flex;align-items:center;justify-content:center;
    font-size:10.5px;font-weight:700;
}
.sd-meta__sep{width:1px;height:18px;background:#EDEFF3}
.sd-meta__i{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#5A6478}
.sd-meta__i .li{width:13px;height:13px;color:#8A93A5}

.sd-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.sd-fact{border:1px solid #EDEFF3;border-radius:14px;padding:14px 16px;background:#fff}
.sd-fact__l{
    display:flex;align-items:center;gap:7px;
    font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A93A5;
}
.sd-fact__l .li{width:12px;height:12px}
.sd-fact__v{margin-top:8px;font-size:15.5px;font-weight:600}

/* ---- Article body (rendered sections) --------------------------------------- */

.sd-article{padding-bottom:8px}
.sdx-h2{margin:52px 0 0;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.2;scroll-margin-top:150px}
.sdx-h3{margin:34px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em;scroll-margin-top:150px}
.sdx-p{margin:14px 0 0;font-size:16.5px;line-height:1.75;color:#374151;text-wrap:pretty}
.sdx-code{
    font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.86em;background:#F7F8FA;border:1px solid #EDEFF3;border-radius:6px;
    padding:1px 6px;color:#C42A63;
}
/* The other two inline marks the writer's toolbar can apply. Both stay inside
   the palette the design already uses — the brand cream for a highlight, and
   the same 2px underline offset the design's links have — so formatting a word
   can never introduce a colour or a weight of its own. */
.sdx-mark{background:#FBF1F5;color:inherit;border-radius:4px;padding:0 3px}
.sdx-u{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* Divider: the design's own hairline, the one it puts between bands. */
.sdx-hr{
    margin:34px 0 0;border:0;border-top:1px solid #F1F3F6;
}

.sdx-ul,.sdx-ol{margin:14px 0 0;padding-left:22px;font-size:16.5px;line-height:1.75;color:#374151}
.sdx-ul li,.sdx-ol li{margin-top:7px}
.sdx-ul{list-style:disc}
.sdx-ol{list-style:decimal}

/* Figures: plain image and browser-framed screenshot */
.sdx-fig{margin:20px 0 0}
/* A screenshot printed at the full width of the column is bigger than the
   heading above it and reads as the subject of the page; in the design the
   pictures illustrate the prose. 60% of the column keeps a dialog legible
   without letting it take the screen. The video embed keeps the full width —
   it is the only figure people actually look INTO. */
.sdx-fig--pic{max-width:60%}
.sdx-img{border:1px solid #E6E9EF;border-radius:16px;overflow:hidden;background:#fff}
.sdx-img img{display:block;width:100%}
.sdx-shot{
    border:1px solid #E6E9EF;border-radius:16px;overflow:hidden;background:#fff;
    box-shadow:0 16px 40px rgba(14,20,36,.07);
}
.sdx-shot__bar{
    display:flex;align-items:center;gap:8px;
    padding:9px 14px;background:#FAFBFC;border-bottom:1px solid #EDEFF3;
}
.sdx-shot__bar i{width:8px;height:8px;border-radius:50%;background:#E4E7EC;flex:none}
.sdx-shot__bar span{margin-left:10px;font-size:10.5px;color:#8A93A5}
.sdx-shot__body{background:#F7F8FA}
.sdx-shot__body img{display:block;width:100%}
.sdx-cap{margin-top:10px;font-size:13px;color:#8A93A5}

/* Code block */
.sdx-codewrap{margin:20px 0 0;border:1px solid #E6E9EF;border-radius:16px;overflow:hidden}
.sdx-code__bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:#0E1424}
.sdx-code__label{
    font-size:11.5px;font-weight:600;color:#A9B1C2;
    font-family:'JetBrains Mono',ui-monospace,monospace;
}
.sdx-code__spacer{flex:1}
/* Also a <button> on an Elementor page — see the note on .sd-navtoggle. This one
   sits on the dark code bar, so a theme repaint is even more visible. */
.sdx-copy{
    display:inline-flex;align-items:center;gap:6px;
    height:26px !important;padding:0 10px !important;
    border:none !important;border-radius:8px !important;
    background:rgba(255,255,255,.10) !important;color:#fff !important;
    font:inherit !important;font-size:11.5px !important;font-weight:600 !important;
    cursor:pointer;box-shadow:none !important;text-transform:none !important;
    transition:background .2s ease;
}
.sdx-copy:hover{background:rgba(255,255,255,.18) !important;color:#fff !important}
.sdx-copy.is-done{color:#7FD6A6}
.sdx-copy .li{width:12px;height:12px}
.sdx-pre{
    margin:0;padding:16px 18px;background:#131B2B;overflow-x:auto;
    font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;line-height:1.8;color:#E4E7EC;
}
.sdx-pre code{font:inherit;color:inherit;background:none;padding:0;border:none}

/* Numbered steps */
.sdx-steps{display:flex;flex-direction:column;margin:28px 0 0}
.sdx-step{display:flex;gap:20px}
.sdx-step__rail{display:flex;flex-direction:column;align-items:center;flex:none;width:32px}
.sdx-step__num{
    width:32px;height:32px;border-radius:11px;
    background:#0E1424;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;flex:none;
}
.sdx-step__num.is-last{background:#C42A63}
.sdx-step__rail i{width:1.5px;flex:1;background:#EDEFF3;margin:10px 0}
.sdx-step__body{flex:1;min-width:0;padding-bottom:32px}
.sdx-step.is-last .sdx-step__body{padding-bottom:0}
.sdx-step__t{margin:4px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em;scroll-margin-top:150px}
.sdx-step__p{margin:8px 0 0;font-size:15.5px;line-height:1.75;color:#5A6478;text-wrap:pretty}
/* What the design puts inside a step after its text: the framed screenshot in
   step 1, the warning in step 2, the code block in step 3. Each of those
   components already carries its own top margin, so this only has to hold them
   in the step's column and take the first margin off. */
.sdx-step__extras{margin-top:16px}
.sdx-step__extras > *:first-child,
.sdx-step__extras .sdx-fig,
.sdx-step__extras .sdx-call,
.sdx-step__extras .sdx-codewrap,
.sdx-step__extras .sdx-ul,
.sdx-step__extras .sdx-ol{margin-top:0}
.sdx-step__extras > * + *{margin-top:14px}

/* Callouts */
.sdx-call{display:flex;gap:13px;margin:20px 0 0;padding:16px 18px;border-radius:14px;font-size:14px;line-height:1.7}
.sdx-call .li{width:16px;height:16px;flex:none;margin-top:2px}
.sdx-call strong{font-weight:600}
.sdx-call--info{border:1px solid #CBDDF3;background:#F5F9FE;color:#3F5878}
.sdx-call--info .li{color:#2A63B8}
.sdx-call--info strong{color:#1F4372}
.sdx-call--success{border:1px solid #CDEADB;background:#EAF6EF;color:#146B3C}
.sdx-call--success .li{color:#1E8F57}
.sdx-call--warning{border:1px solid #F5E4CB;background:#FDF3E7;color:#7A4C08}
.sdx-call--warning .li{color:#A9690C}
.sdx-call--danger{border:1px solid #F5D3D5;background:#FDF6F6;color:#8F2229}
.sdx-call--danger .li{color:#C2242F}
.sdx-call--tip{border:1px solid #EFE3EA;background:#FDF6F9;color:#8F2049}
.sdx-call--tip .li{color:#C42A63}

/* Quote */
.sdx-quote{
    margin:20px 0 0;padding:4px 0 4px 20px;
    border-left:3px solid #EFE3EA;
}
.sdx-quote p{margin:0;font-size:17px;line-height:1.7;color:#374151;text-wrap:pretty}
.sdx-quote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:#8A93A5}

/* "Before you start" — the white requirements card, with per-item state.
   Not to be confused with the green outcome checklist below it. */
.sdx-prereq{margin:36px 0 0;border:1px solid #EDEFF3;border-radius:18px;background:#fff;overflow:hidden}
.sdx-prereq__head{
    display:flex;align-items:center;gap:10px;
    padding:16px 22px;
    border-bottom:1px solid #F1F3F6;background:#FAFBFC;
}
.sdx-prereq__ico{
    width:30px;height:30px;flex:none;border-radius:10px;
    background:#fff;border:1px solid #EDEFF3;color:#5A6478;
    display:flex;align-items:center;justify-content:center;
}
.sdx-prereq__ico .li{width:15px;height:15px}
.sdx-prereq__t{flex:1;min-width:0;font-size:15px;font-weight:600}
.sdx-prereq__n{flex:none;font-size:12px;color:#8A93A5}
.sdx-prereq__n b{font-weight:600;color:#5A6478;font-variant-numeric:tabular-nums}
.sdx-prereq__n i{font-style:normal}
.sdx-prereq__short{display:none}
.sdx-prereq__list{display:flex;flex-direction:column;gap:13px;padding:18px 22px}
.sdx-prereq__item{display:flex;align-items:center;gap:11px}
.sdx-prereq__box{
    width:19px;height:19px;flex:none;border-radius:6px;
    border:1.5px solid #D8DDE5;background:#fff;
    display:flex;align-items:center;justify-content:center;
}
.sdx-prereq__box.is-on{background:#1E8F57;border-color:#1E8F57;color:#fff}
.sdx-prereq__box .li{width:12px;height:12px}
.sdx-prereq__txt{font-size:14.5px;color:#374151}
.sdx-prereq__txt.is-off{color:#5A6478}

/* Checklist */
.sdx-checklist{margin:20px 0 0;padding:18px 20px;border:1px solid #CDEADB;border-radius:16px;background:#EAF6EF}
.sdx-checklist__head{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#146B3C}
.sdx-checklist__head .li{width:15px;height:15px;color:#1E8F57}
.sdx-checklist__list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.sdx-checklist__item{display:flex;align-items:center;gap:10px;font-size:14px;color:#146B3C}
.sdx-tick{
    width:17px;height:17px;flex:none;border-radius:6px;
    background:#1E8F57;color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.sdx-tick .li{width:11px;height:11px}

/* FAQ / accordion */
.sdx-faq{margin:20px 0 0;border:1px solid #EDEFF3;border-radius:16px;overflow:hidden}
.sdx-faq__item{border-bottom:1px solid #F1F3F6}
.sdx-faq__item:last-child{border-bottom:none}
.sdx-faq__q{
    display:flex;align-items:center;gap:12px;
    padding:18px 22px;cursor:pointer;list-style:none;
    font-size:15.5px;font-weight:600;
    transition:background .15s ease;
}
.sdx-faq__q::-webkit-details-marker{display:none}
.sdx-faq__q span{flex:1}
.sdx-faq__chev{width:16px;height:16px;color:#A9B1C2;transition:transform .2s ease}
.sdx-faq__item:not([open]) .sdx-faq__q:hover{background:#FAFBFC}
.sdx-faq__item[open] .sdx-faq__chev{transform:rotate(180deg);color:#C42A63}
.sdx-faq__a{padding:0 22px 18px 50px}
.sdx-faq__p{margin:0 0 10px;font-size:14.5px;line-height:1.75;color:#5A6478;text-wrap:pretty}
.sdx-faq__p:last-child{margin-bottom:0}

/* Expandable */
.sdx-exp{margin:14px 0 0;border:1px solid #EDEFF3;border-radius:14px;overflow:hidden;background:#fff}
.sdx-exp__s{
    display:flex;align-items:center;gap:12px;
    padding:15px 18px;cursor:pointer;list-style:none;
    font-size:14.5px;font-weight:600;
}
.sdx-exp__s::-webkit-details-marker{display:none}
.sdx-exp__chev{width:15px;height:15px;color:#A9B1C2;transition:transform .2s ease}
.sdx-exp[open] .sdx-exp__chev{transform:rotate(90deg);color:#C42A63}
.sdx-exp__s:hover{background:#FAFBFC}
.sdx-exp__b{padding:0 18px 16px 45px;border-top:1px solid #F5F6F8}
.sdx-exp__p{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:#5A6478;text-wrap:pretty}

/* Table */
.sdx-tablewrap{margin:20px 0 0;border:1px solid #EDEFF3;border-radius:16px;overflow:auto}
.sdx-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.sdx-table th{
    text-align:left;padding:0 20px;height:44px;
    background:#FAFBFC;border-bottom:1px solid #EDEFF3;
    font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#8A93A5;
    white-space:nowrap;
}
.sdx-table td{padding:0 20px;height:48px;border-bottom:1px solid #F5F6F8;color:#5A6478}
.sdx-table tr:last-child td{border-bottom:none}
.sdx-td--lead{font-weight:600;color:#0E1424}

/* Button */
.sdx-btnrow{margin:20px 0 0}
.sdx-btn{
    display:inline-flex;align-items:center;gap:8px;
    height:44px;padding:0 20px;border-radius:12px;
    font-size:14.5px;font-weight:600;
    transition:background .2s ease,border-color .2s ease;
}
.sdx-btn .li{width:15px;height:15px}
.sdx-btn--primary{background:#C42A63;color:#fff;box-shadow:0 10px 24px rgba(196,42,99,.18)}
.sdx-btn--primary:hover{background:#A82253;color:#fff}
.sdx-btn--ghost{border:1.5px solid #D8DDE5;color:#0E1424}
.sdx-btn--ghost:hover{border-color:#0E1424;color:#0E1424}

/* Google review — the last card in an article, after something worked.
   Nothing new: the tip callout's surface and border, the help card's shape and
   button, the checklist's spacing. It is meant to read as the design's own
   closing note, not as an advert bolted to the end. */
.sdx-review{
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    margin:36px 0 0;padding:22px 24px;
    border:1px solid #EFE3EA;border-radius:16px;background:#FDF6F9;
}
.sdx-review__txt{flex:1;min-width:0}
.sdx-review__stars{display:inline-flex;gap:3px;color:#C42A63}
/* `fill` on the <svg> is an attribute, so this wins — a solid star. They are
   spans: decorative, never a control. */
.sdx-review__stars .li{width:15px;height:15px}
.sdx-review__stars .li svg{fill:currentColor;stroke:none}
.sdx-review__t{margin-top:8px;font-size:15.5px;font-weight:600}
.sdx-review__s{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:#5A6478}
.sdx-review__act{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.sdx-review__note{font-size:12.5px;color:#8A93A5;text-align:right}
.sdx-review__btn{
    display:inline-flex;align-items:center;gap:8px;
    height:42px;padding:0 18px;border-radius:12px;
    background:#C42A63;color:#fff;font-size:14px;font-weight:600;
    transition:background .2s ease;
}
.sdx-review__btn:hover{background:#A82253;color:#fff}
.sdx-review__btn .li{width:14px;height:14px}

/* Video */
.sdx-video{
    position:relative;padding-top:56.25%;
    border:1px solid #E6E9EF;border-radius:16px;overflow:hidden;background:#0E1424;
}
.sdx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Help + prev/next -------------------------------------------------------- */

.sd-help{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:44px;padding:22px 24px;
    border:1px solid #EFE3EA;border-radius:16px;background:#FDF6F9;
}
.sd-help__txt{flex:1;min-width:0}
.sd-help__t{font-size:15.5px;font-weight:600}
.sd-help__s{margin-top:3px;font-size:13.5px;color:#5A6478}
.sd-help__btn{
    display:inline-flex;align-items:center;gap:7px;
    height:42px;padding:0 18px;border-radius:12px;
    background:#C42A63;color:#fff;font-size:14px;font-weight:600;
    transition:background .2s ease;
}
.sd-help__btn:hover{background:#A82253;color:#fff}
.sd-help__btn .li{width:15px;height:15px}

.sd-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;padding-bottom:56px}
.sd-pn__card{
    display:block;border:1px solid #EDEFF3;border-radius:16px;
    padding:18px 20px;background:#fff;color:inherit;
    transition:border-color .2s ease;
}
.sd-pn__card:hover{border-color:#C9D0DA;color:inherit}
.sd-pn__l{display:flex;align-items:center;gap:7px;font-size:12px;color:#8A93A5}
.sd-pn__l .li{width:13px;height:13px}
.sd-pn__t{display:block;margin-top:6px;font-size:15px;font-weight:600}
.sd-pn__card--next{text-align:right}
.sd-pn__card--next .sd-pn__l{justify-content:flex-end}

/* ---- Archive / category index ------------------------------------------------ */

.sd-index{margin-top:28px;padding-bottom:56px}
.sd-index__empty{font-size:15px;color:#5A6478}
.sd-igroup + .sd-igroup{margin-top:32px}
.sd-igroup__t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A93A5}
/* A sub-category on the hub: the same label one step quieter, so "Integrations"
   still reads as the shelf and "WhatsApp" as what is on it. */
.sd-isub{margin-top:22px}
.sd-isub__t{font-size:13px;font-weight:600;color:#0E1424}
.sd-isub .sd-igroup__list{margin-top:12px}
.sd-igroup__list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.sd-icard{
    display:flex;align-items:center;gap:13px;
    border:1px solid #EDEFF3;border-radius:16px;
    padding:18px 20px;background:#fff;color:inherit;
    transition:box-shadow .2s ease,transform .2s ease;
}
.sd-icard:hover{box-shadow:0 16px 40px rgba(14,20,36,.08);transform:translateY(-2px);color:inherit}
.sd-icard__ico{
    width:34px;height:34px;flex:none;border-radius:11px;
    background:#FBF1F5;color:#C42A63;
    display:flex;align-items:center;justify-content:center;
}
.sd-icard__ico .li{width:16px;height:16px}
.sd-icard__mid{flex:1;min-width:0}
.sd-icard__t{display:block;font-size:14.5px;font-weight:600}
.sd-icard__d{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:#8A93A5}
.sd-icard > .li{width:15px;height:15px;color:#C9D0DA}
/* What a reader needs to choose an article: which section it is in, and how
   long it will take. Both derived — the category from the article's own term,
   the minutes from its words — and both in the palette the tags already use. */
.sd-icard__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.sd-icard__cat{
    display:inline-flex;align-items:center;
    padding:2px 8px;border-radius:999px;
    font-size:10.5px;font-weight:600;
    background:#FBF1F5;color:#C42A63;
}
.sd-icard__time{font-size:11.5px;color:#A9B1C2}
.sd-igroup__t a{color:inherit}
.sd-igroup__t a:hover{color:#C42A63}

/* ---- On this page ------------------------------------------------------------ */

.sd-toc{position:sticky;top:132px;max-height:calc(100vh - 132px);overflow-y:auto;padding:36px 24px 40px}
.sd-toc__t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A93A5}
.sd-toc__list{display:flex;flex-direction:column;gap:1px;margin-top:14px}
.sd-toc__list a{
    display:flex;align-items:center;gap:10px;
    padding:6px 0;font-size:13px;color:#5A6478;
    transition:color .15s ease;
}
.sd-toc__list a i{width:2px;height:14px;border-radius:2px;background:transparent;flex:none;transition:background .15s ease}
.sd-toc__list a:hover{color:#0E1424}
.sd-toc__list a.is-active{font-weight:600;color:#C42A63}
.sd-toc__list a.is-active i{background:#C42A63}
.sd-toc__foot{margin-top:18px;padding-top:16px;border-top:1px solid #F1F3F6}
.sd-toc__prog{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8A93A5}
.sd-toc__prog span{flex:1}
.sd-toc__prog b{font-weight:600;color:#5A6478;font-variant-numeric:tabular-nums}
.sd-toc__bar{margin-top:8px;height:4px;border-radius:999px;background:#F1F3F6;overflow:hidden}
.sd-toc__bar i{display:block;width:0;height:100%;background:#C42A63;border-radius:999px;transition:width .1s linear}

/* ---- Footer ------------------------------------------------------------------ */

.sd-footer{border-top:1px solid #F1F3F6}
.sd-footer__in{
    max-width:1440px;margin:0 auto;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    padding:24px 40px;
    font-size:12.5px;color:#A9B1C2;
}
.sd-footer__copy{flex:1}
.sd-footer__status{display:inline-flex;align-items:center;gap:6px}
.sd-footer a{color:#A9B1C2}
.sd-footer a:hover{color:#5A6478}

/* ---- Tablet ------------------------------------------------------------------ */

@media (max-width:1200px){
    .sd-shell{grid-template-columns:240px minmax(0,1fr)}
    .sd-toc{display:none}
    .sd-main{padding:32px 36px 0}
    .sd-facts{grid-template-columns:1fr 1fr}
}

/* ---- Mobile (13c) ------------------------------------------------------------- */

/* The shared header shrinks to 59px here, so the docs bar has to follow. */
@media (max-width:768px){
    .sd-bar{top:59px}
    .sdx-h2,.sdx-h3,.sdx-step__t{scroll-margin-top:130px}
}

@media (max-width:860px){
    .sd-bar__in{padding:10px 20px;gap:10px}
    .sd-search{width:auto;flex:1;max-width:220px}
    .sd-kbd{display:none}
    .sd-navtoggle{display:inline-flex !important}

    .sd-shell{display:block}
    .sd-nav{
        position:static;max-height:none;overflow:visible;
        display:none;
        border-right:none;border-bottom:1px solid #F1F3F6;
        padding:18px 20px 22px;
    }
    .sd-nav.is-open{display:block}

    .sd-main{padding:26px 20px 0}
    .sd-h1{font-size:32px;line-height:1.12;letter-spacing:-.03em}
    .sd-lede{margin-top:12px;font-size:15.5px}
    .sd-meta{gap:12px;padding:12px 14px;font-size:12px}
    .sd-meta__sep{display:none}
    .sd-facts{grid-template-columns:1fr 1fr;gap:10px}
    .sd-fact{padding:12px 14px}
    .sd-fact__v{font-size:14.5px}

    .sdx-h2{margin-top:40px;font-size:24px}
    .sdx-h3{font-size:18px}
    /* One narrow column — 60% of it would be a thumbnail, not a screenshot. */
    .sdx-fig--pic{max-width:100%}
    .sdx-p,.sdx-ul,.sdx-ol{font-size:15.5px;line-height:1.7}
    .sdx-step{gap:14px}
    .sdx-step__rail{width:28px}
    .sdx-step__num{width:28px;height:28px;border-radius:10px;font-size:13px}
    .sdx-step__t{font-size:17px}
    .sdx-step__p{font-size:14.5px}
    .sdx-step__body{padding-bottom:26px}
    .sdx-prereq{margin-top:28px;border-radius:16px}
    .sdx-prereq__head{padding:14px 18px}
    .sdx-prereq__ico{width:auto;height:auto;border:none;background:none;border-radius:0}
    .sdx-prereq__t{font-size:14px}
    .sdx-prereq__n{font-size:11.5px}
    .sdx-prereq__long{display:none}
    .sdx-prereq__short{display:inline;margin:0 3px}
    .sdx-prereq__list{padding:16px 18px;gap:12px}
    .sdx-prereq__txt{font-size:14px}

    .sdx-faq__q{padding:15px 16px;font-size:14.5px}
    .sdx-faq__a{padding:0 16px 16px 16px}
    .sdx-pre{font-size:12px}

    .sd-help{padding:18px 20px}
    .sd-help__btn{width:100%;justify-content:center}
    /* Same as the help card below it: the button takes the width rather than
       being squeezed next to text that has already wrapped. */
    .sdx-review{padding:18px 20px;gap:14px}
    .sdx-review__act{width:100%;align-items:stretch}
    .sdx-review__note{text-align:left}
    .sdx-review__btn{width:100%;justify-content:center}
    .sd-pn{grid-template-columns:1fr;padding-bottom:40px}
    .sd-pn__card--next{text-align:left}
    .sd-pn__card--next .sd-pn__l{justify-content:flex-start}
    .sd-igroup__list{grid-template-columns:1fr}
    .sd-footer__in{padding:20px}
}

/* Narrow phones: badge + "Browse docs" + search will not share one line, and
   the breadcrumb already says Docs, so the badge is the piece that goes. */
@media (max-width:560px){
    .sd-bar__brand{display:none}
    .sd-navtoggle span{white-space:nowrap}
    .sd-search{flex:1;max-width:none}
}

/* ==========================================================================
   RIGHT-TO-LEFT — the SAME design, read the other way
   ==========================================================================
   Everything above is untouched: an English article renders byte-identically,
   because nothing here applies without dir="rtl" on the page, which only an
   Arabic Doc sets.

   Almost all of the layout mirrors itself — it is flex and grid, and both are
   already written in terms of start and end. What follows is the short list of
   places the design names a PHYSICAL side (a left border, a left padding, a
   right-aligned cell) plus the marks that point somewhere.
   ========================================================================== */

[dir="rtl"] .sd-nav{border-right:none;border-left:1px solid #F1F3F6}
[dir="rtl"] .sd-nav__sub{
    margin:2px 23px 2px 0;padding:0 11px 0 0;
    border-left:none;border-right:1px solid #EDEFF3;
}
[dir="rtl"] .sdx-ul,[dir="rtl"] .sdx-ol{padding-left:0;padding-right:22px}
[dir="rtl"] .sdx-shot__bar span{margin-left:0;margin-right:10px}
[dir="rtl"] .sdx-quote{
    padding:4px 20px 4px 0;
    border-left:none;border-right:3px solid #EFE3EA;
}
[dir="rtl"] .sdx-faq__a{padding:0 50px 18px 22px}
[dir="rtl"] .sdx-exp__b{padding:0 45px 16px 18px}
[dir="rtl"] .sdx-table th{text-align:right}
[dir="rtl"] .sd-pn__card--next{text-align:left}
[dir="rtl"] .sdx-review__note{text-align:left}

/* Code stays left-to-right whatever the article is written in: a command is
   not prose, and mirroring it changes what it says. */
[dir="rtl"] .sdx-pre{direction:ltr;text-align:left}
[dir="rtl"] .sdx-code{direction:ltr;unicode-bidi:isolate}

/* The marks that mean "forward" have to point the other way — arrows in the
   breadcrumb, the prev/next cards, the index cards and buttons, and the
   collapsed disclosure chevron. The open state's rotate(90deg) is (0,3,0) and
   still wins, which is right: open points down in both directions. */
[dir="rtl"] .sd-crumbs .li svg,
[dir="rtl"] .sd-pn__l .li svg,
[dir="rtl"] .sd-icard > .li svg,
[dir="rtl"] .sdx-btn .li svg,
[dir="rtl"] .sd-help__btn .li svg,
[dir="rtl"] .sdx-review__btn .li svg{transform:scaleX(-1)}
[dir="rtl"] .sdx-exp__chev{transform:scaleX(-1)}

/* Arabic is a connected script: the design's negative letter-spacing tightens
   headings beautifully in Latin and pulls Arabic glyphs into each other. The
   sizes, weights and rhythm are the design's — only the tracking is released. */
[dir="rtl"] .sd-h1,
[dir="rtl"] .sdx-h2,
[dir="rtl"] .sdx-h3,
[dir="rtl"] .sdx-step__t,
[dir="rtl"] .sd-bar__badge,
[dir="rtl"] .sd-nav__title,
[dir="rtl"] .sd-toc__t,
[dir="rtl"] .sd-igroup__t,
[dir="rtl"] .sd-fact__l,
[dir="rtl"] .sd-tag--cat,
[dir="rtl"] .sdx-table th{letter-spacing:normal}

@media (max-width:860px){
    [dir="rtl"] .sd-nav{border-left:none;border-bottom:1px solid #F1F3F6}
    [dir="rtl"] .sd-pn__card--next{text-align:right}
    [dir="rtl"] .sdx-faq__a{padding:0 16px 16px 16px}
    [dir="rtl"] .sdx-review__note{text-align:right}
}