/* ==========================================================================
   Watily — section pages added 2026-09-24
   Blog (categories, pillars, TOC, author), industries, tools, compare hub.
   Loaded per-route (views/layouts/main.php $__routeCssMap) — no bundle rebuild.
   Colours come from tokens so dark mode flips automatically.
   ========================================================================== */

.wt-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Breadcrumbs */
.wt-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--text-muted,#64748b);margin:0 0 20px}
.wt-crumbs a{color:inherit;text-decoration:none}
.wt-crumbs a:hover{color:var(--wt-orange-600);text-decoration:underline}
.wt-crumbs [aria-current]{color:var(--text-primary,#1e293b);font-weight:600}

/* ---------- Blog listing ---------- */
.wt-blog-hero{display:grid;gap:24px;align-items:end;margin-bottom:28px}
@media(min-width:960px){.wt-blog-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.wt-blog-hero p{max-width:640px}
.wt-blog-search{display:flex;align-items:center;gap:8px;background:var(--wt-surface);border:1px solid var(--wt-border-strong);border-radius:var(--wt-radius-pill);padding:6px 6px 6px 14px;box-shadow:var(--wt-shadow-2)}
[dir="rtl"] .wt-blog-search{padding:6px 14px 6px 6px}
.wt-blog-search .wt-icon{flex:none;width:18px;height:18px;color:var(--text-muted,#64748b)}
.wt-blog-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.95rem;color:var(--text-primary,#1e293b);padding:8px 4px;outline:none}
.wt-blog-search button{flex:none;border:0;border-radius:var(--wt-radius-pill);padding:10px 18px;font:inherit;font-weight:700;font-size:.9rem;background:var(--wt-orange-500);color:#fff;cursor:pointer}
.wt-blog-search button:hover{background:var(--wt-orange-600)}
.wt-blog-search:focus-within{border-color:var(--wt-orange-400);box-shadow:0 0 0 4px rgba(240,108,20,.12)}

.wt-blog-cats{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:0 0 28px;scrollbar-width:thin}
.wt-blog-cats__chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--wt-radius-pill);border:1px solid var(--wt-border-strong);background:var(--wt-surface);color:var(--text-primary,#1e293b);font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.wt-blog-cats__chip .wt-icon{width:16px;height:16px;color:var(--wt-orange-600)}
.wt-blog-cats__chip small{font-size:.75rem;font-weight:700;color:var(--text-muted,#64748b);background:var(--wt-surface-soft);border-radius:var(--wt-radius-pill);padding:1px 8px}
.wt-blog-cats__chip:hover{border-color:var(--wt-orange-300)}
.wt-blog-cats__chip.is-active{background:var(--wt-orange-500);border-color:var(--wt-orange-500);color:#fff}
.wt-blog-cats__chip.is-active .wt-icon,.wt-blog-cats__chip.is-active small{color:#fff;background:transparent}

.wt-blog-results{margin:-8px 0 24px;color:var(--text-muted,#64748b)}
.wt-blog-section-title{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:800;color:var(--text-primary,#1e293b);margin:0 0 18px}

.wt-blog-pillars{margin:0 0 44px}
.wt-blog-pillars__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wt-blog-pillar{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border-radius:var(--wt-radius-lg);background:linear-gradient(160deg,var(--wt-orange-50),var(--wt-surface) 70%);border:1px solid var(--wt-orange-100);text-decoration:none;color:var(--text-primary,#1e293b);transition:transform .2s,box-shadow .2s}
.wt-blog-pillar:hover{transform:translateY(-3px);box-shadow:var(--wt-shadow-orange-sm)}
.wt-blog-pillar__tag{align-self:flex-start;font-size:.72rem;font-weight:800;color:var(--wt-orange-700);background:var(--wt-surface);border:1px solid var(--wt-orange-100);border-radius:var(--wt-radius-pill);padding:3px 10px}
.wt-blog-pillar strong{font-size:1.05rem;line-height:1.45}
.wt-blog-pillar__excerpt{font-size:.88rem;line-height:1.6;color:var(--text-muted,#64748b);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wt-blog-pillar__cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--wt-orange-600)}
.wt-blog-pillar__cta .wt-icon{width:16px;height:16px}

.wt-article-card__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wt-article-card__cat{font-size:.72rem;font-weight:800;color:var(--wt-orange-700);background:var(--wt-orange-50);border-radius:var(--wt-radius-pill);padding:3px 10px}
h3.wt-article-card__title{font-size:1.08rem}

.wt-blog-resources{margin-top:56px}
.wt-blog-resources__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.wt-blog-resources__grid a{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--wt-radius-md);border:1px solid var(--wt-border);background:var(--wt-surface);text-decoration:none;color:var(--text-primary,#1e293b)}
.wt-blog-resources__grid a:hover{border-color:var(--wt-orange-300)}
.wt-blog-resources__grid .wt-icon{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--wt-orange-50);color:var(--wt-orange-600)}
.wt-blog-resources__grid strong{display:block;font-size:.95rem}
.wt-blog-resources__grid small{display:block;margin-top:4px;color:var(--text-muted,#64748b);font-size:.82rem;line-height:1.5}

@media(max-width:1024px){.wt-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wt-blog-grid{grid-template-columns:minmax(0,1fr)}.wt-blog-page{padding-top:32px}}

/* ---------- Article ---------- */
.wt-post__meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:.85rem;color:var(--text-muted,#64748b)}
.wt-post__badge{font-size:.75rem;font-weight:800;color:#fff;background:var(--wt-orange-500);border-radius:var(--wt-radius-pill);padding:3px 10px}
.wt-post__read{display:inline-flex;align-items:center;gap:5px}
.wt-post__read .wt-icon{width:14px;height:14px}
.wt-post__byline{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.9rem;color:var(--text-muted,#64748b)}
.wt-post__byline strong{color:var(--text-primary,#1e293b)}
.wt-post__byline-avatar{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--wt-orange-50);color:var(--wt-orange-600)}
.wt-post__byline-avatar .wt-icon{width:16px;height:16px}

.wt-post-toc{border:1px solid var(--wt-border);border-radius:var(--wt-radius-md);background:var(--wt-surface-soft);padding:14px 18px;margin:0 0 28px}
.wt-post-toc summary{cursor:pointer;font-weight:800;color:var(--text-primary,#1e293b);display:flex;align-items:center;gap:8px}
.wt-post-toc summary .wt-icon{width:18px;height:18px;color:var(--wt-orange-600)}
.wt-post-toc ol{margin:12px 0 0;padding-inline-start:22px;display:grid;gap:6px}
.wt-post-toc a{color:var(--text-primary,#1e293b);text-decoration:none;font-size:.92rem;line-height:1.5}
.wt-post-toc a:hover{color:var(--wt-orange-600);text-decoration:underline}
.wt-post-toc--side{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto}
.wt-post-toc--side ol{padding-inline-start:18px;margin-top:8px}
.wt-post-toc--side a{font-size:.86rem;color:var(--text-muted,#64748b)}
@media(min-width:1025px){.wt-post-toc--inline{display:none}}
@media(max-width:1024px){.wt-post-toc--side{display:none}}
.wt-post__content h2[id]{scroll-margin-top:96px}
.wt-post__content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.93rem;display:block;overflow-x:auto}
.wt-post__content th,.wt-post__content td{border:1px solid var(--wt-border-strong);padding:10px 12px;text-align:start;vertical-align:top}
.wt-post__content thead th{background:var(--wt-orange-50);color:var(--text-primary,#1e293b)}

.wt-post-pillar{display:flex;gap:14px;align-items:flex-start;margin:36px 0 0;padding:18px 20px;border-radius:var(--wt-radius-md);background:var(--wt-orange-50);border:1px solid var(--wt-orange-100)}
.wt-post-pillar__icon .wt-icon{width:28px;height:28px;color:var(--wt-orange-600)}
.wt-post-pillar__kicker{display:block;font-size:.8rem;color:var(--wt-orange-800);font-weight:700;margin-bottom:4px}
.wt-post-pillar a{font-weight:800;color:var(--text-primary,#1e293b);text-decoration:none;line-height:1.5}
.wt-post-pillar a:hover{color:var(--wt-orange-600);text-decoration:underline}

.wt-post-author{display:flex;gap:16px;align-items:flex-start;margin:28px 0 0;padding:20px;border-radius:var(--wt-radius-md);border:1px solid var(--wt-border);background:var(--wt-surface)}
.wt-post-author__avatar{flex:none;width:64px;height:64px;border-radius:16px;background:var(--wt-surface-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.wt-post-author__avatar img{width:100%;height:auto;object-fit:contain}
.wt-post-author__avatar .wt-icon{width:28px;height:28px;color:var(--wt-orange-600)}
.wt-post-author strong{display:block;color:var(--text-primary,#1e293b)}
.wt-post-author small{display:block;color:var(--text-muted,#64748b);margin-top:2px}
.wt-post-author p{margin:8px 0 0;font-size:.9rem;line-height:1.7;color:var(--text-muted,#64748b)}

.wt-post-more{margin-top:40px}
.wt-post-more .wt-post-related__title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.wt-post-more .wt-post-related__title a{font-size:.88rem;font-weight:700;color:var(--wt-orange-600);text-decoration:none}
.wt-post-more__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wt-post-more__card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text-primary,#1e293b);border-radius:var(--wt-radius-md);border:1px solid var(--wt-border);background:var(--wt-surface);overflow:hidden;padding-bottom:14px}
.wt-post-more__card strong{padding:0 14px;font-size:.93rem;line-height:1.5}
.wt-post-more__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--wt-surface-soft)}
.wt-post-more__img img{width:100%;height:100%;object-fit:cover;display:block}
.wt-post-more__card:hover{border-color:var(--wt-orange-300)}
.wt-post__sidebar-text{font-size:.9rem;color:var(--text-muted,#64748b);margin:0 0 16px;line-height:1.6}
.wt-post__sidebar-btn{width:100%;justify-content:center}
.wt-post__share{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.wt-post__share .wt-btn{font-size:.82rem;padding:7px 12px;gap:6px}

/* ---------- Shared section-page primitives (industries / tools / compare hub) ---------- */
.wt-sec-hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--wt-orange-50) 0%,var(--wt-bg-soft,#FAF8F5) 100%)}
.wt-sec-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--wt-orange-700);background:var(--wt-surface);border:1px solid var(--wt-orange-100);border-radius:var(--wt-radius-pill);padding:5px 12px;margin-bottom:14px}
.wt-sec-hero__eyebrow .wt-icon{width:16px;height:16px}
.wt-sec-hero h1{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;line-height:1.25;margin:0 0 14px;color:var(--text-primary,#0F172A);max-width:860px}
.wt-sec-hero__lead{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.8;color:var(--text-muted,#475569);max-width:780px;margin:0 0 20px}
.wt-sec-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.wt-sec-chips li{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--text-primary,#1e293b);background:var(--wt-surface);border:1px solid var(--wt-border-strong);border-radius:var(--wt-radius-pill);padding:6px 12px}
.wt-sec-chips .wt-icon{width:14px;height:14px;color:#16a34a}
.wt-sec-actions{display:flex;flex-wrap:wrap;gap:10px}
.wt-sec-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--wt-radius-pill);font-weight:800;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer}
.wt-sec-btn .wt-icon{width:18px;height:18px}
.wt-sec-btn--primary{background:linear-gradient(135deg,#F06C14,#B74D0D);color:#fff;box-shadow:var(--wt-shadow-orange-sm)}
.wt-sec-btn--primary:hover{transform:translateY(-1px);color:#fff}
.wt-sec-btn--wa{background:#25D366;color:#083b1d}
.wt-sec-btn--ghost{background:var(--wt-surface);border-color:var(--wt-border-strong);color:var(--text-primary,#1e293b)}
.wt-sec{padding:52px 0}
.wt-sec--soft{background:var(--wt-surface-soft)}
.wt-sec h2{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;margin:0 0 10px;color:var(--text-primary,#0F172A)}
.wt-sec__intro{color:var(--text-muted,#64748b);font-size:1.02rem;line-height:1.75;margin:0 0 26px;max-width:760px}
.wt-sec-summary{padding:20px 22px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px solid var(--wt-border);border-inline-start:4px solid var(--wt-orange-500);font-size:1.02rem;line-height:1.85;color:var(--text-primary,#1e293b)}
.wt-sec-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wt-sec-card{padding:20px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px solid var(--wt-border);box-shadow:var(--wt-shadow-1)}
.wt-sec-card h3{font-size:1.05rem;font-weight:800;margin:0 0 8px;color:var(--text-primary,#1e293b)}
.wt-sec-card p{margin:0;color:var(--text-muted,#64748b);line-height:1.7;font-size:.94rem}
.wt-sec-card ul{margin:12px 0 0;padding-inline-start:18px;display:grid;gap:6px;color:var(--text-primary,#334155);font-size:.92rem;line-height:1.6}
.wt-sec-card__icon{display:inline-flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:var(--wt-orange-50);color:var(--wt-orange-600);margin-bottom:12px}
.wt-sec-card__icon .wt-icon{width:20px;height:20px}
.wt-sec-card--pain{border-inline-start:4px solid #ef4444}
.wt-sec-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;font-size:.88rem;color:var(--wt-orange-600);text-decoration:none}
.wt-flow{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.wt-flow__card{padding:20px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px solid var(--wt-border)}
.wt-flow__trigger{display:inline-block;font-size:.78rem;font-weight:800;color:#0F766E;background:#E6F7F7;border-radius:var(--wt-radius-pill);padding:3px 10px;margin:6px 0 12px}
.wt-flow__card ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:f}
.wt-flow__card li{position:relative;padding-inline-start:34px;font-size:.92rem;line-height:1.6;color:var(--text-primary,#334155);counter-increment:f}
.wt-flow__card li::before{content:counter(f);position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--wt-orange-500);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.wt-flow__result{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--wt-border-strong);font-size:.9rem;font-weight:700;color:#15803d}
.wt-tpl{padding:18px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px solid var(--wt-border);display:flex;flex-direction:column;gap:10px}
.wt-tpl__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wt-tpl__head strong{font-size:.98rem;color:var(--text-primary,#1e293b)}
.wt-tpl__cat{font-size:.72rem;font-weight:800;border-radius:var(--wt-radius-pill);padding:3px 10px;white-space:nowrap}
.wt-tpl__cat--utility{background:#E6F7F7;color:#006B6B}
.wt-tpl__cat--marketing{background:#FFF4E6;color:#B85C00}
.wt-tpl__cat--authentication{background:#E8F7EF;color:#0F8540}
.wt-tpl__bubble{white-space:pre-line;background:#E7FFDB;color:#0b1f12;border-radius:12px;border-start-start-radius:4px;padding:12px 14px;font-size:.92rem;line-height:1.75}
.wt-tpl__btns{display:flex;flex-wrap:wrap;gap:6px}
.wt-tpl__btns span{font-size:.8rem;font-weight:700;color:#0b6e4f;background:var(--wt-surface);border:1px solid #bfe9cf;border-radius:8px;padding:5px 10px}
.wt-tpl__meta{font-size:.82rem;color:var(--text-muted,#64748b);line-height:1.6}
.wt-tpl__copy{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--wt-border-strong);background:var(--wt-surface);color:var(--text-primary,#1e293b);border-radius:var(--wt-radius-pill);padding:7px 14px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.wt-tpl__copy .wt-icon{width:15px;height:15px}
.wt-tpl__copy.is-copied{background:#16a34a;border-color:#16a34a;color:#fff}
.wt-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.wt-kpi{padding:16px 18px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px dashed var(--wt-border-strong)}
.wt-kpi strong{display:block;color:var(--text-primary,#1e293b);margin-bottom:6px}
.wt-kpi span{font-size:.9rem;color:var(--text-muted,#64748b);line-height:1.6}
.wt-steps{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.wt-steps li{position:relative;padding:14px 16px;padding-inline-start:56px;border-radius:var(--wt-radius-md);background:var(--wt-surface);border:1px solid var(--wt-border);counter-increment:s;line-height:1.6;color:var(--text-primary,#334155)}
.wt-steps li::before{content:counter(s);position:absolute;inset-inline-start:14px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--wt-orange-500);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.wt-faq details{background:var(--wt-surface);border:1px solid var(--wt-border);border-radius:var(--wt-radius-md);margin-bottom:10px}
.wt-faq summary{cursor:pointer;padding:16px 18px;font-weight:800;color:var(--text-primary,#1e293b);list-style:none}
.wt-faq summary::-webkit-details-marker{display:none}
.wt-faq summary::after{content:'+';float:inline-end;font-weight:800;color:var(--wt-orange-600)}
.wt-faq details[open] summary::after{content:'–'}
.wt-faq details p{margin:0;padding:0 18px 16px;color:var(--text-muted,#475569);line-height:1.8}
.wt-links{display:flex;flex-wrap:wrap;gap:10px}
.wt-links a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--wt-radius-pill);border:1px solid var(--wt-border-strong);background:var(--wt-surface);color:var(--text-primary,#1e293b);text-decoration:none;font-size:.9rem;font-weight:600}
.wt-links a:hover{border-color:var(--wt-orange-300);color:var(--wt-orange-700)}
.wt-cta-band{border-radius:var(--wt-radius-xl);padding:36px 28px;background:linear-gradient(135deg,#1F1A17,#3A2A1F);color:#fff;text-align:center}
.wt-cta-band h2{color:#fff}
.wt-cta-band p{color:rgba(255,255,255,.8);margin:0 auto 20px;max-width:620px;line-height:1.7}
.wt-cta-band .wt-sec-actions{justify-content:center}
.wt-table-wrap{overflow-x:auto;border-radius:var(--wt-radius-lg);border:1px solid var(--wt-border);background:var(--wt-surface);box-shadow:var(--wt-shadow-2)}
.wt-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px}
.wt-table th,.wt-table td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--wt-border);vertical-align:top;color:var(--text-primary,#334155)}
.wt-table thead th{background:var(--wt-orange-50);font-weight:800;color:var(--text-primary,#0F172A);position:sticky;top:0}
.wt-table tbody tr.is-us{background:rgba(240,108,20,.05)}
.wt-table td a{color:var(--wt-orange-700);font-weight:700}
.wt-note{font-size:.84rem;color:var(--text-muted,#64748b);line-height:1.7;margin:14px 0 0}
.wt-prose h2{margin-top:32px}
.wt-prose p,.wt-prose li{line-height:1.9;color:var(--text-primary,#334155)}
.wt-prose table{width:100%;border-collapse:collapse;margin:16px 0;display:block;overflow-x:auto}
.wt-prose th,.wt-prose td{border:1px solid var(--wt-border-strong);padding:10px 12px;text-align:start}
.wt-prose thead th{background:var(--wt-orange-50)}

/* Industries hub */
.wt-ind-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wt-ind-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--wt-radius-lg);background:var(--wt-surface);border:1px solid var(--wt-border);text-decoration:none;color:var(--text-primary,#1e293b);transition:transform .2s,box-shadow .2s}
.wt-ind-card:hover{transform:translateY(-3px);box-shadow:var(--wt-shadow-3)}
.wt-ind-card strong{font-size:1.1rem}
.wt-ind-card span{color:var(--text-muted,#64748b);font-size:.92rem;line-height:1.6}

/* Template library filters */
.wt-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.wt-filter button{border:1px solid var(--wt-border-strong);background:var(--wt-surface);color:var(--text-primary,#1e293b);border-radius:var(--wt-radius-pill);padding:8px 14px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.wt-filter button[aria-pressed="true"]{background:var(--wt-orange-500);border-color:var(--wt-orange-500);color:#fff}
.wt-filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:10px}
.wt-filter-row label{font-size:.85rem;font-weight:700;color:var(--text-muted,#64748b)}
.wt-tpl-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.wt-tpl[hidden]{display:none}

/* Cost calculator */
.wt-calc{display:grid;gap:20px}
@media(min-width:960px){.wt-calc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.wt-calc__panel{padding:22px;border-radius:var(--wt-radius-lg);background:var(--wt-surface);border:1px solid var(--wt-border);box-shadow:var(--wt-shadow-2)}
.wt-calc__row{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--wt-border)}
.wt-calc__row:last-child{border-bottom:0}
.wt-calc__row label{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:var(--text-primary,#1e293b)}
.wt-calc__row label small{font-weight:600;color:var(--text-muted,#64748b)}
.wt-calc__row input[type=number]{width:100%;font:inherit;font-size:1rem;padding:10px 12px;border-radius:10px;border:1px solid var(--wt-border-strong);background:var(--wt-surface);color:var(--text-primary,#1e293b)}
.wt-calc__row input[type=range]{width:100%;accent-color:#F06C14}
.wt-calc__hint{font-size:.82rem;color:var(--text-muted,#64748b);line-height:1.6}
.wt-calc__result{position:sticky;top:96px}
.wt-calc__total{font-size:clamp(2rem,4vw,2.6rem);font-weight:800;color:var(--text-primary,#0F172A);margin:4px 0 2px}
.wt-calc__lines{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.wt-calc__lines li{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;color:var(--text-primary,#334155);padding:8px 10px;border-radius:10px;background:var(--wt-surface-soft)}
.wt-calc__lines li b{white-space:nowrap}
.wt-calc__plan{margin-top:16px;padding:14px;border-radius:12px;background:var(--wt-orange-50);color:var(--wt-orange-900);font-size:.9rem;line-height:1.7}
.wt-calc__toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-primary,#334155)}
.wt-tpl__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--text-muted,#64748b);background:var(--wt-surface-soft);border:1px solid var(--wt-border);border-radius:6px;padding:2px 8px}

/* ==========================================================================
   Design review 2026-09-25 — spacing, rhythm, RTL and table tidy-up
   (overrides kept together so they are easy to audit / revert)
   ========================================================================== */

/* Top gap under the sticky header: <main> pads 80px AND each page wrapper
   padded another 56–64px, leaving ~140px of blank band above the crumbs
   (and a plain strip above the hero gradient). Zero main's padding on these
   routes and let the wrapper own a single 44px gap. */
#wt-main:has(> .wt-blog-page:first-child),
#wt-main:has(> .wt-post:first-child),
#wt-main:has(> .wt-sec-hero:first-child),
#wt-main:has(> .cmp-hero){padding-top:0}
#wt-main > .cmp-hero{padding-top:44px}
.wt-blog-page,.wt-post{padding-top:44px}
.wt-sec-hero{padding:44px 0 44px}
@media(max-width:640px){.wt-blog-page,.wt-post{padding-top:24px}.wt-sec-hero{padding:28px 0 32px}#wt-main > .cmp-hero{padding-top:28px}}

/* Blog hero: eyebrow was glued to the H1; Arabic must not be letter-spaced */
.wt-blog-hero .wt-blog-page__eyebrow{margin:0 0 10px}
[dir="rtl"] .wt-blog-page__eyebrow{letter-spacing:0}
.wt-blog-hero h1{line-height:1.3;margin:0 0 14px}
.wt-blog-hero p:not(.wt-blog-page__eyebrow){line-height:1.8}

/* Category chips: wrap on desktop instead of clipping the last chip;
   on phones scroll edge-to-edge and bring the active chip to the front. */
@media(min-width:768px){.wt-blog-cats{flex-wrap:wrap;overflow:visible;padding-bottom:4px}}
@media(max-width:767px){
  .wt-blog-cats{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none}
  .wt-blog-cats::-webkit-scrollbar{display:none}
  .wt-blog-cats__chip.is-active{order:-1}
}

/* RTL "forward" arrows: views already pick arrow-left for Arabic, and the
   global [dir=rtl] icon flip mirrored it back to pointing right. */
[dir="rtl"] .wt-icon[data-icon="arrow-left"]{transform:none}

/* Article body — Arabic reading rhythm */
[dir="rtl"] .wt-post__content{line-height:1.9}
.wt-post__content li{margin-bottom:.5em}
.wt-post__content blockquote{border-radius:0;border-start-end-radius:10px;border-end-end-radius:10px;background:var(--wt-surface-soft);font-style:normal;color:var(--text-primary,#1e293b)}

/* Tables in articles and prose: full width on desktop, horizontal scroll
   (never squeezed into 1-word lines) on phones. */
.wt-post__main{min-width:0} /* grid item: let wide tables scroll instead of widening the page */
.wt-post__content table,.wt-prose table{-webkit-overflow-scrolling:touch;max-width:100%}
.wt-post__content th,.wt-prose th{white-space:normal;font-weight:800}
@media(min-width:768px){.wt-post__content table,.wt-prose table{display:table}.wt-prose > table{max-width:880px}}
@media(max-width:767px){
  .wt-post__content table,.wt-prose table{font-size:.88rem}
  .wt-post__content th,.wt-post__content td,.wt-prose th,.wt-prose td{min-width:8.5rem;padding:9px 10px;line-height:1.7}
}

/* Desktop article sidebar: the whole aside was sticky, so with the TOC it
   grew taller than the viewport and the share card became unreachable.
   Now the CTA/share scroll away and only the TOC sticks below the header. */
@media(min-width:1025px){
  .wt-post__sidebar:has(.wt-post-toc--side){position:static;align-self:stretch;display:flex;flex-direction:column}
  .wt-post__sidebar .wt-post-toc--side{order:3;position:sticky;top:104px;max-height:calc(100vh - 128px);overscroll-behavior:contain}
}
.wt-post-toc--side h4{margin-bottom:10px}
.wt-post-toc--side ol{gap:8px}
.wt-post-toc--side a{line-height:1.6}

/* Section pages: heading → content spacing was 10px (cards touched H2) */
.wt-sec h2{margin-bottom:20px;line-height:1.35}
.wt-sec h2 + .wt-sec__intro{margin-top:-8px}
.wt-sec .wt-links + h2{margin-top:14px}
.wt-cta-band h2{margin-bottom:10px}
.wt-sec-hero h1{line-height:1.3}

/* 5- or 6-card grids: 3 columns (3+2 / 3+3) instead of 4 + a lone orphan */
@media(min-width:960px){
  .wt-sec-grid:has(> :nth-child(5):last-child),
  .wt-sec-grid:has(> :nth-child(6):last-child),
  .wt-blog-pillars__grid:has(> :nth-child(5):last-child),
  .wt-blog-pillars__grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.wt-ind-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* Automation flows: 2×2 instead of four cramped 280px columns */
.wt-flow{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.wt-flow__trigger{border-radius:10px;line-height:1.6;padding:4px 10px}

/* FAQ: the +/– sign dropped under long wrapped questions on phones */
.wt-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;line-height:1.6}
.wt-faq summary::after{float:none;flex:none;font-size:1.2rem;line-height:1.3}

/* Long-sentence chip lists inside sections (calculator assumptions) */
.wt-sec .wt-sec-chips li{border-radius:12px;align-items:flex-start;line-height:1.7;font-weight:600}
.wt-sec .wt-sec-chips li .wt-icon{margin-top:.35em;flex:none}

/* Prose blocks: cap line length (~75ch) instead of 1200px Arabic lines */
.wt-prose > *{max-width:880px}
.wt-prose p{margin:0 0 1em}
.wt-prose h2{margin:36px 0 12px}
.wt-prose h3{margin:24px 0 8px}
.wt-prose ul,.wt-prose ol{padding-inline-start:1.4em;margin:0 0 1em}
.wt-prose li{margin-bottom:.35em}

/* Calculator: unit hint wrapped as "ريال/ … رسالة" on phones */
.wt-calc__row label{flex-wrap:wrap;align-items:baseline;line-height:1.5}
.wt-calc__row label small{white-space:nowrap}
.wt-calc__result{top:104px}

/* Template cards: copy buttons aligned to the card bottom */
.wt-tpl__copy{margin-top:auto}

/* Comparison tables: keep the platform/feature column pinned while the
   rest scrolls sideways; give phones enough width per column. */
.wt-table th:first-child,.wt-table td:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--wt-surface)}
.wt-table thead th:first-child{z-index:2;background:var(--wt-orange-50)}
.wt-table tbody tr.is-us td:first-child{background:linear-gradient(rgba(240,108,20,.05),rgba(240,108,20,.05)),var(--wt-surface)}
@media(max-width:640px){
  .wt-table{min-width:880px;font-size:.88rem}
  .wt-table th,.wt-table td{padding:12px}
  .cmp-table-wrap .cmp-table{min-width:560px;font-size:.88rem}
  .cmp-table-wrap .cmp-table th,.cmp-table-wrap .cmp-table td{padding:12px 14px;line-height:1.65}
}