/* css/blog/public.css */
/* ==========================================================================
   Weesify Blog · public pages (index, post). Prefix: wbl-. Mobile first (360–390 px), then tablet and desktop.
   Light, dark (visitor's choice: html[data-theme]) or the system theme. Layout ideas: a featured hero, a
   three-column "Recent posts" grid with Load more, Discover pills + search, a large cover header with an overlapping
   reading sheet. Covers without an image are abstract gradients (no people or animals).
   ========================================================================== */
:root {
  --wbl-bg: #F4F5F1;
  --wbl-surface: #FFFFFF;
  --wbl-surface-2: #F8F9F6;
  --wbl-chip: #ECEEE9;
  --wbl-ink: #0B0F0D;
  --wbl-text: #2A302C;
  --wbl-muted: #5F6761;
  --wbl-line: #E3E6E0;
  --wbl-accent: #07A06C;
  --wbl-on-accent: #FFFFFF;
  --wbl-shadow: 0 1px 2px rgb(20 28 22 / .05), 0 12px 32px -14px rgb(20 28 22 / .18);
  --wbl-glass: rgb(255 255 255 / .78);
  --wbl-radius: 22px;
  --wbl-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wbl-display: "Urbanist", "Manrope", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wbl-bg: #0A0C0B; --wbl-surface: #121517; --wbl-surface-2: #171B1D; --wbl-chip: #1E2326; --wbl-ink: #F3F5F4; --wbl-text: #D7DCD9;
    --wbl-muted: #939B97; --wbl-line: rgb(255 255 255 / .08); --wbl-accent: #2BE3A2; --wbl-on-accent: #04140D;
    --wbl-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7); --wbl-glass: rgb(18 21 23 / .78); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wbl-bg: #0A0C0B; --wbl-surface: #121517; --wbl-surface-2: #171B1D; --wbl-chip: #1E2326; --wbl-ink: #F3F5F4; --wbl-text: #D7DCD9;
  --wbl-muted: #939B97; --wbl-line: rgb(255 255 255 / .08); --wbl-accent: #2BE3A2; --wbl-on-accent: #04140D;
  --wbl-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7); --wbl-glass: rgb(18 21 23 / .78); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wbl *, .wbl *::before, .wbl *::after { transition: none !important; animation: none !important; } }
body.wbl-body { margin: 0; background: var(--wbl-bg); color: var(--wbl-text); font: 400 16px/1.6 var(--wbl-font); -webkit-font-smoothing: antialiased; }
.wbl { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.wbl svg { width: 1.1em; height: 1.1em; flex: none; }
:where(.wbl) a { color: inherit; }
.wbl :focus-visible { outline: 3px solid color-mix(in srgb, var(--wbl-accent) 55%, transparent); outline-offset: 2px; border-radius: 10px; }
.wbl-sr, .wbl-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wbl-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--wbl-ink); color: var(--wbl-bg); padding: 10px 14px; border-radius: 12px; }
.wbl-skip:focus { top: 12px; }
.wbl-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.wbl-main { flex: 1; }

