@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-400.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-500.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-600.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-700.ttf") format("truetype"); }
html[lang="ar"] { --font: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
html[lang="ar"] :is(button, input, select, textarea) { font-family: var(--font); }

:root {
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --sidebar: #FAFAF8;
  --border: #E3E1D9;
  --text: #2C2C2A;
  --text2: #5F5E5A;
  --muted: #888780;
  --accent-bg: #E6F1FB;
  --accent: #185FA5;
  --accent-dark: #0C447C;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

.lang-toggle {
  display: flex;
  gap: 6px;
}

.lang-toggle a {
  padding: 5px 12px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  font-size: 13px;
  color: var(--text2);
}

.lang-toggle a.active {
  background: var(--accent-bg);
  color: var(--accent-dark);
  border-color: var(--accent-bg);
}

.sidebar {
  background: var(--sidebar);
  border-inline-end: 0.5px solid var(--border);
  padding: 16px 12px 40px;
  overflow-y: auto;
}

.search-box {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  font-size: 13px;
  font-family: var(--font);
}

.nav-category {
  margin-bottom: 4px;
}

.nav-category > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 8px 4px;
}

.nav-category > summary::-webkit-details-marker { display: none; }

.nav-link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text2);
  margin-bottom: 1px;
}

.nav-link:hover { background: var(--surface); text-decoration: none; }

.nav-link.active {
  background: var(--accent-bg);
  color: var(--accent-dark);
  font-weight: 600;
}

.content {
  padding: 32px 40px;
  max-width: 760px;
}

.breadcrumb {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 14px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 18px;
}

.meta b { color: var(--text); }

.disclaimer {
  background: #FAEEDA;
  color: #633806;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

.mockup-wrap {
  border: 0.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--surface);
}

.mockup-wrap img { display: block; width: 100%; height: auto; }

.mockup-caption {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 12px;
  border-top: 0.5px solid var(--border);
}

h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 10px;
}

ol, ul { padding-inline-start: 22px; margin: 0 0 8px; }
li { margin-bottom: 6px; }

.related-list a {
  display: inline-block;
  margin-inline-end: 14px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.cat-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.cat-card h3 { margin: 0 0 10px; font-size: 15px; }
.cat-card ul { margin: 0; padding-inline-start: 18px; font-size: 13.5px; }
.cat-card li { margin-bottom: 5px; }

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 20px;
  font-family: var(--font);
  background: var(--bg);
}

.landing a {
  padding: 14px 40px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.landing a:hover { background: var(--accent-bg); color: var(--accent-dark); text-decoration: none; }

[dir="rtl"] .nav-category > summary { text-align: right; }

.menu-toggle-btn {
  display: none;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.open { display: block; }
  .content { padding: 20px; }
  .menu-toggle-btn { display: inline-block; }
}

.callout {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 14px;
}
.callout-note { background: var(--accent-bg); color: var(--accent-dark); }
.callout-tip { background: #EAF3DE; color: #27500A; }
.callout-warn { background: #FAEEDA; color: #633806; }

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.doc-table th, .doc-table td {
  border: 0.5px solid var(--border);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}
.doc-table th { background: var(--sidebar); font-weight: 600; }
.doc-table tr:nth-child(even) td { background: var(--bg); }
code {
  background: var(--sidebar);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
}

#guide-search-results {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 9999;
}
.gs-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text);
}
.gs-item:hover { background: var(--accent-bg); text-decoration: none; }
.gs-title { font-weight: 600; font-size: 14px; }
.gs-module { font-size: 11.5px; color: var(--muted); margin: 1px 0 3px; }
.gs-snippet { font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.gs-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }
mark { background: #FAC775; border-radius: 2px; padding: 0 1px; }

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}
.hero-title {
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  margin: 24px 0 32px;
}
.hero-search {
  position: relative;
  max-width: 720px;
  margin: 0 auto 40px;
}
.hero-search input {
  width: 100%;
  padding: 16px 22px;
  font-size: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-family: var(--font);
}
.hero-search input:focus {
  outline: none;
  border-color: #E8564F;
  box-shadow: 0 2px 14px rgba(232,86,79,0.18);
}
.hero-search #guide-search-results { top: 58px; }
.hero-banner { margin: 0 0 40px; }

