/* mbs.css — shared visual design system for My Business Setup content/tool pages (2026-09-22) */
.mbs{--b1:#6366f1;--b2:#22d3ee;--grn:#0aa06e;--ink:#0b1324;--muted:#5b6472;--line:#e6e9f2;--tint:#f5f7ff}
.mbs{color:var(--ink)}
/* Align mbs pages to the SAME content edges as the header (16px gutter, not 24px) */
main.container.mbs{padding-left:16px;padding-right:16px}

/* ---- Hero ---- */
.mbs-hero{position:relative;overflow:hidden;border:1px solid #e3e9ff;border-radius:18px;
  background:linear-gradient(135deg,#eef2ff 0%,#e6f9fb 100%);padding:26px 26px 24px;margin:14px 0 10px}
.mbs-hero:before{content:"";position:absolute;right:-50px;top:-50px;width:210px;height:210px;
  background:radial-gradient(circle,#c7d2fe 0%,transparent 70%);opacity:.55;pointer-events:none}
.mbs-hero:after{content:"";position:absolute;right:60px;bottom:-70px;width:180px;height:180px;
  background:radial-gradient(circle,#a5f3ea 0%,transparent 70%);opacity:.45;pointer-events:none}
.mbs-hero .crumbs{font-size:.86rem;color:#5566aa;margin-bottom:.5rem;position:relative;z-index:1}
.mbs-hero .crumbs a{color:#4f46e5;text-decoration:none}
.mbs-hero h1{position:relative;z-index:1;margin:0 0 .5rem;font-size:clamp(26px,3.6vw,40px);line-height:1.14}
.mbs-hero .lead{position:relative;z-index:1;margin:0;color:#33405a;max-width:80ch;font-size:1.02rem}
.mbs-hero .lead strong{color:#0b1324}

/* ---- Section headings with icon ---- */
.mbs h2{display:flex;align-items:center;gap:12px;font-size:1.45rem;margin:30px 0 14px;line-height:1.2}
.mbs h2 .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.25)}
.mbs h2 .ic svg{width:20px;height:20px;display:block;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbs h3{margin:0 0 .4rem}

/* ---- Cards ---- */
.mbs-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:6px 0 8px}
.mbs-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .1s ease,box-shadow .15s ease}
.mbs-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.mbs-card.tint-g{background:#f2fbf7;border-color:#c7ecdc}
.mbs-card.tint-p{background:#f5f4ff;border-color:#ddd9ff}
.mbs-card .cico{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:#eef2ff;color:#4f46e5;margin-bottom:8px}
.mbs-card .cico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Callout ---- */
.mbs-callout{display:flex;gap:14px;align-items:flex-start;background:var(--tint);border:1px solid #e3e9ff;
  border-left:4px solid var(--b1);border-radius:12px;padding:16px 18px;margin:8px 0}
.mbs-callout .cico{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff}
.mbs-callout .cico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbs-callout.warn{background:#fff7f6;border-color:#f6d5cf;border-left-color:#e05a43}
.mbs-callout.warn .cico{background:linear-gradient(135deg,#f97362,#e05a43)}

/* ---- Checklist ---- */
.mbs-check{list-style:none;padding:0;margin:6px 0}
.mbs-check li{position:relative;padding-left:30px;margin:9px 0;line-height:1.6}
.mbs-check li:before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:#e7f7f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aa06e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.mbs-x li:before{background:#fdece9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e05a43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---- Table ---- */
.mbs-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;font-size:.95rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.mbs-table thead th{background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;text-align:left;padding:12px 14px;font-weight:700}
.mbs-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.mbs-table tbody tr:nth-child(even){background:#f8faff}
.mbs-table tbody tr:hover{background:#eef2ff}
.mbs-scroll{overflow-x:auto}

/* ---- FAQ ---- */
.mbs .faq details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px;background:#fff;transition:box-shadow .15s ease}
.mbs .faq details[open]{box-shadow:0 6px 20px rgba(16,24,40,.06)}
.mbs .faq summary{cursor:pointer;font-weight:600;list-style:none}
.mbs .faq summary::-webkit-details-marker{display:none}
.mbs .faq summary:before{content:"+";display:inline-block;width:20px;color:#4f46e5;font-weight:800}
.mbs .faq details[open] summary:before{content:"\2212"}

/* ---- CTA button ---- */
.mbs-btn{display:inline-block;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;
  border:0;border-radius:10px;padding:12px 18px;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(99,102,241,.28)}
.mbs-btn.grn{background:linear-gradient(135deg,#12b886,#0aa06e);box-shadow:0 6px 16px rgba(10,160,110,.28)}
.mbs-btn:hover{filter:brightness(1.05)}
.badge-free{display:inline-flex;align-items:center;gap:6px;background:#e7f7f0;color:#0a7a56;border:1px solid #b8e6cd;border-radius:999px;padding:5px 13px;font-size:.82rem;font-weight:700;margin-top:14px}
.badge-free:before{content:"✓";font-weight:900}

/* ---- misc ---- */
.mbs .sources a{color:#4f46e5}
.mbs .updated{color:#8a93a6;font-size:.85rem;border-top:1px solid var(--line);padding-top:10px;margin-top:22px}
.mbs .disc{color:#98a0b0;font-size:.82rem;max-width:82ch}
.mbs section{margin-bottom:26px}
.mbs section > p, .mbs .mbs-callout p{max-width:82ch}  /* keep prose readable at full width */
@media(max-width:640px){ .mbs h2{font-size:1.25rem} .mbs h2 .ic{width:32px;height:32px} }