/* ---- top bar ---- */
.wbl-top { position: sticky; top: 0; z-index: 20; background: var(--wbl-glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--wbl-line); }
.wbl-top-in { max-width: 1180px; margin-inline: auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.wbl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1; }
.wbl-brand-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 800 16px/1 var(--wbl-display); color: var(--wbl-on-accent); background: var(--wbl-accent); flex: none; }
.wbl-brand-name { font: 700 17px/1.2 var(--wbl-display); color: var(--wbl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbl-top-tools { display: flex; gap: 6px; }
.wbl-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: var(--wbl-chip); color: var(--wbl-ink); cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.wbl-icon-btn:hover { background: color-mix(in srgb, var(--wbl-chip) 70%, var(--wbl-accent)); }
.wbl-icon-btn:active { transform: scale(.94); }

/* ---- covers: image, or an abstract gradient ---- */
.wbl-cover { position: relative; display: block; overflow: hidden; background: var(--wbl-chip); isolation: isolate; }
.wbl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wbl-cover-shapes i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; mix-blend-mode: soft-light; background: #fff; }
.wbl-cover-shapes i:nth-child(1) { width: 62%; aspect-ratio: 1; inset-inline-end: -14%; top: -28%; opacity: .35; }
.wbl-cover-shapes i:nth-child(2) { width: 34%; aspect-ratio: 1; inset-inline-start: 8%; bottom: -16%; opacity: .28; }
.wbl-cover-shapes i:nth-child(3) { width: 120%; height: 120%; inset: -10%; border-radius: 0; filter: none; opacity: .14; background: repeating-linear-gradient(120deg, #fff 0 1px, transparent 1px 16px); }
.wbl-g1 { background: radial-gradient(90% 90% at 85% 10%, #C2F45B 0%, transparent 55%), linear-gradient(150deg, #0BC284 0%, #067C55 60%, #062A1E 100%); }
.wbl-g2 { background: radial-gradient(80% 90% at 15% 0%, #C4B5FF 0%, transparent 55%), linear-gradient(155deg, #7C5CFF 0%, #4B2BC9 60%, #22125F 100%); }
.wbl-g3 { background: radial-gradient(90% 80% at 0% 0%, #FFD6AA 0%, transparent 50%), linear-gradient(150deg, #FF9A5C 0%, #FF7A3D 45%, #B83D10 100%); }
.wbl-g4 { background: radial-gradient(80% 80% at 90% 90%, #7BA5FF 0%, transparent 55%), linear-gradient(160deg, #15233F 0%, #2448A8 60%, #3B8BFF 100%); }
.wbl-g5 { background: radial-gradient(70% 80% at 20% 90%, #25D695 0%, transparent 55%), radial-gradient(70% 70% at 90% 10%, #7C5CFF 0%, transparent 55%), linear-gradient(160deg, #15191A, #0B0D0C); }
.wbl-g6 { background: radial-gradient(90% 80% at 80% 0%, #FFE08A 0%, transparent 55%), linear-gradient(150deg, #E4A11B 0%, #B8790A 55%, #5C3A05 100%); }
.wbl-g7 { background: radial-gradient(80% 80% at 10% 10%, #FFB3CF 0%, transparent 55%), linear-gradient(150deg, #FF4D8D 0%, #8468FF 100%); }
.wbl-g8 { background: radial-gradient(80% 90% at 85% 15%, #9EF2CD 0%, transparent 50%), linear-gradient(155deg, #0E3B4A 0%, #0B7A5A 70%, #12B886 100%); }

/* ---- featured hero ---- */
.wbl-hero-wrap { max-width: 1212px; margin: 12px auto 0; padding-inline: 12px; }
.wbl-hero { position: relative; display: block; border-radius: var(--wbl-radius); overflow: hidden; min-height: 420px; text-decoration: none; color: #fff; box-shadow: var(--wbl-shadow); }
.wbl-hero-cover { position: absolute; inset: 0; }
.wbl-hero-cover img { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.wbl-hero:hover .wbl-hero-cover img { transform: scale(1.03); }
.wbl-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgb(6 10 8 / .35) 55%, rgb(6 10 8 / .82) 100%); }
.wbl-hero-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.wbl-hero-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 12px/1 var(--wbl-font); letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wbl-hero-title { font: 800 clamp(1.7rem, 1.1rem + 3.2vw, 3.2rem)/1.08 var(--wbl-display); letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.wbl-hero-text { color: rgb(255 255 255 / .86); max-width: 60ch; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-hero-go { position: absolute; inset-inline-end: 20px; top: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .2s ease, background .2s ease; }
.wbl-hero:hover .wbl-hero-go { transform: translateX(4px); background: rgb(255 255 255 / .28); }
[dir="rtl"] .wbl-hero:hover .wbl-hero-go { transform: translateX(-4px); }

/* ---- meta row, avatars ---- */
.wbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--wbl-muted); }
.wbl-meta.is-light { color: rgb(255 255 255 / .85); }
.wbl-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.wbl-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.wbl-meta-name { color: var(--wbl-text); font-weight: 600; }
.wbl-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; display: inline-block; }
.wbl-ava { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 800 15px/1 var(--wbl-display); color: var(--wbl-on-accent);
  background: linear-gradient(135deg, var(--wbl-accent), color-mix(in srgb, var(--wbl-accent) 55%, #7C5CFF)); }
.wbl-ava.is-sm { width: 24px; height: 24px; font-size: 11px; }

/* ---- discover: heading, search, category pills ---- */
.wbl-discover { padding-top: 28px; }
.wbl-h1 { font: 800 clamp(2rem, 1.5rem + 2.4vw, 3rem)/1.05 var(--wbl-display); letter-spacing: -.025em; color: var(--wbl-ink); margin: 0; }
.wbl-h2 { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--wbl-display); color: var(--wbl-ink); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.wbl-sub { margin: 6px 0 0; color: var(--wbl-muted); font-size: 15px; }
.wbl-search { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--wbl-surface); border: 1px solid var(--wbl-line); box-shadow: var(--wbl-shadow); max-width: 560px; }
[dir="rtl"] .wbl-search { padding: 6px 16px 6px 6px; }
.wbl-search > svg { color: var(--wbl-muted); }
.wbl-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--wbl-ink); font: inherit; font-size: 16px; padding: 8px 0; outline: none; }
.wbl-search-go { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--wbl-ink); color: var(--wbl-bg); cursor: pointer; }
.wbl-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 0; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.wbl-pills::-webkit-scrollbar { display: none; }
.wbl-pill { flex: none; scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-text); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s ease, color .15s ease; }
.wbl-pill:hover { background: color-mix(in srgb, var(--wbl-chip) 75%, var(--wbl-accent)); }
.wbl-pill.is-on { background: var(--wbl-accent); color: var(--wbl-on-accent); }
.wbl-filter-note { display: flex; align-items: center; gap: 6px; color: var(--wbl-muted); margin: 12px 0 0; font-size: 14px; }
.wbl-filter-note a { color: var(--wbl-accent); font-weight: 600; }

/* ---- recent posts: list rows on phones, a grid from tablets ---- */
.wbl-recent { padding: 28px 0 48px; }
.wbl-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.wbl-anchor { display: block; grid-column: 1 / -1; height: 0; scroll-margin-top: 80px; }
.wbl-card-link { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; text-decoration: none; padding: 10px; border-radius: 18px; background: var(--wbl-surface); border: 1px solid var(--wbl-line); transition: transform .2s ease, box-shadow .2s ease; }
.wbl-card-link:hover { transform: translateY(-2px); box-shadow: var(--wbl-shadow); }
.wbl-card-cover { aspect-ratio: 1 / 1; border-radius: 14px; }
.wbl-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wbl-card-cat { font-size: 12px; font-weight: 700; color: var(--wbl-accent); letter-spacing: .02em; }
.wbl-card-title { font: 700 16px/1.3 var(--wbl-display); color: var(--wbl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-card-text { display: none; font-size: 14px; color: var(--wbl-muted); }
.wbl-card .wbl-meta { margin-top: 4px; font-size: 12px; }
@media (min-width: 640px) {
  .wbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .wbl-card-link { grid-template-columns: 1fr; padding: 0; border: 0; background: transparent; gap: 14px; }
  .wbl-card-link:hover { box-shadow: none; }
  .wbl-card-cover { aspect-ratio: 16 / 11; border-radius: 18px; transition: box-shadow .2s ease; }
  .wbl-card-link:hover .wbl-card-cover { box-shadow: var(--wbl-shadow); }
  .wbl-card-title { font-size: 19px; }
  .wbl-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 960px) {
  .wbl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wbl-hero { min-height: 520px; }
  .wbl-hero-copy { padding: 40px 44px 44px; }
  .wbl-hero-go { top: auto; bottom: 44px; inset-inline-end: 44px; width: 56px; height: 56px; }
}
.wbl-more { display: flex; justify-content: center; margin-top: 32px; }
.wbl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 700 14px/1 var(--wbl-font);
  background: var(--wbl-ink); color: var(--wbl-bg); transition: transform .15s ease, opacity .15s ease; }
.wbl-btn:hover { opacity: .9; }
.wbl-btn:active { transform: scale(.97); }
.wbl-btn.is-ghost { background: var(--wbl-chip); color: var(--wbl-ink); }
.wbl-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--wbl-line); border-radius: var(--wbl-radius); background: var(--wbl-surface-2); }
.wbl-empty-art { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; background: var(--wbl-chip); color: var(--wbl-accent); }
.wbl-empty-art svg { width: 28px; height: 28px; }
.wbl-empty-title { font: 700 18px/1.3 var(--wbl-display); color: var(--wbl-ink); margin: 14px 0 4px; }
.wbl-empty-text { color: var(--wbl-muted); margin: 0 0 16px; }

/* ---- post: cover header + overlapping sheet ---- */
.wbl-post-head { position: relative; min-height: 440px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.wbl-post-cover { position: absolute; inset: 0; }
.wbl-post-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 10 8 / .35) 0%, transparent 28%, rgb(6 10 8 / .25) 55%, rgb(6 10 8 / .8) 100%); }
.wbl-post-bar { position: relative; display: flex; justify-content: space-between; padding: 14px 16px; max-width: 1180px; width: 100%; margin-inline: auto; }
.wbl-post-bar-end { display: flex; gap: 8px; }
.wbl-round { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; cursor: pointer; text-decoration: none; color: #fff; background: rgb(255 255 255 / .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, background .15s ease; }
.wbl-round:hover { background: rgb(255 255 255 / .3); }
.wbl-round:active { transform: scale(.92); }
.wbl-round .is-on { display: none; }
.wbl-round[aria-pressed="true"] .is-on { display: block; }
.wbl-round[aria-pressed="true"] .is-off { display: none; }
.wbl-round[aria-pressed="true"] { background: #fff; color: #0B0F0D; }
.wbl-round.is-soft { background: var(--wbl-chip); color: var(--wbl-ink); backdrop-filter: none; }
.wbl-round.is-soft:hover { background: color-mix(in srgb, var(--wbl-chip) 70%, var(--wbl-accent)); }
.wbl-post-title-wrap { position: relative; padding: 0 16px 52px; max-width: 860px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.wbl-chip { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--wbl-accent); color: var(--wbl-on-accent); font-weight: 700; font-size: 13px; text-decoration: none; }
.wbl-post-title { margin: 0; font: 800 clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem)/1.08 var(--wbl-display); letter-spacing: -.02em; text-wrap: balance; }
.wbl-sheet { position: relative; margin-top: -28px; background: var(--wbl-surface); border-radius: 28px 28px 0 0; }
.wbl-sheet-in { max-width: 760px; margin-inline: auto; padding: 24px 18px 40px; }
.wbl-author { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--wbl-line); margin-bottom: 20px; }
.wbl-author-text { display: flex; flex-direction: column; line-height: 1.3; }
.wbl-author-text b { color: var(--wbl-ink); font-size: 16px; }
.wbl-author-text small { color: var(--wbl-muted); font-size: 13px; }
.wbl-lede { font-size: 19px; line-height: 1.55; color: var(--wbl-ink); margin: 0 0 18px; font-weight: 500; }
@media (min-width: 960px) {
  .wbl-post-head { min-height: 560px; }
  .wbl-post-bar { padding: 20px 24px; }
  .wbl-sheet { max-width: 920px; margin: -64px auto 0; border-radius: 32px 32px 0 0; }
  .wbl-post-title-wrap { padding-bottom: 92px; } /* clears the sheet's 64px overlap, so the reading time and date stay visible */
  .wbl-sheet-in { padding: 40px 40px 56px; }
}

/* ---- the article's text ---- */
.wbl-prose { font-size: 17.5px; line-height: 1.75; color: var(--wbl-text); overflow-wrap: anywhere; }
/* p's own margins go first and at zero specificity, so the rhythm below spaces paragraphs too (it was overridden). */
.wbl-prose :where(p) { margin: 0; }
.wbl-prose > * + * { margin-top: 1.1em; }
.wbl-prose h2, .wbl-prose h3, .wbl-prose h4 { font-family: var(--wbl-display); color: var(--wbl-ink); line-height: 1.25; margin: 1.8em 0 .2em; letter-spacing: -.01em; }
.wbl-prose h2 { font-size: 1.55em; } .wbl-prose h3 { font-size: 1.25em; } .wbl-prose h4 { font-size: 1.05em; }
.wbl-prose a { color: var(--wbl-accent); text-underline-offset: 3px; }
.wbl-prose ul, .wbl-prose ol { padding-inline-start: 1.3em; margin-bottom: 0; }
.wbl-prose li + li { margin-top: .35em; }
.wbl-prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-inline-start: 4px solid var(--wbl-accent); font-size: 1.12em; color: var(--wbl-ink); font-style: italic; }
[dir="rtl"] .wbl-prose blockquote { padding: 4px 18px 4px 0; }
.wbl-prose pre { background: var(--wbl-chip); padding: 14px 16px; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.wbl-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--wbl-chip); padding: .1em .35em; border-radius: 6px; }
.wbl-prose pre code { background: none; padding: 0; }
.wbl-prose img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.wbl-prose figure { margin-inline: 0; }
.wbl-prose figcaption { color: var(--wbl-muted); font-size: 14px; margin-top: 6px; text-align: center; }
.wbl-prose hr { border: 0; height: 1px; background: var(--wbl-line); margin: 2em 0; }
/* Tables (comparisons, checklists): scroll sideways inside the column on a phone, never the page. */
.wbl-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; border: 1px solid var(--wbl-line); border-radius: 14px; }
.wbl-prose th, .wbl-prose td { padding: 10px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--wbl-line); min-width: 120px; }
.wbl-prose thead th { background: var(--wbl-chip); color: var(--wbl-ink); font-weight: 700; }
.wbl-prose tbody tr:last-child td { border-bottom: 0; }
/* Product screenshots: framed like a window so they read as UI, not decoration. */
.wbl-prose figure img { border: 1px solid var(--wbl-line); box-shadow: 0 18px 40px -24px rgb(6 42 30 / .35); }
.wbl-prose figure { margin-block: 1.6em; }

.wbl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.wbl-tags a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--wbl-chip); text-decoration: none; font-size: 14px; font-weight: 600; }
.wbl-tags svg { width: 14px; height: 14px; color: var(--wbl-accent); }
.wbl-share { margin-top: 28px; padding: 18px; border-radius: 20px; background: var(--wbl-surface-2); border: 1px solid var(--wbl-line); }
.wbl-share-title { margin: 0 0 12px; font-weight: 700; color: var(--wbl-ink); }
.wbl-share-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- comments ---- */
.wbl-comments { margin-top: 40px; scroll-margin-top: 80px; }
.wbl-count { font: 700 13px/1 var(--wbl-font); padding: 5px 9px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-muted); }
.wbl-comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--wbl-line); }
.wbl-comment.is-team .wbl-comment-body { background: color-mix(in srgb, var(--wbl-accent) 9%, transparent); }
.wbl-comment-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.wbl-comment-head b { color: var(--wbl-ink); }
.wbl-comment-head time { color: var(--wbl-muted); font-size: 12px; }
.wbl-comment-body { margin: 6px 0 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--wbl-surface-2); overflow-wrap: anywhere; }
.wbl-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--wbl-accent); color: var(--wbl-on-accent); }
.wbl-muted { color: var(--wbl-muted); }
.wbl-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; margin: 0 0 12px; font-weight: 600; }
.wbl-note.is-ok { background: color-mix(in srgb, var(--wbl-accent) 12%, transparent); color: var(--wbl-ink); }
.wbl-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; border: 1px solid var(--wbl-line); background: var(--wbl-surface-2); }
.wbl-form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .wbl-form-row { grid-template-columns: 1fr 1fr; } }
.wbl-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wbl-ink); }
.wbl-field input, .wbl-field textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--wbl-ink); background: var(--wbl-surface); border: 1px solid var(--wbl-line); border-radius: 14px; padding: 12px 14px; min-height: 46px; resize: vertical; }
.wbl-field input:focus, .wbl-field textarea:focus { border-color: var(--wbl-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbl-accent) 25%, transparent); }
.wbl-err { color: #D93A3A; font-weight: 600; }
.wbl-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wbl-form-foot small { flex: 1 1 220px; }

.wbl-related { padding: 36px 0 56px; background: var(--wbl-bg); }

/* ---- footer, toast ---- */
.wbl-foot { border-top: 1px solid var(--wbl-line); background: var(--wbl-surface); }
.wbl-foot-in { max-width: 1180px; margin-inline: auto; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.wbl-foot-title { margin: 0; font: 700 16px/1.3 var(--wbl-display); color: var(--wbl-ink); }
.wbl-foot-text { margin: 4px 0 0; color: var(--wbl-muted); font-size: 14px; }
.wbl-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.wbl-foot-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--wbl-muted); text-decoration: none; min-height: 44px; }
.wbl-foot-links a:hover { color: var(--wbl-ink); }
.wbl-toast { position: fixed; inset-inline: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 360px; z-index: 60; text-align: center; padding: 12px 16px; border-radius: 14px; background: #0B0F0D; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); animation: wbl-toast-in .25s cubic-bezier(.22, 1, .36, 1); }
@keyframes wbl-toast-in { from { opacity: 0; transform: translateY(10px); } }
.wbl-preview { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; background: #0B0F0D; color: #fff; font-size: 14px; font-weight: 600; }
.wbl-preview b { color: #C2F45B; }
/* "List" front page: one readable column with the thumbnail beside the text at every width. */
@media (min-width: 640px) {
  .wbl-grid.is-list { grid-template-columns: 1fr; max-width: 820px; gap: 16px; }
  .wbl-grid.is-list .wbl-card-link { grid-template-columns: 220px 1fr; gap: 20px; padding: 12px; border: 1px solid var(--wbl-line); background: var(--wbl-surface); }
  .wbl-grid.is-list .wbl-card-cover { aspect-ratio: 4 / 3; }
}

/* css/blog/official.css */
/* ==========================================================================
   Weesify's own blog at weesify.com/blog (ADR-0076). Prefix: wob-. The creator blog's pages (wbl-, public.css) inside
   the marketing site: its colours come from the site's tokens (so it follows the marketing look), and the content
   starts below the floating marketing navigation. Mobile first.
   ========================================================================== */
.wob {
  --wbl-bg: var(--canvas);
  --wbl-surface: var(--surface);
  --wbl-surface-2: var(--surface-2);
  --wbl-chip: var(--surface-active);
  --wbl-ink: var(--ink);
  --wbl-text: var(--text);
  --wbl-muted: var(--text-muted);
  --wbl-line: var(--line);
  --wbl-accent: var(--accent);
  --wbl-on-accent: #FFFFFF;
  --wbl-glass: var(--glass);
  --wbl-font: inherit;
  min-height: 0;
  background: var(--canvas);
  color: var(--text);
}
.wob .wbl-main { padding-top: 92px; }
@media (min-width: 900px) { .wob .wbl-main { padding-top: 100px; } }

/* The article header: a rounded card like the index hero (the reference layout), below the navigation. */
.wob .wbl-post-head { max-width: 1212px; margin: 0 auto; border-radius: 28px; overflow: hidden; margin-inline: 12px; }
@media (min-width: 1236px) { .wob .wbl-post-head { margin-inline: auto; } }

.wob .wbl-post-title { color: #FFFFFF; } /* the site's h1 colour would sit dark on the cover */
.wob .wbl svg { display: inline-block; }

/* Follow along: RSS, changelog and help. */
.wob-cta { padding: 8px 0 56px; }
.wob-cta-card { display: grid; gap: 18px; padding: 24px; border-radius: 28px; background: var(--ink); color: var(--text-on-ink); }
.wob-cta-title { margin: 0; font: 700 clamp(22px, 4vw, 30px)/1.15 var(--wbl-display); letter-spacing: -.02em; color: inherit; }
.wob-cta-text { margin: 8px 0 0; max-width: 560px; color: color-mix(in srgb, var(--text-on-ink) 78%, transparent); }
.wob-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wob-cta-actions .btn { min-height: 44px; }
.wob-cta-actions .btn svg { width: 1.1em; height: 1.1em; }
.wob-cta-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.wob-cta-actions .btn-ghost { color: var(--text-on-ink); border-color: color-mix(in srgb, var(--text-on-ink) 30%, transparent); background: transparent; }
.wob-cta-actions .btn-ghost:hover { background: color-mix(in srgb, var(--text-on-ink) 12%, transparent); }
@media (min-width: 900px) { .wob-cta-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 36px 40px; } }

/* "Latest from the blog" on the marketing homepage (three or more official posts). */
.wob-strip { padding: clamp(40px, 7vw, 88px) 0; }
.wob-strip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.wob-strip-title { margin: 0; font: 700 clamp(26px, 4.6vw, 40px)/1.1 var(--wbl-display, "Urbanist", sans-serif); letter-spacing: -.025em; color: var(--ink); }
.wob-strip-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .wob-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.wob-strip .wbl-card { --wbl-surface: var(--surface); --wbl-line: var(--line); --wbl-ink: var(--ink); --wbl-muted: var(--text-muted); --wbl-chip: var(--surface-active); }

/* css/blog/threads-saves.css */
/* R72 · Weesify Blog public pages: threaded comment replies and the reader's Saved list. Uses the blog's own tokens
   (--wbl-*, light/dark set in public.css / official.css), so it follows every theme. Mobile first; 44px targets. */
.wbl-comment-main { flex: 1 1 auto; min-width: 0; }
.wbl-comment-tools { margin: 4px 0 0; }
.wbl-reply-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin-inline-start: -10px; border-radius: 999px; color: var(--wbl-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.wbl-reply-link svg { width: 16px; height: 16px; }
.wbl-reply-link:hover { color: var(--wbl-ink); background: var(--wbl-chip); }
.wbl-replies { margin-top: 2px; padding-inline-start: 12px; border-inline-start: 2px solid var(--wbl-line); }
.wbl-comment.is-reply { padding: 10px 0 0; border-bottom: 0; }
.wbl-comment.is-reply .wbl-ava { width: 30px; height: 30px; font-size: 12px; }
.wbl-comment.is-reply .wbl-comment-body { border-radius: 4px 14px 14px 14px; }
@media (min-width: 640px) { .wbl-replies { padding-inline-start: 18px; } }

.wbl-replying { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-text); font-size: 14px; }
.wbl-replying[hidden] { display: none; }
.wbl-replying > svg { width: 16px; height: 16px; color: var(--wbl-muted); flex: none; }
.wbl-replying span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbl-replying b { color: var(--wbl-ink); }
.wbl-replying-x { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--wbl-muted); flex: none; }
.wbl-replying-x:hover { background: var(--wbl-surface); color: var(--wbl-ink); }
.wbl-replying-x svg { width: 16px; height: 16px; }
.wbl-form.is-inline { margin-top: 10px; animation: wbl-reply-in .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes wbl-reply-in { from { opacity: 0; transform: translateY(-6px); } }

/* Saved: the link on the index, the toast's action, and the Saved page (prefix wbs-). */
.wbl-discover-head:has(.wbl-saved-link) { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wbl-saved-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--wbl-chip); color: var(--wbl-ink); font-weight: 700; font-size: 14px; text-decoration: none; flex: none; align-self: flex-start; }
.wbl-saved-link svg { width: 18px; height: 18px; }
.wbl-saved-link:hover { background: color-mix(in srgb, var(--wbl-chip) 70%, var(--wbl-accent)); }
.wbl-saved-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--wbl-accent); color: var(--wbl-on-accent); font-size: 12px; }
.wbl-saved-n[hidden] { display: none; }
.wbl-toast-act { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: 4px; white-space: nowrap; }

