/*
 * Callout boxes and plan prices (inc/content-blocks.php). Loaded wherever the
 * startbuddi/callout block, [sb_callout] or a plan price renders, and inside the
 * block editor, so a box looks the same in both. Self-contained: the colours
 * fall back to the token values when tokens.css is not on the page.
 * Element-qualified selectors on purpose: they outrank ".rs .prose p/ul".
 */
aside.sbco{--k:var(--royal,#2447F5);--ink0:var(--ink,#0C1638);--ink1:var(--ink-2,#3A4568);--mu:var(--muted,#626C8A);--ln:var(--line,#E2E6F0);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin:28px 0 0;padding:22px 24px;border-radius:22px;
  background:color-mix(in srgb,var(--k) 9%,#fff);font-size:16.5px;line-height:1.6;color:var(--ink1);font-family:var(--fb,inherit);text-align:left}
aside.sbco *{box-sizing:border-box}
aside.sbco p,aside.sbco ul{margin:0}
aside.sbco .sbco-t>*+*{margin-top:8px}
aside.sbco .sbco-t>ul,aside.sbco .sbco-t>ol{padding-left:22px;display:grid;gap:6px}
aside.sbco a{color:var(--ink0);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--k) 55%,transparent);text-underline-offset:3px}
aside.sbco strong{color:var(--ink0)}
aside.sbco .sbi{width:22px;height:22px;display:block;flex:none}
aside.sbco .sbco-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;--ic-accent:var(--k)}
aside.sbco p.sbco-h{font:700 17px/1.3 var(--fd,inherit);letter-spacing:-.01em;color:var(--ink0);margin:0 0 4px}
aside.sbco p.sbco-lb{font:800 12px/1.2 var(--fb,inherit);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}