.site-footer {
  margin-top: 64px;
  background: #2C2C34;
  color: #C9C7CE;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-col h4 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}
.footer-col a {
  display: block;
  color: #C9C7CE;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.footer-col a:hover { color: #FFFFFF; text-decoration: none; }
.footer-brand-col .brand { color: #FFFFFF; }
.footer-brand-col p { font-size: 13.5px; line-height: 1.7; margin: 12px 0 0; max-width: 300px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  padding: 18px 24px;
  font-size: 12.5px;
  color: #8E8C96;
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

[dir="rtl"] .hero-title, [dir="rtl"] .hero-search input { text-align: right; }
[dir="rtl"] .doc-table th, [dir="rtl"] .doc-table td { text-align: right; }
[dir="rtl"] .callout { text-align: right; }
[dir="rtl"] .footer-col, [dir="rtl"] .footer-brand-col p { text-align: right; }
[dir="rtl"] .gs-item { text-align: right; }
[dir="rtl"] code { direction: ltr; display: inline-block; }
[dir="rtl"] .content h1, [dir="rtl"] .content h2, [dir="rtl"] .content h3 { text-align: right; }
[dir="rtl"] .content p, [dir="rtl"] .content li { text-align: right; }

/* last-updated stamp under the article title */
.doc-updated{
  margin:-.35rem 0 1.4rem;
  font-size:.82rem;
  letter-spacing:.01em;
  color:#8a8a95;
}
.doc-updated time{border-bottom:1px dotted #d6d6de;padding-bottom:1px;}

/* 2026 experience refresh */
:root {
  --bg: #f7f8fc;
  --surface: #fff;
  --surface-soft: #f0f3ff;
  --border: #e5e7ef;
  --text: #18191f;
  --text2: #5b6070;
  --muted: #7b8090;
  --accent: #e44d47;
  --accent-dark: #b92f2b;
  --accent-bg: #fff0ee;
  --violet: #5b5bd6;
  --shadow-sm: 0 1px 2px rgba(24,25,31,.05), 0 8px 24px rgba(24,25,31,.05);
  --shadow-lg: 0 18px 60px rgba(24,25,31,.12);
  --radius: 14px;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); line-height: 1.65; }
a:focus-visible, input:focus-visible { outline: 3px solid rgba(91,91,214,.28); outline-offset: 3px; }
.topbar {
  min-height: 72px; padding: 14px clamp(20px,4vw,64px); border-bottom: 1px solid rgba(229,231,239,.8);
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.brand { font-size: 15px; }
.brand img { height: 30px !important; }
.brand-label { border-inline-start: 1px solid var(--border); padding-inline-start: 12px; color: var(--text2); font-weight: 500; }
.header-releases { margin-inline-start:20px; padding:7px 11px; color:var(--accent-dark); background:var(--accent-bg); border-radius:999px; font-size:12px; font-weight:700; }
.header-releases:hover { color:#fff; background:var(--accent); text-decoration:none; }
.lang-toggle { align-items:center; gap:10px; margin-inline-start:auto; }
.lang-toggle a { border: 0; padding: 9px 14px; font-weight: 600; color: var(--text2); }
.lang-toggle .dashboard-link { color: #fff; background: var(--text); border-radius: 999px; padding-inline: 18px; }
.lang-toggle .dashboard-link:hover { background: var(--accent); color: #fff; }
.home-main { overflow: hidden; }
.hero-new {
  position: relative; isolation: isolate; min-height: 510px; padding: 88px 24px 112px; display: grid; place-items: center;
  color: #fff; background: #191a22;
}
.hero-new::before { content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(circle at 18% 20%,rgba(228,77,71,.45),transparent 32%),radial-gradient(circle at 86% 22%,rgba(91,91,214,.4),transparent 30%),linear-gradient(135deg,#181920,#252638); }
.hero-new::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent); }
.hero-inner { width:min(780px,100%); text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 20px; padding:7px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); color:#f7c8c5; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:#ff716a; box-shadow:0 0 0 5px rgba(255,113,106,.14); }
.hero-new h1 { margin:0; font-size:clamp(38px,6vw,64px); line-height:1.08; letter-spacing:-.045em; font-weight:750; }
.hero-copy { max-width:620px; margin:20px auto 32px; color:#c8cad5; font-size:clamp(16px,2vw,19px); }
.hero-search { max-width:680px; margin:0 auto; }
.hero-search::before { content:"⌕"; position:absolute; z-index:2; inset-inline-start:20px; top:12px; color:#74798b; font-size:29px; line-height:1; transform:rotate(-20deg); }
.hero-search input { height:64px; padding:0 58px 0 58px; border:0; border-radius:18px; font-size:16px; color:var(--text); box-shadow:var(--shadow-lg); }
[dir="rtl"] .hero-search input { padding-inline:58px; }
.hero-search input:focus { border:0; box-shadow:0 0 0 4px rgba(228,77,71,.25),var(--shadow-lg); }
.hero-search #guide-search-results { top:72px; text-align:start; border-radius:16px; overflow:hidden; }
.search-hint { margin:14px 0 0; color:#989ba9; font-size:12px; }
.home-container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.quick-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:-48px; }
.quick-card { display:flex; align-items:center; gap:14px; min-height:96px; padding:18px; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); transition:.2s ease; }
.quick-card:hover { transform:translateY(-4px); border-color:#d5d7e2; box-shadow:0 14px 30px rgba(24,25,31,.1); text-decoration:none; }
.quick-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:13px; background:var(--accent-bg); color:var(--accent); font-size:19px; font-weight:800; }
.quick-card:nth-child(2) .quick-icon { background:#eeefff; color:var(--violet); }
.quick-card:nth-child(3) .quick-icon { background:#eaf7f1; color:#18845d; }
.quick-card:nth-child(4) .quick-icon { background:#fff5df; color:#a76a00; }
.quick-card strong { display:block; font-size:14px; }
.quick-card span:last-child { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.home-section { padding:82px 0 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }
.section-kicker { margin:0 0 7px; color:var(--accent); font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.section-heading h2 { margin:0; font-size:clamp(26px,4vw,36px); line-height:1.2; letter-spacing:-.025em; }
.section-heading p { max-width:520px; margin:8px 0 0; color:var(--text2); }
.view-all { white-space:nowrap; color:var(--text); font-size:13px; font-weight:700; }
.view-all:hover { color:var(--accent); text-decoration:none; }
.release-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:18px; }
.release-card { display:flex; flex-direction:column; min-height:270px; padding:24px; color:var(--text); border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); transition:.2s ease; }
.release-card:first-child { color:#fff; border:0; background:linear-gradient(145deg,#df4d47,#b72e47); }
.release-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(24,25,31,.1); text-decoration:none; }
.release-meta { display:flex; align-items:center; gap:8px; margin-bottom:auto; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.release-card:first-child .release-meta,.release-card:first-child p { color:#ffd7d4; }
.new-pill { padding:5px 8px; color:var(--accent-dark); background:var(--accent-bg); border-radius:999px; }
.release-card:first-child .new-pill { color:#fff; background:rgba(255,255,255,.18); }
.release-card h3 { margin:24px 0 9px; font-size:21px; line-height:1.25; }
.release-card p { margin:0 0 22px; color:var(--text2); font-size:13px; }
.release-arrow { font-size:20px; }
.topics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.topic-card { position:relative; min-height:170px; padding:24px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:20px; transition:.2s ease; }
.topic-card:hover { border-color:#cfd1dc; transform:translateY(-3px); box-shadow:var(--shadow-sm); text-decoration:none; }
.topic-number { display:block; margin-bottom:28px; color:var(--accent); font-size:12px; font-weight:800; }
.topic-card h3 { margin:0 34px 7px 0; font-size:18px; }
[dir="rtl"] .topic-card h3 { margin:0 0 7px 34px; }
.topic-card p { margin:0; color:var(--muted); font-size:13px; }
.topic-card::after { content:"↗"; position:absolute; inset-inline-end:22px; top:22px; color:#aaadba; }
.browse-note { padding-bottom:84px; }
.article-library { padding-top:80px; padding-bottom:96px; }
.article-total { flex:0 0 auto; padding:7px 12px; color:var(--text2); background:#fff; border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:700; }
.article-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.article-group { padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); }
.article-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.article-group-heading h3 { margin:0; font-size:16px; line-height:1.3; }
.article-group-heading span { flex:0 0 auto; color:var(--muted); font-size:11px; }
.article-group ul { margin:0; padding:0; list-style:none; }
.article-group li { margin:0; }
.article-group a { display:block; padding:7px 8px; margin:0 -8px; border-radius:8px; color:var(--text2); font-size:13px; line-height:1.35; }
.article-group a:hover { color:var(--accent-dark); background:var(--accent-bg); text-decoration:none; }
.category-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.category-directory-card { position:relative; min-height:150px; padding:22px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); transition:.2s ease; }
.category-directory-card:hover { transform:translateY(-3px); border-color:#cfd1dc; box-shadow:0 14px 30px rgba(24,25,31,.09); text-decoration:none; }
.category-directory-number { color:var(--accent); font-size:11px; font-weight:800; }
.category-directory-number { position:absolute; inset-inline-end:22px; top:24px; }
.category-directory-icon { display:grid; place-items:center; width:44px; height:44px; color:var(--accent); background:var(--accent-bg); border-radius:13px; font-size:22px !important; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.category-directory-card:nth-child(3n+2) .category-directory-icon { color:var(--violet); background:#eeefff; }
.category-directory-card:nth-child(3n) .category-directory-icon { color:#18845d; background:#eaf7f1; }
.category-directory-card h3 { margin:22px 32px 5px 0; font-size:17px; line-height:1.3; }
[dir="rtl"] .category-directory-card h3 { margin:22px 0 5px 32px; }
.category-directory-card p { margin:0; color:var(--muted); font-size:12px; }
.category-directory-card::after { content:"→"; position:absolute; inset-inline-end:21px; bottom:21px; color:var(--muted); font-size:18px; }
[dir="rtl"] .category-directory-card::after { content:"←"; }
.category-page { min-height:calc(100vh - 72px); padding:64px 0 96px; }
.category-back { display:inline-flex; margin-bottom:28px; color:var(--text2); font-size:13px; font-weight:650; }
.category-back:hover { color:var(--accent); text-decoration:none; }
.category-page-head { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.category-page-head h1 { margin:0; font-size:clamp(34px,6vw,54px); line-height:1.1; letter-spacing:-.035em; }
.category-page-head p { margin:12px 0 0; color:var(--text2); }
.category-count { flex:0 0 auto; padding:8px 13px; background:#fff; border:1px solid var(--border); border-radius:999px; color:var(--text2); font-size:12px; font-weight:700; }
.category-articles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:30px; }
.category-article-card { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding:17px 20px; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:14px; font-size:14px; font-weight:600; transition:.18s ease; }
.category-article-card:hover { color:var(--accent-dark); border-color:#efb5b1; background:var(--accent-bg); transform:translateY(-2px); text-decoration:none; }
.category-article-arrow { color:var(--muted); font-size:17px; }
.category-article-meta { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:500; }
.article-metrics { display:flex; align-items:center; gap:9px; margin:-8px 0 24px; color:var(--muted); font-size:12px; }
.article-metrics b { color:var(--text2); font-weight:700; }
.metric-dot { color:#c1c3cc; }
.releases-page { min-height:calc(100vh - 72px); padding:72px 0 110px; }
.releases-hero { max-width:740px; }
.releases-hero h1 { margin:0; font-size:clamp(40px,7vw,68px); line-height:1.05; letter-spacing:-.045em; }
.releases-hero > p:last-child { margin:20px 0 0; color:var(--text2); font-size:18px; }
.releases-empty { display:grid; place-items:center; min-height:300px; margin-top:50px; padding:40px; text-align:center; background:#fff; border:1px dashed #cfd1dc; border-radius:24px; }
.releases-empty-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 18px; color:var(--accent); background:var(--accent-bg); border-radius:18px; font-size:24px; font-weight:800; }
.releases-empty h2 { margin:0 0 8px; font-size:23px; }
.releases-empty p { max-width:470px; margin:0; color:var(--text2); }
.header-releases.active { color:#fff; background:var(--accent); }
#new-releases, .home-main .quick-grid { display:none; }
.site-footer { margin-top:0; }
.footer-inner { max-width:1160px; }
.content { width:min(100%,800px); max-width:800px; padding:48px clamp(20px,5vw,56px) 72px; }
.content h1 { font-size:clamp(30px,5vw,42px); line-height:1.18; letter-spacing:-.025em; }
.content h2 { margin-top:38px; font-size:21px; }
.mockup-wrap { border-radius:18px; box-shadow:var(--shadow-sm); }
.callout { border-radius:14px; }
@media (max-width:900px) {
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .release-grid { grid-template-columns:1fr 1fr; }
  .release-card:first-child { grid-column:1/-1; }
  .topics-grid { grid-template-columns:repeat(2,1fr); }
  .article-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .topbar { min-height:64px; padding:10px 16px; }
  .brand-label { display:none; }
  .header-releases { margin-inline-start:6px; padding:7px 9px; font-size:11px; }
  .lang-toggle a { padding:8px; }
  .lang-toggle .dashboard-link { display:none; }
  .hero-new { min-height:460px; padding:66px 20px 100px; }
  .hero-new h1 { font-size:39px; }
  .hero-copy { font-size:16px; }
  .quick-grid,.release-grid,.topics-grid { grid-template-columns:1fr; }
  .article-groups { grid-template-columns:1fr; }
  .category-directory,.category-articles { grid-template-columns:1fr; }
  .category-page { padding-top:42px; }
  .category-page-head { align-items:start; flex-direction:column; }
  .article-library { padding-top:56px; padding-bottom:72px; }
  .releases-page { padding:48px 0 72px; }
  .quick-card { min-height:82px; }
  .release-card:first-child { grid-column:auto; }
  .release-card { min-height:230px; }
  .section-heading { align-items:start; flex-direction:column; }
  .home-section { padding-top:64px; }
  .footer-inner { grid-template-columns:1fr; }
}

/* Product update editorial */
.feature-module{display:block;width:fit-content;margin:0 0 12px;padding:5px 9px;border-radius:7px;background:#eaf2ff;color:#185bb8;font-size:11px;font-weight:750;line-height:1.6}.release-split .feature-module{background:#25395d;color:#bcd8ff}.release-checklist .feature-module{margin-bottom:8px}.release-section-head>div>p{letter-spacing:0;line-height:1.7}
.updates-list{margin-top:48px}.update-feature{display:grid;grid-template-columns:1.18fr .82fr;overflow:hidden;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow-sm);transition:.2s ease}.update-feature:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(24,25,31,.12);text-decoration:none}.update-cover{min-height:390px;background:#061044}.update-cover img{width:100%;height:100%;object-fit:cover;display:block}.update-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,58px)}.update-copy h2{margin:20px 0 14px;font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.035em}.update-copy>p{margin:0;color:var(--text2);font-size:16px}.update-link{margin-top:32px;color:var(--accent-dark);font-weight:750}.release-article{min-height:100vh;padding:42px 20px 100px}.release-shell{width:min(1120px,100%);margin:0 auto}.release-article-hero{position:relative;min-height:590px;overflow:hidden;border-radius:30px;background:#061044;box-shadow:0 28px 80px rgba(3,12,61,.22)}.release-article-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(3,9,49,.2) 55%,rgba(3,9,49,.9) 100%)}.release-article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.release-hero-overlay{position:absolute;z-index:2;inset-inline-end:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;width:48%;padding:clamp(30px,5vw,64px);color:#fff}.release-version{margin:0 0 20px;color:#66a4ff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.release-hero-overlay h1{margin:0;font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-.05em}.release-hero-overlay>p:last-child{margin:24px 0 0;color:#c7d7ff;font-size:16px}.release-byline{display:flex;flex-wrap:wrap;gap:10px 24px;padding:22px 6px;border-bottom:1px solid var(--border);color:var(--muted);font-size:12px}.release-body{width:min(820px,100%);margin:0 auto}.release-lead{margin:64px 0;font-size:clamp(21px,3vw,28px);line-height:1.5;color:var(--text);font-weight:520}.release-body section{margin:80px 0}.release-body section>p{color:var(--text2);font-size:16px}.release-section-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}.release-section-head>span{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;color:#2478ff;background:#eaf2ff;font-weight:800}.release-section-head p{margin:0 0 3px;color:#2879ef;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.release-section-head h2{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.025em}.benefit-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.benefit-row span{padding:8px 12px;border-radius:999px;color:#246bd4;background:#edf4ff;font-size:12px;font-weight:750}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-panel{padding:24px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.feature-panel b{display:block;margin-bottom:8px;font-size:16px}.feature-panel p{margin:0;color:var(--text2);font-size:13px}.release-split{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.release-split>div{padding:22px;background:#101832;color:#fff;border-radius:18px}.release-split h3{margin:0 0 9px;font-size:16px}.release-split p{margin:0;color:#bfc9e6;font-size:13px}.release-quote{margin:90px -70px;padding:58px clamp(30px,7vw,78px);border-radius:28px;background:linear-gradient(135deg,#071143,#123aa0);color:#fff}.release-quote p{margin:0;font-size:clamp(27px,4vw,42px);font-weight:700;line-height:1.3;letter-spacing:-.02em}.release-checklist{margin:28px 0 0;padding:0;list-style:none}.release-checklist li{position:relative;padding:18px 22px 18px 52px;margin:10px 0;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--text2)}.release-checklist li:before{content:"✓";position:absolute;left:19px;top:17px;color:#fff;background:#2679f2;border-radius:50%;width:22px;height:22px;text-align:center;font-size:13px;font-weight:800}.release-polish{padding:34px;border-radius:22px;background:#eef4ff}.release-polish h2{margin:0 0 10px}.release-polish p:last-child{margin-bottom:0}.release-end{margin-top:90px;padding:48px;text-align:center;border-radius:26px;background:#171923;color:#fff}.release-end p{margin:0;color:#8fb8ff;font-weight:700}.release-end h2{margin:8px 0 24px}.release-end a{display:inline-block;padding:12px 20px;border-radius:999px;background:#2679f2;color:#fff;font-weight:750}.release-end a:hover{background:#fff;color:#171923;text-decoration:none}[dir="rtl"] .release-article-hero:after{background:linear-gradient(270deg,transparent 40%,rgba(3,9,49,.2) 55%,rgba(3,9,49,.9) 100%)}[dir="rtl"] .release-hero-overlay h1,[dir="rtl"] .update-copy h2{letter-spacing:0}[dir="rtl"] .release-checklist li{padding:18px 52px 18px 22px}[dir="rtl"] .release-checklist li:before{left:auto;right:19px}
@media(max-width:800px){.update-feature{grid-template-columns:1fr}.update-cover{min-height:260px}.release-article-hero{min-height:680px}.release-article-hero:after,[dir="rtl"] .release-article-hero:after{background:linear-gradient(0deg,rgba(3,9,49,.95) 0%,rgba(3,9,49,.48) 52%,transparent 82%)}.release-article-hero img{object-position:35% center}.release-hero-overlay{inset:auto 0 0;width:auto;padding:34px}.release-split{grid-template-columns:1fr}.release-quote{margin:70px 0}.feature-grid{grid-template-columns:1fr}}
@media(max-width:520px){.release-article{padding:28px 14px 70px}.release-article-hero{min-height:610px;border-radius:22px}.release-hero-overlay h1{font-size:42px}.release-byline{padding-inline:2px}.release-lead{margin:45px 0}.release-body section{margin:58px 0}.release-section-head{gap:12px}.release-section-head>span{flex-basis:40px;height:40px}.release-section-head h2{font-size:27px}.release-end{padding:36px 22px}}