.wbs { padding-top: 20px; }
.wbs-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--wbl-muted); font-weight: 600; font-size: 14px; text-decoration: none; margin-bottom: 4px; }
.wbs-back svg { width: 16px; height: 16px; }
.wbs-back:hover { color: var(--wbl-ink); }
.wbs-sync { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 18px 0 4px; padding: 14px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--wbl-accent) 30%, var(--wbl-line)); background: color-mix(in srgb, var(--wbl-accent) 9%, var(--wbl-surface)); }
.wbs-sync[hidden] { display: none; }
.wbs-sync-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--wbl-surface); color: var(--wbl-accent); }
.wbs-sync-ico svg { width: 20px; height: 20px; }
.wbs-sync-text { display: grid; gap: 2px; font-size: 14px; color: var(--wbl-muted); }
.wbs-sync-text b { color: var(--wbl-ink); font-size: 15px; }
.wbs-sync .wbl-btn { grid-column: 1 / -1; }
@media (min-width: 640px) { .wbs-sync { grid-template-columns: auto minmax(0, 1fr) auto; } .wbs-sync .wbl-btn { grid-column: auto; } }
.wbs-grid { margin-top: 18px; }
.wbs-item { position: relative; min-width: 0; }
.wbs-remove { position: absolute; top: 8px; inset-inline-start: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--wbl-glass); color: var(--wbl-ink); box-shadow: var(--wbl-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wbs-remove[hidden] { display: none; }
.wbs-remove svg { width: 18px; height: 18px; }
.wbs-remove:hover { color: var(--wbl-accent); }
.wbs-empty { margin-top: 18px; }
.wbs-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wbl-form.is-inline { animation: none; } }