aside.sbco--tip{--k:var(--c-mon,#22A45D)}
aside.sbco--note{--k:var(--royal,#2447F5)}
aside.sbco--warning{--k:var(--c-cus,#FF6A3D)}
aside.sbco--dyk{--k:var(--c-sit,#7C5CFF)}
aside.sbco--example{--k:var(--c-mkt,#F5A524)}
aside.sbco--dyk p.sbco-h{color:#5B3FD9}
aside.sbco--warning p.sbco-h{color:#B8431F}

/* Key takeaway: the one dark card */
aside.sbco--takeaway{grid-template-columns:minmax(0,1fr);background:var(--ink0);color:#fff;padding:28px 30px;border-radius:24px}
aside.sbco--takeaway p.sbco-h{font:800 12px/1.2 var(--fb,inherit);letter-spacing:.08em;text-transform:uppercase;color:#9FB0FF;margin-bottom:10px}
aside.sbco--takeaway .sbco-t{font:700 clamp(20px,2.2vw,25px)/1.3 var(--fd,inherit);letter-spacing:-.02em;color:#fff}
aside.sbco--takeaway .sbco-t strong,aside.sbco--takeaway a{color:#fff}

/* Myth vs fact */
aside.sbco--myth{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;padding:0;background:none;align-items:stretch}
aside.sbco--myth .sbco-m,aside.sbco--myth .sbco-f{padding:18px 20px;border-radius:20px;font-size:16px;line-height:1.5}
aside.sbco--myth .sbco-m{background:color-mix(in srgb,var(--c-cus,#FF6A3D) 9%,#fff)}
aside.sbco--myth .sbco-m .sbco-t{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--c-cus,#FF6A3D) 60%,transparent);text-decoration-thickness:2px}
aside.sbco--myth .sbco-f{background:color-mix(in srgb,var(--c-mon,#22A45D) 10%,#fff);color:var(--ink0)}
aside.sbco--myth .sbco-m p.sbco-lb{color:#B8431F}
aside.sbco--myth .sbco-f p.sbco-lb{color:#177A43}
aside.sbco--myth .sbco-ar{width:44px;display:grid;place-items:center;--ic-ink:var(--mu)}
aside.sbco--myth .sbco-ar .sbi{width:20px;height:20px}

/* Checklist and pros and cons */
aside.sbco--checklist,aside.sbco--proscons{grid-template-columns:minmax(0,1fr);background:#fff;border:1px solid var(--ln);gap:10px}
aside.sbco ul.sbco-l{list-style:none;padding:0;display:grid;gap:10px}
aside.sbco ul.sbco-l li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;color:var(--ink0);margin:0}
aside.sbco ul.sbco-l li::marker{content:none}
aside.sbco ul.sbco-l .sbi{width:20px;height:20px;margin-top:3px;--ic-sw:2.2}
aside.sbco--checklist ul.sbco-l .sbi,aside.sbco--proscons .sbco-pro .sbi{--ic-ink:var(--c-mon,#22A45D)}
aside.sbco--proscons .sbco-con .sbi{--ic-ink:var(--c-cus,#FF6A3D)}
aside.sbco .sbco-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
aside.sbco .sbco-pro,aside.sbco .sbco-con{border-radius:16px;padding:16px 18px}
aside.sbco .sbco-pro{background:color-mix(in srgb,var(--c-mon,#22A45D) 9%,#fff)}
aside.sbco .sbco-con{background:color-mix(in srgb,var(--c-cus,#FF6A3D) 8%,#fff)}
aside.sbco .sbco-pro p.sbco-lb{color:#177A43}
aside.sbco .sbco-con p.sbco-lb{color:#B8431F}

/* Stat with source */
aside.sbco--stat{grid-template-columns:minmax(0,1fr);gap:4px;background:#fff;border:1px solid var(--ln);border-left:6px solid var(--k)}
aside.sbco--stat p.sbco-n{font:800 clamp(34px,4vw,46px)/1.05 var(--fd,inherit);letter-spacing:-.03em;color:var(--k)}
aside.sbco--stat .sbco-t{font-size:17px;color:var(--ink0)}
aside.sbco--stat p.sbco-src{font-size:13.5px;color:var(--mu);margin-top:6px}

@media (max-width:620px){
  aside.sbco{grid-template-columns:minmax(0,1fr);padding:20px}
  aside.sbco--takeaway{padding:24px 22px}
  aside.sbco--myth{grid-template-columns:minmax(0,1fr);padding:0}
  aside.sbco--myth .sbco-ar{width:auto;height:32px;transform:rotate(90deg)}
  aside.sbco .sbco-pc{grid-template-columns:minmax(0,1fr)}
}

/* ── Plan price ─────────────────────────────────────────────── */
.sb-price-amt{font-weight:700;color:var(--ink,#0C1638);white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .16s ease}
.sb-price-amt.sb-geo-out{opacity:0}
p.sb-plan-line{margin:20px 0 0}
div.sb-plan-card{--k:var(--royal,#2447F5);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:28px 0 0;padding:20px 22px;border:1px solid var(--line,#E2E6F0);border-radius:22px;background:#fff;font-family:var(--fb,inherit);color:var(--ink-2,#3A4568)}
div.sb-plan-card .sb-plan-name{display:block;font:800 12px/1.2 var(--fb,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--k)}
div.sb-plan-card .sb-plan-big{display:block;font:800 clamp(28px,3vw,36px)/1.1 var(--fd,inherit);letter-spacing:-.03em;color:var(--ink,#0C1638);margin-top:4px}
div.sb-plan-card .sb-plan-big small{font:500 15px var(--fb,inherit);letter-spacing:0;color:var(--muted,#626C8A)}
div.sb-plan-card .sb-plan-note{display:block;font-size:14px;color:var(--muted,#626C8A);margin-top:4px}
div.sb-plan-card .sb-plan-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:14px;background:var(--royal,#2447F5);color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
div.sb-plan-card .sb-plan-btn:hover{background:var(--royal-d,#1A36D1);color:#fff}
div.sb-plan-card .sb-plan-btn:focus-visible{outline:2px solid var(--royal,#2447F5);outline-offset:2px}
@media (max-width:620px){div.sb-plan-card .sb-plan-btn{margin-left:0}}

/* ── Questions (sb/faq). :where() keeps these weaker than the resource pages' own .faq styles ── */
:where(.sb-faq){display:grid;gap:10px;margin:28px 0 0}
:where(.sb-faq) details{border:1px solid var(--line,#E2E6F0);border-radius:16px;background:#fff;padding:0 18px}
:where(.sb-faq) summary{display:flex;justify-content:space-between;gap:14px;align-items:center;cursor:pointer;list-style:none;padding:16px 0;font-weight:600;color:var(--ink,#0C1638)}
:where(.sb-faq) summary::-webkit-details-marker{display:none}
:where(.sb-faq) .pm .sbi{width:20px;height:20px;display:block}
:where(.sb-faq) details[open] .pm{transform:rotate(45deg)}
:where(.sb-faq) .ans{padding:0 0 16px;color:var(--ink-2,#3A4568)}

/* Editor only: the line-per-item fields of checklists and pros and cons */
aside.sbco .sbco-lines{color:var(--ink,#0C1638);line-height:1.9;min-height:1.9em}
aside.sbco p.sbco-editor-note{font-size:13px;color:#B8431F;margin-top:6px}

/* ── Screenshots in articles: real proportions, rounded frame ── */
.rs .prose img,.rs .gch img,.rs .sb img{max-width:100%;height:auto}
.rs figure.app-shot,.rs .prose figure.wp-block-image{margin:32px 0}
.rs figure.app-shot img,.rs .gimg img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 28px 56px -34px rgba(12,22,56,.45)}
.rs .gimg{border:0;border-radius:16px;overflow:visible}
.rs figure.app-shot figcaption,.rs .gimg figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);text-align:center}

/* ── Tables in articles, guides, glossary and help ── */
.rs .tbl-w{margin:28px 0;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 18px 40px -32px rgba(12,22,56,.4);-webkit-overflow-scrolling:touch}
.rs .tbl-w:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.rs .tbl-w table{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;border:0;margin:0;font-size:15.5px;line-height:1.5}
.rs .tbl-w thead th{background:color-mix(in srgb,var(--royal) 7%,#fff);color:var(--ink);font:700 13.5px/1.35 var(--fb);letter-spacing:.02em;text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.rs .tbl-w thead th:first-child{border-top-left-radius:17px}
.rs .tbl-w thead th:last-child{border-top-right-radius:17px}
.rs .tbl-w td,.rs .tbl-w tbody th{padding:14px 18px;border:0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);text-align:left}
.rs .tbl-w tbody th,.rs .tbl-w td:first-child{color:var(--ink);font-weight:600}
.rs .tbl-w tbody tr:last-child td,.rs .tbl-w tbody tr:last-child th{border-bottom:0}
.rs .tbl-w tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg-alt,#F4F6FB) 60%,#fff)}
.rs .tbl-w tbody tr:hover{background:color-mix(in srgb,var(--royal) 4%,#fff)}
.rs .tbl-w td strong{color:var(--ink)}
.rs .tbl-w td a{font-weight:600}
.rs .prose figure.wp-block-table{margin:28px 0}
.rs .prose figure.wp-block-table figcaption{margin-top:10px;font-size:14px;color:var(--muted);text-align:center}
@media (max-width:640px){.rs .tbl-w table{font-size:14.5px}.rs .tbl-w td,.rs .tbl-w th{padding:12px 14px}}