/* ASFAN — Software section (/software and product pages).
   Light (white) page body; the site-wide dark header & footer come from
   asfan-site.css unchanged. Uses logical properties so the Arabic (RTL)
   version can reuse this file as-is. */

body.asfan-sw{
  --asfan-primary:#6366f1;
  --sw-sun:#f59e0b;
  --sw-sun-2:#f97316;
  --sw-sun-ink:#b45309;
  --sw-leaf:#16a34a;
  --sw-sky:#0284c7;
  --sw-ink:#0b0f19;
  --sw-text:#374151;
  --sw-muted:#6b7280;
  --sw-line:#e5e7f0;
  --sw-card:#ffffff;
  --sw-soft:#f6f8fc;
  --sw-radius:1.1rem;
  background:#fff !important;
  color:var(--sw-text);
}

.asfan-sw section{ scroll-margin-top:90px; }
.asfan-sw .sw-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sw-sun-ink); margin-bottom:.8rem;
}
.asfan-sw .sw-section{ padding-block:4.5rem; background:#fff; }
.asfan-sw .sw-section-alt{ background:var(--sw-soft); }
.asfan-sw .sw-title{ font-weight:800; color:var(--sw-ink); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.2; margin-bottom:.8rem; }
.asfan-sw .sw-lead{ color:var(--sw-muted); font-size:1.05rem; max-width:680px; }
.asfan-sw .text-sun{ color:var(--sw-sun); }

/* ---------- Hero ---------- */
.sw-hero{
  position:relative; overflow:hidden; color:var(--sw-ink);
  background:
    radial-gradient(55% 80% at 90% 0%,rgba(245,158,11,.20) 0%,transparent 60%),
    radial-gradient(45% 70% at 0% 100%,rgba(34,197,94,.12) 0%,transparent 60%),
    linear-gradient(180deg,#fffaf0 0%,#f4f8ff 100%);
  padding-block:3.2rem 4.5rem;
  border-bottom:1px solid var(--sw-line);
}
.sw-hero .asfan-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.8rem;
  color:var(--sw-muted); margin-bottom:1.4rem;
}
.sw-hero .asfan-breadcrumb a{ color:var(--sw-muted); text-decoration:none; }
.sw-hero .asfan-breadcrumb a:hover{ color:var(--asfan-primary); }
.sw-hero h1{
  font-weight:900; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.12;
  letter-spacing:-.02em; color:var(--sw-ink); margin-bottom:1rem;
}
.sw-hero .sw-hero-lead{ color:var(--sw-text); font-size:1.1rem; max-width:560px; margin-bottom:1.8rem; }
.sw-badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:999px;
  font-size:.78rem; font-weight:700; background:#fff4db; color:var(--sw-sun-ink);
  border:1px solid #fcd98a; margin-bottom:1.1rem;
}
.sw-badge.is-soon{ background:#eef0ff; color:#4f46e5; border-color:#c7cbfb; }
.sw-badge.is-live{ background:#e8f8ee; color:#15803d; border-color:#a7e3bd; }

.sw-actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.sw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.4rem; border-radius:.8rem; font-weight:800; font-size:.98rem;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent; line-height:1.1;
}
.sw-btn i{ font-size:1.35rem; }
.sw-btn:hover{ transform:translateY(-2px); }
.sw-btn-sun{ background:linear-gradient(135deg,#fbbf24,var(--sw-sun-2)); color:#1a1200; box-shadow:0 12px 26px -12px rgba(249,115,22,.7); }
.sw-btn-sun:hover{ color:#1a1200; box-shadow:0 16px 32px -12px rgba(249,115,22,.85); }
.sw-btn-primary{ background:var(--asfan-primary); color:#fff; box-shadow:0 12px 26px -12px rgba(99,102,241,.8); }
.sw-btn-primary:hover{ color:#fff; background:#5558e8; }
.sw-btn-ghost{ background:#fff; color:var(--sw-ink); border-color:#d6d9e4; }
.sw-btn-ghost:hover{ color:var(--sw-ink); border-color:var(--asfan-primary); box-shadow:0 10px 22px -14px rgba(99,102,241,.6); }
.sw-btn small{ display:block; font-weight:600; font-size:.72rem; opacity:.7; margin-top:.15rem; }
.sw-hero-note{ font-size:.82rem; color:var(--sw-muted); margin-top:1rem; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; }
.sw-hero-note span{ display:inline-flex; align-items:center; gap:.35rem; }
.sw-hero-note i{ color:var(--sw-leaf); }

/* ---------- App preview window ---------- */
.sw-window{
  background:#fff; border:1px solid var(--sw-line); border-radius:1.1rem;
  box-shadow:0 40px 70px -35px rgba(15,23,42,.45);
  overflow:hidden; max-width:100%;
}
.sw-window-bar{
  display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem;
  background:#f3f4f8; border-bottom:1px solid var(--sw-line);
  font-size:.75rem; color:var(--sw-muted);
}
.sw-window-bar b{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.sw-window-bar b:nth-child(1){ background:#ff5f57; }
.sw-window-bar b:nth-child(2){ background:#febc2e; }
.sw-window-bar b:nth-child(3){ background:#28c840; }
.sw-window-bar span{ margin-inline-start:.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-window svg{ display:block; width:100%; height:auto; }

.sw-scene .sun-rays{ transform-box:fill-box; transform-origin:center; animation:swSpin 30s linear infinite; }
.sw-scene .flow{ stroke-dasharray:6 8; animation:swFlow 1.2s linear infinite; }
.sw-scene .battery-level{ transform-box:fill-box; transform-origin:bottom; animation:swCharge 4s ease-in-out infinite; }
.sw-scene .bulb-glow{ animation:swGlow 2s ease-in-out infinite; }
@keyframes swSpin{ to{ transform:rotate(360deg); } }
@keyframes swFlow{ to{ stroke-dashoffset:-28; } }
@keyframes swCharge{ 0%{ transform:scaleY(.2); } 70%,100%{ transform:scaleY(1); } }
@keyframes swGlow{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }
@media (prefers-reduced-motion: reduce){
  .sw-scene .sun-rays, .sw-scene .flow, .sw-scene .battery-level, .sw-scene .bulb-glow{ animation:none; }
}

/* ---------- Topic cards (what kids learn) ---------- */
.sw-topic{
  height:100%; background:var(--sw-card); border:1px solid var(--sw-line); border-radius:var(--sw-radius);
  padding:1.6rem 1.4rem; box-shadow:0 10px 30px -22px rgba(15,23,42,.35);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sw-topic:hover{ transform:translateY(-4px); border-color:#fcd98a; box-shadow:0 22px 40px -24px rgba(15,23,42,.4); }
.sw-topic-icon{
  width:56px; height:56px; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; margin-bottom:1.1rem;
}
.sw-topic h3{ color:var(--sw-ink); font-size:1.15rem; font-weight:800; margin-bottom:.5rem; }
.sw-topic p{ color:var(--sw-muted); font-size:.92rem; margin-bottom:0; }
.sw-tone-sun  .sw-topic-icon{ background:#fff4db; color:var(--sw-sun); }
.sw-tone-sky  .sw-topic-icon{ background:#e0f2fe; color:var(--sw-sky); }
.sw-tone-leaf .sw-topic-icon{ background:#dcfce7; color:var(--sw-leaf); }
.sw-tone-indigo .sw-topic-icon{ background:#eef0ff; color:var(--asfan-primary); }

/* ---------- Feature list ---------- */
.sw-feature{ display:flex; gap:1rem; align-items:flex-start; }
.sw-feature > i{
  flex:0 0 auto; width:44px; height:44px; border-radius:.8rem; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; background:#eef0ff; color:var(--asfan-primary);
}
.sw-feature h3{ color:var(--sw-ink); font-size:1rem; font-weight:800; margin-bottom:.25rem; }
.sw-feature h3 a{ color:var(--sw-ink); text-decoration:none; }
.sw-feature h3 a:hover{ color:var(--asfan-primary); }
.sw-feature p{ color:var(--sw-muted); font-size:.9rem; margin-bottom:0; }

/* ---------- Steps ---------- */
.sw-steps{ counter-reset:swstep; }
.sw-step{
  position:relative; height:100%; background:var(--sw-card); border:1px solid var(--sw-line);
  border-radius:var(--sw-radius); padding:2.2rem 1.4rem 1.5rem; box-shadow:0 10px 30px -22px rgba(15,23,42,.35);
}
.sw-step::before{
  counter-increment:swstep; content:counter(swstep);
  position:absolute; top:-18px; inset-inline-start:1.4rem;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#1a1200; background:linear-gradient(135deg,#fbbf24,var(--sw-sun-2));
  box-shadow:0 8px 18px -8px rgba(249,115,22,.8);
}
.sw-step h3{ color:var(--sw-ink); font-size:1.05rem; font-weight:800; margin-bottom:.4rem; }
.sw-step p{ color:var(--sw-muted); font-size:.9rem; margin-bottom:0; }

/* ---------- Plans ---------- */
.sw-plan{
  position:relative; height:100%; display:flex; flex-direction:column;
  background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1.3rem; padding:2rem 1.7rem;
  box-shadow:0 14px 34px -24px rgba(15,23,42,.35);
}
.sw-plan.is-featured{
  background:linear-gradient(180deg,#fff6e0 0%,#fff 45%);
  border:2px solid #fbbf24; box-shadow:0 30px 60px -32px rgba(249,115,22,.55);
}
.sw-plan-flag{
  position:absolute; top:-13px; inset-inline-end:1.5rem; padding:.3rem .8rem; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(135deg,#fbbf24,var(--sw-sun-2)); color:#1a1200;
}
.sw-plan h3{ color:var(--sw-ink); font-weight:900; font-size:1.35rem; margin-bottom:.3rem; }
.sw-plan .sw-plan-sub{ color:var(--sw-muted); font-size:.9rem; margin-bottom:1.2rem; }
.sw-plan .sw-plan-price{ color:var(--sw-ink); font-size:1.6rem; font-weight:900; margin-bottom:.1rem; }
.sw-plan .sw-plan-price-note{ color:var(--sw-muted); font-size:.8rem; margin-bottom:1.3rem; }
.sw-plan ul{ list-style:none; padding:0; margin:0 0 1.6rem; flex:1 1 auto; }
.sw-plan li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--sw-text); font-size:.93rem; margin-bottom:.7rem; }
.sw-plan li i{ color:var(--sw-leaf); font-size:1.2rem; margin-top:.05rem; }
.sw-plan .sw-btn{ width:100%; }

.sw-trial-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  background:#effbf3; border:1px dashed #86d9a3; border-radius:1rem;
  padding:1.1rem 1.4rem; margin-bottom:2.2rem;
}
.sw-trial-strip p{ margin:0; color:var(--sw-text); }
.sw-trial-strip strong{ color:var(--sw-ink); }
.sw-note{ color:var(--sw-muted); }
.sw-note a{ color:var(--sw-sun-ink); font-weight:700; }

/* ---------- Requirements ---------- */
.sw-req{ background:var(--sw-card); border:1px solid var(--sw-line); border-radius:var(--sw-radius); overflow:hidden; }
.sw-req dl{ margin:0; }
.sw-req .sw-req-row{ display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:1rem; padding:.9rem 1.3rem; border-bottom:1px solid var(--sw-line); }
.sw-req .sw-req-row:nth-child(even){ background:#fafbfd; }
.sw-req .sw-req-row:last-child{ border-bottom:0; }
.sw-req dt{ color:var(--sw-muted); font-weight:600; font-size:.9rem; }
.sw-req dd{ color:var(--sw-ink); margin:0; font-size:.93rem; font-weight:600; }

/* ---------- FAQ ---------- */
.asfan-sw .accordion-item{ background:#fff !important; border:1px solid var(--sw-line) !important; border-radius:.9rem !important; margin-bottom:.8rem; overflow:hidden; }
.asfan-sw .accordion-button{ background:transparent !important; color:var(--sw-ink) !important; font-weight:700; box-shadow:none !important; }
.asfan-sw .accordion-body{ color:var(--sw-muted); font-size:.93rem; }
.asfan-sw .accordion-body a{ color:var(--sw-sun-ink); }

/* ---------- Product cards (hub) ---------- */
.sw-product{
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1.3rem;
  box-shadow:0 14px 34px -24px rgba(15,23,42,.35);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sw-product:hover{ transform:translateY(-4px); border-color:#c7cbfb; box-shadow:0 24px 44px -26px rgba(15,23,42,.45); }
.sw-product.is-live:hover{ border-color:#fcd98a; }
.sw-product-art{
  position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  font-size:3.6rem; overflow:hidden;
}
.sw-product-art i{ position:relative; z-index:1; }
.sw-product-art.art-kids{ background:radial-gradient(circle at 70% 25%,#fde68a,transparent 60%),linear-gradient(135deg,#dcfce7,#e0f2fe); color:var(--sw-sun); }
.sw-product-art.art-renew{ background:radial-gradient(circle at 30% 30%,#bae6fd,transparent 60%),linear-gradient(135deg,#e0f2fe,#eef0ff); color:var(--sw-sky); }
.sw-product-art.art-solar-pro{ background:radial-gradient(circle at 70% 70%,#c7cbfb,transparent 60%),linear-gradient(135deg,#eef0ff,#f5e8ff); color:var(--asfan-primary); }
.sw-product-art .sw-badge{ position:absolute; top:1rem; inset-inline-start:1rem; margin:0; }
.sw-product-body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1 1 auto; }
.sw-product-body .sw-audience{ font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sw-muted); margin-bottom:.5rem; }
.sw-product-body h3{ color:var(--sw-ink); font-size:1.25rem; font-weight:800; margin-bottom:.6rem; }
.sw-product-body p{ color:var(--sw-muted); font-size:.93rem; flex:1 1 auto; }
.sw-product-body .sw-btn{ align-self:flex-start; margin-top:.6rem; padding:.7rem 1.1rem; font-size:.9rem; }

/* ---------- CTA band ---------- */
.sw-cta{
  position:relative; overflow:hidden; border-radius:1.5rem; padding:3rem 2rem;
  background:radial-gradient(70% 120% at 100% 0%,rgba(245,158,11,.25),transparent 60%),linear-gradient(135deg,#fff7e6,#eef2ff);
  border:1px solid #f3e3bd;
}
.sw-cta h2{ color:var(--sw-ink); font-weight:900; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.6rem; }
.sw-cta p{ color:var(--sw-text); margin-bottom:1.5rem; max-width:620px; }

@media (max-width:767.98px){
  .asfan-sw .sw-section{ padding-block:3.2rem; }
  .sw-hero{ padding-block:2.4rem 3.2rem; }
  .sw-actions .sw-btn{ width:100%; }
  .sw-req .sw-req-row{ grid-template-columns:1fr; gap:.2rem; }
  .sw-cta{ padding:2.2rem 1.3rem; }
}

/* =========================================================================
   v3 — product screenshots, split sections, stats, plant cards, manuals
   Added for: Arab World Solar Kids · Renewable Energy Digital Twin ·
   Arab Power Twin. Logical properties only, so RTL reuses this file.
   ========================================================================= */

/* ---------- Screenshot frame ---------- */
.sw-shot{
  margin:0; background:var(--sw-card); border:1px solid var(--sw-line);
  border-radius:1.1rem; overflow:hidden;
  box-shadow:0 26px 56px -34px rgba(15,23,42,.5);
}
.sw-shot img{ display:block; width:100%; height:auto; background:#f3f4f8; }
.sw-shot figcaption{
  padding:.8rem 1.1rem; font-size:.85rem; color:var(--sw-muted);
  background:#fafbfd; border-top:1px solid var(--sw-line);
}
.sw-shot-lift{ box-shadow:0 40px 80px -38px rgba(15,23,42,.6); }

/* Screenshot inside the browser-style window chrome */
.sw-window .sw-shot{ border:0; border-radius:0; box-shadow:none; }
.sw-window .sw-shot figcaption{ border-top:1px solid var(--sw-line); }

/* ---------- Gallery grid ---------- */
.sw-gallery{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.sw-gallery.is-wide{ grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.sw-gallery .sw-shot{ height:100%; display:flex; flex-direction:column; }
.sw-gallery .sw-shot figcaption{ margin-top:auto; }

/* ---------- Alternating split section ---------- */
.sw-split{ display:grid; gap:2.5rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:992px){
  .sw-split{ grid-template-columns:1fr 1.15fr; }
  .sw-split.is-reversed > .sw-split-text{ order:2; }
  .sw-split.is-reversed > .sw-split-media{ order:1; }
  .sw-split.is-reversed{ grid-template-columns:1.15fr 1fr; }
}
.sw-split + .sw-split{ margin-top:4rem; padding-top:4rem; border-top:1px solid var(--sw-line); }
.sw-split-text h3{ color:var(--sw-ink); font-weight:800; font-size:clamp(1.25rem,2.4vw,1.7rem); margin-bottom:.8rem; }
.sw-split-text p{ color:var(--sw-muted); font-size:1rem; }
.sw-split-list{ list-style:none; padding:0; margin:1.2rem 0 0; }
.sw-split-list li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--sw-text); font-size:.95rem; margin-bottom:.65rem; }
.sw-split-list li i{ color:var(--sw-leaf); font-size:1.2rem; flex:0 0 auto; margin-top:.1rem; }

/* ---------- Stat tiles ---------- */
.sw-stats{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); }
.sw-stat{
  background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1rem;
  padding:1.3rem 1.2rem; text-align:center;
  box-shadow:0 10px 30px -24px rgba(15,23,42,.4);
}
.sw-stat b{ display:block; color:var(--sw-ink); font-size:1.75rem; font-weight:900; line-height:1.1; }
.sw-stat span{ display:block; color:var(--sw-muted); font-size:.82rem; margin-top:.35rem; }

/* ---------- Chips ---------- */
.sw-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; list-style:none; }
.sw-chips li{
  padding:.4rem .85rem; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--sw-soft); color:var(--sw-text); border:1px solid var(--sw-line);
}

/* ---------- Reference plant cards ---------- */
.sw-plantcard{
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1.2rem;
  box-shadow:0 14px 34px -26px rgba(15,23,42,.4);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sw-plantcard:hover{ transform:translateY(-4px); border-color:#fcd98a; box-shadow:0 26px 48px -28px rgba(15,23,42,.5); }
.sw-plantcard img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#eef2f7; }
.sw-plantcard-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1 1 auto; }
.sw-plantcard .sw-plantcard-kind{
  font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--sw-sun-ink); margin-bottom:.4rem;
}
.sw-plantcard h3{ color:var(--sw-ink); font-size:1.05rem; font-weight:800; margin-bottom:.3rem; }
.sw-plantcard p{ color:var(--sw-muted); font-size:.87rem; margin-bottom:0; }
.sw-plantcard .sw-plantcard-spec{ margin-top:.7rem; font-size:.82rem; font-weight:700; color:var(--sw-sky); }

/* ---------- Manuals / downloads strip ---------- */
.sw-manuals{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1.2rem;
  padding:1.5rem 1.7rem; box-shadow:0 14px 34px -28px rgba(15,23,42,.4);
}
.sw-manuals h3{ color:var(--sw-ink); font-size:1.1rem; font-weight:800; margin-bottom:.25rem; }
.sw-manuals p{ color:var(--sw-muted); font-size:.9rem; margin:0; }
.sw-manuals .sw-actions .sw-btn{ padding:.7rem 1.1rem; font-size:.9rem; }

/* ---------- Trial callout ---------- */
.sw-trial-box{
  background:linear-gradient(135deg,#fff7e6,#eef2ff);
  border:1px solid #f3e3bd; border-radius:1.2rem; padding:1.7rem 1.6rem; height:100%;
}
.sw-trial-box h3{ color:var(--sw-ink); font-weight:800; font-size:1.15rem; margin-bottom:.6rem; }
.sw-trial-box p{ color:var(--sw-text); font-size:.93rem; margin-bottom:1rem; }
.sw-trial-box ul{ list-style:none; padding:0; margin:0 0 1.2rem; }
.sw-trial-box li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--sw-text); margin-bottom:.55rem; }
.sw-trial-box li i{ font-size:1.15rem; flex:0 0 auto; margin-top:.05rem; }
.sw-trial-box li i.bx-check-circle{ color:var(--sw-leaf); }
.sw-trial-box li i.bx-lock-alt{ color:var(--sw-muted); }

/* ---------- Language switch pill in the breadcrumb row ---------- */
.sw-langswitch{
  display:inline-flex; align-items:center; gap:.35rem; margin-inline-start:auto;
  padding:.3rem .8rem; border-radius:999px; font-size:.78rem; font-weight:700;
  background:#fff; border:1px solid var(--sw-line); color:var(--sw-ink); text-decoration:none;
}
.sw-langswitch:hover{ color:var(--asfan-primary); border-color:var(--asfan-primary); }

/* ---------- Spec table (reuses sw-req, wider label column) ---------- */
.sw-req.is-spec .sw-req-row{ grid-template-columns:minmax(150px,42%) 1fr; }

@media (max-width:767.98px){
  .sw-manuals{ padding:1.3rem 1.2rem; }
  .sw-manuals .sw-actions{ width:100%; }
  .sw-manuals .sw-actions .sw-btn{ width:100%; }
  .sw-split + .sw-split{ margin-top:2.6rem; padding-top:2.6rem; }
  .sw-req.is-spec .sw-req-row{ grid-template-columns:1fr; }
}

/* ---------- RTL: keep numeric / Latin runs in logical order ----------
   In an RTL paragraph a run like "362 GW" is reordered to "GW 362".
   Isolating these short runs keeps them readable in both languages. */
.sw-stat b,
.sw-plantcard .sw-plantcard-spec,
.asfan-sw code,
.asfan-sw .sw-req dd code{
  direction:ltr; unicode-bidi:isolate;
}
.sw-stat b{ text-align:center; }
.asfan-sw code{ font-size:.92em; }

/* =========================================================================
   Hero trio — the three programs in one composition (software hub pages)
   A fanned deck: two cards behind, the third in front. Mirrors in RTL via
   logical insets; stacks vertically on small screens.
   ========================================================================= */
.sw-hero-trio{
  position:relative;
  aspect-ratio:16/13;
  width:100%;
  max-width:760px;
  margin-inline:auto;
}
.sw-trio-card figcaption span{ min-width:0; }
.sw-trio-card{
  position:absolute; margin:0; overflow:hidden;
  background:var(--sw-card);
  border:1px solid rgba(255,255,255,.7);
  border-radius:.95rem;
  box-shadow:0 30px 60px -28px rgba(15,23,42,.55), 0 4px 12px -6px rgba(15,23,42,.25);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.sw-trio-card img{ display:block; width:100%; height:auto; background:#eef2f7; }
.sw-trio-card figcaption{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem;
  font-size:.72rem; font-weight:700; line-height:1.25;
  min-width:0; overflow-wrap:anywhere;
  color:var(--sw-ink); background:#fff;
  border-top:1px solid var(--sw-line);
}
.sw-trio-card figcaption i{ font-size:.95rem; flex:0 0 auto; color:var(--sw-sun); }

.sw-trio-card.is-a{ width:50%; inset-inline-start:0;   top:0;    z-index:1; transform:rotate(-3.5deg); }
.sw-trio-card.is-b{ width:50%; inset-inline-end:0;     top:4%;   z-index:2; transform:rotate(3.5deg); }
.sw-trio-card.is-c{ width:62%; inset-inline-start:19%; bottom:0; z-index:3; }
.sw-trio-card.is-b figcaption i{ color:var(--sw-sky); }
.sw-trio-card.is-c figcaption i{ color:var(--sw-leaf); }

[dir="rtl"] .sw-trio-card.is-a{ transform:rotate(3.5deg); }
[dir="rtl"] .sw-trio-card.is-b{ transform:rotate(-3.5deg); }

/* lift the hovered card out of the stack */
.sw-hero-trio:hover .sw-trio-card{ box-shadow:0 22px 44px -26px rgba(15,23,42,.45); }
.sw-trio-card:hover{
  z-index:4 !important;
  transform:rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:0 40px 74px -30px rgba(15,23,42,.6) !important;
}

@media (prefers-reduced-motion: reduce){
  .sw-trio-card, .sw-trio-card:hover{ transition:none; }
}

/* Stack them on narrow screens — no overlap, no rotation */
@media (max-width:767.98px){
  .sw-hero-trio{ aspect-ratio:auto; display:grid; gap:1rem; max-width:460px; }
  .sw-trio-card,
  .sw-trio-card.is-a,
  .sw-trio-card.is-b,
  .sw-trio-card.is-c,
  [dir="rtl"] .sw-trio-card.is-a,
  [dir="rtl"] .sw-trio-card.is-b{
    position:static; width:100%; inset:auto; transform:none;
    box-shadow:0 16px 36px -24px rgba(15,23,42,.45);
  }
  .sw-trio-card:hover{ transform:none; }
}

/* The theme's .container always pads by half of a 1.5rem gutter, but a .g-5 row
   sets --si-gutter-x:3rem and pulls -24px on each side — 12px past the container.
   On wide screens the container's side slack absorbs it; on phones and small
   tablets it becomes real horizontal overflow, so clamp the gutter there.
   (g-5 spacing is too wide at that size anyway.) */
@media (max-width:767.98px){
  .asfan-sw .row.g-5,
  .asfan-sw .row.gx-5{ --si-gutter-x:1.5rem; --bs-gutter-x:1.5rem; }
}