/* css/blog/publisher.css */
/* R75 · the publisher's image in the author chip (post page, cards, hero): a round photo or logo, the Weesify mark on
   Weesify's own blog, initials as before when there's no image. */
.wbl-ava.has-img { padding: 0; overflow: hidden; background: var(--wbl-surface, #fff); box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 14%, transparent); }
.wbl-ava.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wbl-ava.is-brand { background: #EAF8F2; }
.wbl-meta.is-light .wbl-ava.has-img { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }

/* css/blog/blocks.css */
/* ==========================================================================
   Weesify Blog · block styles (BLOG-BLOCKS). Prefix: wbx-. The markup BlogBlocks writes into a post's body: callouts,
   checklists, images (inline / wide / full, focal point), galleries, image + text, embeds, buttons, FAQ, toggles,
   spacers, columns, tables and Weesify cards. Shared by the public blog (public.css tokens, wbl-*), Weesify's own blog
   (official.css maps them to the marketing tokens) and the editor in the app (app tokens), so the writer sees what
   readers see. Light, dark and follow-system come from those tokens. Mobile first.
   ========================================================================== */
.wbl-prose, .wbe-prose {
  --wbx-ink: var(--wbl-ink, var(--ink));
  --wbx-text: var(--wbl-text, var(--text));
  --wbx-muted: var(--wbl-muted, var(--text-muted));
  --wbx-line: var(--wbl-line, var(--line));
  --wbx-chip: var(--wbl-chip, var(--surface-sunken));
  --wbx-surface: var(--wbl-surface, var(--surface));
  --wbx-accent: var(--wbl-accent, var(--accent));
  --wbx-on-accent: var(--wbl-on-accent, #fff);
  --wbx-pad: 16px;
  --wbx-r: 16px;
}
@media (min-width: 960px) { .wbl-prose, .wbe-prose { --wbx-pad: 40px; } }

/* text colours and highlights (mixed with the text colour, so they read in light and dark) */
.wbx-tc-red { color: color-mix(in srgb, #E5484D 82%, var(--wbx-text)); }
.wbx-tc-orange { color: color-mix(in srgb, #E8730C 82%, var(--wbx-text)); }
.wbx-tc-green { color: color-mix(in srgb, #0E9F6E 82%, var(--wbx-text)); }
.wbx-tc-blue { color: color-mix(in srgb, #3E7BFA 82%, var(--wbx-text)); }
.wbx-tc-purple { color: color-mix(in srgb, #8E4EC6 82%, var(--wbx-text)); }
.wbx-tc-gray { color: var(--wbx-muted); }
mark[class*="wbx-hl-"], .wbl-prose mark, .wbe-prose mark { color: inherit; border-radius: 4px; padding: 0 .15em; background: color-mix(in srgb, #FFD43B 42%, transparent); }
.wbx-hl-green { background: color-mix(in srgb, #2BD17E 32%, transparent) !important; }
.wbx-hl-blue { background: color-mix(in srgb, #4DA3FF 30%, transparent) !important; }
.wbx-hl-pink { background: color-mix(in srgb, #FF6FAE 30%, transparent) !important; }
.wbl-prose s, .wbe-prose s { text-decoration-thickness: 2px; }
.wbl-prose blockquote cite, .wbe-prose blockquote cite { display: block; margin-top: .5em; font-size: .82em; font-style: normal; color: var(--wbx-muted); }
.wbl-prose blockquote cite::before, .wbe-prose blockquote cite::before { content: "— "; }
.wbl-prose blockquote p, .wbe-prose blockquote p { margin: 0; }

/* checklist */
.wbx-check { list-style: none; padding-inline-start: 0 !important; }
.wbx-check li { position: relative; padding-inline-start: 32px; }
.wbx-check li::before { content: ""; position: absolute; inset-inline-start: 0; top: .32em; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--wbx-line); background: var(--wbx-surface); box-sizing: border-box; }
.wbx-check li.is-done { color: var(--wbx-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wbx-muted) 60%, transparent); }
.wbx-check li.is-done::before { background: var(--wbx-accent) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); border-color: var(--wbx-accent); }

/* callouts (icon drawn with a mask, so it takes the tone's colour) */
.wbx-callout { --wbx-tone: #3E7BFA; position: relative; margin-inline: 0; padding: 14px 16px 14px 48px; border-radius: 14px; color: var(--wbx-text);
  background: color-mix(in srgb, var(--wbx-tone) 10%, var(--wbx-surface)); border: 1px solid color-mix(in srgb, var(--wbx-tone) 28%, transparent); font-size: .96em; line-height: 1.6; }
[dir="rtl"] .wbx-callout { padding: 14px 48px 14px 16px; }
.wbx-callout p { margin: 0; }
.wbx-callout::before { content: ""; position: absolute; inset-inline-start: 16px; top: 16px; width: 20px; height: 20px; background: var(--wbx-tone);
  -webkit-mask: var(--wbx-ic) no-repeat center / contain; mask: var(--wbx-ic) no-repeat center / contain;
  --wbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.wbx-callout.is-tip { --wbx-tone: #0E9F6E; }
.wbx-callout.is-tip::before { --wbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.wbx-callout.is-warning { --wbx-tone: #D97706; }
.wbx-callout.is-warning::before { --wbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

/* images: inline, wide, full; focal point for cropped (full) images */
.wbx-img { margin-inline: 0; }
.wbx-img img { width: 100%; height: auto; }
.wbx-img a { display: block; }
.wbx-img.is-wide { margin-inline: calc(var(--wbx-pad) / -2); }
.wbx-img.is-full { margin-inline: calc(var(--wbx-pad) * -1); }
.wbx-img.is-full img { border-radius: 0 !important; border-inline: 0 !important; max-height: 78vh; object-fit: cover; }
.wbx-img.is-full figcaption { padding-inline: var(--wbx-pad); }
.wbx-fx-10 { --wbx-fx: 10%; } .wbx-fx-20 { --wbx-fx: 20%; } .wbx-fx-30 { --wbx-fx: 30%; } .wbx-fx-40 { --wbx-fx: 40%; }
.wbx-fx-60 { --wbx-fx: 60%; } .wbx-fx-70 { --wbx-fx: 70%; } .wbx-fx-80 { --wbx-fx: 80%; } .wbx-fx-90 { --wbx-fx: 90%; } .wbx-fx-100 { --wbx-fx: 100%; }
.wbx-fy-0 { --wbx-fy: 0%; } .wbx-fy-10 { --wbx-fy: 10%; } .wbx-fy-20 { --wbx-fy: 20%; } .wbx-fy-30 { --wbx-fy: 30%; } .wbx-fy-40 { --wbx-fy: 40%; }
.wbx-fy-60 { --wbx-fy: 60%; } .wbx-fy-70 { --wbx-fy: 70%; } .wbx-fy-80 { --wbx-fy: 80%; } .wbx-fy-90 { --wbx-fy: 90%; } .wbx-fy-100 { --wbx-fy: 100%; }
.wbx-fx-0 { --wbx-fx: 0%; }
[class*="wbx-fx-"] img, img[class*="wbx-fx-"], [class*="wbx-fy-"] img, img[class*="wbx-fy-"] { object-position: var(--wbx-fx, 50%) var(--wbx-fy, 50%); }

/* gallery */
.wbx-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wbx-gallery figure { margin: 0 !important; }
.wbx-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px !important; box-shadow: none !important; }
.wbx-gallery figcaption { font-size: 13px; margin-top: 4px; }
@media (min-width: 640px) { .wbx-gallery.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wbx-gallery.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wbx-gallery { gap: 12px; } }

/* image + text */
.wbx-mt { display: grid; gap: 16px; align-items: center; }
.wbx-mt-media { margin: 0 !important; }
.wbx-mt-media img { width: 100%; border-radius: var(--wbx-r); }
.wbx-mt-body > * + * { margin-top: .7em; }
.wbx-mt-body :where(p, h3, h4) { margin: 0; }
@media (min-width: 640px) { .wbx-mt { grid-template-columns: 1fr 1fr; gap: 28px; } .wbx-mt.is-right .wbx-mt-media { order: 2; } }

/* embeds (16:9 frame) */
.wbx-embed { margin-inline: 0; }
.wbx-embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--wbx-r); overflow: hidden; background: var(--wbx-chip); }
.wbx-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* buttons */
.wbx-btns { display: flex; }
.wbx-btns.is-center { justify-content: center; } .wbx-btns.is-right { justify-content: flex-end; }
.wbx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none !important;
  background: var(--wbx-accent); color: var(--wbx-on-accent) !important; border: 2px solid var(--wbx-accent); transition: transform .15s ease, filter .15s ease; }
.wbx-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wbx-btn.is-secondary { background: color-mix(in srgb, var(--wbx-accent) 14%, transparent); color: var(--wbx-ink) !important; border-color: transparent; }
.wbx-btn.is-outline { background: transparent; color: var(--wbx-ink) !important; border-color: var(--wbx-line); }

/* FAQ and toggles */
.wbx-faq { border: 1px solid var(--wbx-line); border-radius: var(--wbx-r); overflow: hidden; }
.wbx-faq-item + .wbx-faq-item { border-top: 1px solid var(--wbx-line); }
.wbx-faq summary, .wbx-toggle summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; font-weight: 700; color: var(--wbx-ink); }
.wbx-faq summary::-webkit-details-marker, .wbx-toggle summary::-webkit-details-marker { display: none; }
.wbx-faq summary::after, .wbx-toggle summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--wbx-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px; }
.wbx-faq details[open] summary::after, .wbx-toggle[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.wbx-faq-a, .wbx-toggle-body { padding: 0 16px 14px; color: var(--wbx-text); }
.wbx-faq-a > * + *, .wbx-toggle-body > * + * { margin-top: .6em; }
.wbx-faq-a :where(p), .wbx-toggle-body :where(p) { margin: 0; }
.wbx-toggle { border-radius: var(--wbx-r); background: var(--wbx-chip); }
.wbx-faq summary:focus-visible, .wbx-toggle summary:focus-visible { outline: 2px solid var(--wbx-accent); outline-offset: -2px; border-radius: 10px; }

/* spacer and columns */
.wbx-spacer { height: 24px; } .wbx-spacer.is-s { height: 12px; } .wbx-spacer.is-l { height: 48px; } .wbx-spacer.is-xl { height: 88px; }
.wbx-cols { display: grid; gap: 16px; }
.wbx-col > * + * { margin-top: .7em; }
.wbx-col :where(p, h3, h4) { margin: 0; }
@media (min-width: 640px) { .wbx-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Weesify cards */
.wbx-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--wbx-r); border: 1px solid var(--wbx-line); background: var(--wbx-surface); color: var(--wbx-ink) !important;
  text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.wbx-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .35); }
.wbx-card-img { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 0 !important; box-shadow: none !important; display: grid; place-items: center; }
.wbx-card-img.is-empty { background: linear-gradient(135deg, color-mix(in srgb, var(--wbx-accent) 40%, transparent), color-mix(in srgb, var(--wbx-accent) 8%, transparent)); color: var(--wbx-accent); }
.wbx-card-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.wbx-card-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wbx-accent); }
.wbx-card-title { font-size: 1.02em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wbx-card-sub { font-size: 14px; color: var(--wbx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-card-cta { flex: none; display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--wbx-accent); color: var(--wbx-on-accent); font-weight: 700; font-size: 14px; }
@media (min-width: 520px) { .wbx-card-cta { display: inline-flex; } }

/* tables, HTML blocks */
.wbx-table th:empty, .wbx-table td:empty { min-width: 80px; }
.wbx-html > * + * { margin-top: .9em; }

@media (prefers-reduced-motion: reduce) { .wbx-btn, .wbx-card, .wbx-faq summary::after, .wbx-toggle summary::after { transition: none; } .wbx-card:hover, .wbx-btn:hover { transform: none; } }