/* ============================================================
   VBM السودان — shared stylesheet for catalog + guides pages
   Replicates the homepage RTL design tokens, header & footer,
   and adds catalog / category / spec-table / article / breadcrumb
   components. Mobile-first, RTL, accessible.
   ============================================================ */

:root{
  --dark:#0f1923;
  --dark-2:#152330;
  --green:#0d4a36;
  --green-2:#136b4d;
  --teal:#439a86;
  --gold:#d4a853;
  --gold-soft:#e7c987;
  --ink:#1b2530;
  --paper:#fbf9f4;
  --paper-2:#f3eee2;
  --line:rgba(212,168,83,.35);
  --shadow:0 18px 50px -22px rgba(15,25,35,.55);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Tajawal","Cairo",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.85;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Cairo","Tajawal",sans-serif;line-height:1.35;font-weight:900}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
.en{font-family:"Tajawal",sans-serif;direction:ltr;unicode-bidi:isolate;letter-spacing:.04em}

/* skip link */
.skip{position:absolute;right:-9999px;top:0;background:var(--gold);color:#0f1923;padding:10px 16px;z-index:200;border-radius:0 0 0 8px}
.skip:focus{right:0}

/* ornament */
.ornament{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--gold)}
.ornament::before,.ornament::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(to var(--orn,left),transparent,var(--gold))}
.ornament span{font-size:.95rem;letter-spacing:.28em;font-weight:700;font-family:"Cairo",sans-serif;white-space:nowrap}
.diamond{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(15,25,35,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,168,83,.22)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand .mark{flex:none}
.brand b{font-family:"Cairo",sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:.02em}
.brand small{display:block;color:var(--gold-soft);font-size:.72rem;font-weight:500;letter-spacing:.18em;line-height:1}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a{color:#dfe6ec;font-size:.94rem;font-weight:500;padding:9px 13px;border-radius:8px;transition:.2s;white-space:nowrap}
nav.main a:hover,nav.main a:focus-visible{color:#fff;background:rgba(67,154,134,.22)}
nav.main a[aria-current="page"]{color:var(--gold-soft)}
.cta-mini{background:var(--gold);color:var(--dark)!important;font-weight:700!important;padding:10px 18px!important;border-radius:30px!important}
.cta-mini:hover{background:var(--gold-soft)!important}

/* dropdown (المنتجات) */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:6px}
.has-drop>a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;transition:.2s}
.drop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:248px;background:rgba(18,30,40,.99);border:1px solid rgba(212,168,83,.25);border-radius:14px;padding:8px;box-shadow:0 24px 50px -18px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:80}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.has-drop:hover>a svg,.has-drop:focus-within>a svg{transform:rotate(180deg)}
.drop a{color:#cfd8df;font-size:.9rem;padding:10px 14px;border-radius:9px}
.drop a:hover,.drop a:focus-visible{background:rgba(67,154,134,.22);color:#fff}

/* language switcher */
.langs{display:flex;align-items:center;gap:4px;margin-inline-start:8px;padding-inline-start:12px;border-inline-start:1px solid rgba(212,168,83,.25)}
.langs a{color:#aeb9c2;font-family:"Tajawal",sans-serif;font-size:.86rem;font-weight:700;padding:6px 10px;border-radius:7px;transition:.2s;letter-spacing:.02em}
.langs a:hover,.langs a:focus-visible{color:#fff;background:rgba(67,154,134,.22)}
.langs a[aria-current="true"]{color:var(--dark);background:var(--gold)}
.langs a[aria-current="true"]:hover{background:var(--gold-soft)}
.burger{display:none;background:none;border:1px solid rgba(212,168,83,.4);border-radius:8px;width:44px;height:42px;cursor:pointer;color:var(--gold)}
.burger svg{display:block;margin:auto}

/* focus + buttons */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Cairo",sans-serif;font-weight:700;font-size:1.02rem;padding:15px 30px;border-radius:34px;cursor:pointer;border:1px solid transparent;transition:.22s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#c79640);color:var(--dark);box-shadow:0 14px 30px -12px rgba(212,168,83,.7)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-outline{background:transparent;color:var(--green-2);border-color:var(--line)}
.btn-outline:hover{border-color:var(--teal);color:var(--green)}

/* ---------- PAGE HERO (inner pages) ---------- */
.phero{position:relative;background:radial-gradient(120% 130% at 50% -10%,#1a2c3a 0%,var(--dark) 55%,#0a121a 100%);color:#fff;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(closest-side,rgba(67,154,134,.16),transparent 70%) -10% 120%/55% 80% no-repeat,
  radial-gradient(closest-side,rgba(212,168,83,.12),transparent 70%) 110% -10%/55% 70% no-repeat}
.phero .wrap{position:relative;padding-block:clamp(40px,6vw,68px)}
.phero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold-soft);font-family:"Cairo",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.18em;margin-bottom:18px}
.phero .eyebrow .dot{width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 4px rgba(212,168,83,.18)}
.phero h1{font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:-.01em;margin-bottom:16px;max-width:20ch;background:linear-gradient(180deg,#fff,#cfe0d9);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero p.lede{font-size:clamp(1.02rem,2.2vw,1.18rem);color:#cdd8e0;font-weight:500;max-width:62ch}
.phero .enline{color:var(--teal);font-weight:500;letter-spacing:.05em;margin-top:14px;font-size:.95rem}

/* ---------- BREADCRUMBS ---------- */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:13px;font-size:.88rem;color:#6b7681}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li::after{content:"‹";color:var(--gold);font-weight:700}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--green-2);font-weight:600}
.crumbs a:hover{color:var(--green);text-decoration:underline}
.crumbs [aria-current="page"]{color:#54606b;font-weight:600}

/* ---------- SECTION SHELL ---------- */
section.band{padding-block:clamp(48px,7vw,84px)}
.band-paper{background:var(--paper)}
.band-cream{background:var(--paper-2)}
.band-dark{background:linear-gradient(135deg,#0f1923,#0c1620);color:#eaf1f0}
.band-green{background:linear-gradient(135deg,#0c3d2c,#0a2a20);color:#eef5f1}
.sec-head{max-width:760px;margin:0 auto clamp(30px,4.5vw,46px)}
.sec-head.center{text-align:center}
.sec-head h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:14px 0 12px;color:var(--dark)}
.band-dark .sec-head h2,.band-green .sec-head h2{color:#fff}
.sec-head p{font-size:1.04rem;color:#52606b}
.band-dark .sec-head p,.band-green .sec-head p{color:#bcccc6}

/* ---------- CATALOG LANDING CARDS ---------- */
.catcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.catcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:.25s;overflow:hidden}
.catcard::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:linear-gradient(var(--gold),var(--teal));transform:scaleY(0);transform-origin:top;transition:.3s}
.catcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.catcard:hover::after{transform:scaleY(1)}
.catcard .ic{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,#0f1923,#163b30);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.catcard .ic svg{width:32px;height:32px;stroke:var(--gold);fill:none;stroke-width:1.7}
.catcard h3{font-size:1.2rem;color:var(--dark);margin-bottom:8px}
.catcard .spec{display:inline-block;font-family:"Tajawal",sans-serif;direction:ltr;font-size:.8rem;color:var(--green-2);background:rgba(19,107,77,.1);padding:3px 11px;border-radius:20px;margin-bottom:12px;font-weight:700}
.catcard p{font-size:.96rem;color:#5b6772;margin-bottom:16px}
.catcard .series{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.catcard .series span{font-family:"Tajawal",sans-serif;direction:ltr;font-size:.73rem;color:#7a838c;border:1px solid #e3ddcd;padding:2px 9px;border-radius:6px}
.catcard .more{font-family:"Cairo",sans-serif;font-weight:700;font-size:.94rem;color:var(--green-2);display:inline-flex;align-items:center;gap:7px}
.catcard .more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- PRODUCT SERIES CARDS (category page) ---------- */
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.scard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:.25s;position:relative}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.scard .badge{align-self:flex-start;font-family:"Tajawal",sans-serif;direction:ltr;font-weight:700;font-size:.78rem;letter-spacing:.04em;color:var(--dark);background:var(--gold-soft);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.scard h3{font-size:1.16rem;color:var(--dark);margin-bottom:6px}
.scard h3 .en{display:block;font-size:.84rem;color:var(--teal);font-weight:600;margin-top:2px}
.scard p{font-size:.95rem;color:#5b6772;margin-bottom:16px}
.scard ul.specs{list-style:none;margin-top:auto;display:grid;gap:8px;border-top:1px solid var(--paper-2);padding-top:14px}
.scard ul.specs li{display:flex;gap:8px;font-size:.9rem;color:#4b5660}
.scard ul.specs li strong{color:var(--dark);font-weight:700;font-family:"Cairo",sans-serif;flex:none}
.scard ul.specs li svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2;flex:none;margin-top:5px}

/* ---------- SPEC / COMPARISON TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:#fff}
table.spec{width:100%;border-collapse:collapse;min-width:560px}
table.spec caption{text-align:right;padding:0 0 14px;color:#52606b;font-size:.96rem}
table.spec th,table.spec td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--paper-2);font-size:.94rem}
table.spec thead th{background:linear-gradient(135deg,#0f1923,#163b30);color:#fff;font-family:"Cairo",sans-serif;font-weight:700;font-size:.9rem;position:sticky;top:0}
table.spec tbody tr:nth-child(even){background:var(--paper)}
table.spec tbody tr:hover{background:rgba(67,154,134,.08)}
table.spec td.num,table.spec td .en{font-family:"Tajawal",sans-serif;direction:ltr;unicode-bidi:isolate}
table.spec td:first-child{font-weight:700;color:var(--dark)}

/* ---------- APPLICATION / INFO CARDS ---------- */
.appgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.appcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 24px;transition:.25s}
.band-cream .appcard,.band-dark .appcard{background:#fff}
.appcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.appcard h3{font-size:1.1rem;color:var(--dark);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.appcard h3 .mk{width:34px;height:34px;border-radius:9px;background:rgba(19,107,77,.1);display:flex;align-items:center;justify-content:center;flex:none}
.appcard h3 .mk svg{width:18px;height:18px;stroke:var(--green-2);fill:none;stroke-width:1.9}
.appcard p{font-size:.95rem;color:#5b6772}

/* ---------- CHECK LIST ---------- */
.checklist{list-style:none;display:grid;gap:12px;margin-top:8px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:#4b5660;font-size:1rem}
.checklist svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.9;flex:none;margin-top:3px}

/* ---------- ARTICLE (guides) ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,52px);align-items:start}
.prose{max-width:74ch}
.prose>p{margin-bottom:18px;font-size:1.07rem;color:#39434d}
.prose h2{font-size:clamp(1.4rem,3.4vw,1.9rem);color:var(--dark);margin:38px 0 16px;padding-top:6px}
.prose h3{font-size:1.22rem;color:var(--green);margin:26px 0 12px}
.prose ul,.prose ol{margin:0 0 20px;padding-inline-start:0;list-style:none;display:grid;gap:10px}
.prose ul li{position:relative;padding-inline-start:26px;font-size:1.05rem;color:#39434d}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-inline-start:38px;font-size:1.05rem;color:#39434d;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--green-2);color:#fff;font-family:"Cairo",sans-serif;font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.prose strong{color:var(--dark);font-weight:700}
.prose a{color:var(--green-2);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.prose a:hover{color:var(--green);text-decoration-color:var(--green)}
.prose blockquote{margin:24px 0;padding:18px 22px;background:var(--paper-2);border-inline-start:4px solid var(--gold);border-radius:0 12px 12px 0;color:#3a444e;font-size:1.05rem}
.callout{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin:30px 0;box-shadow:var(--shadow)}
.callout h3{margin-top:0;color:var(--dark)}
.figtable{margin:26px 0}

/* article meta + aside */
.amETA{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:#6b7681;font-size:.9rem;margin-bottom:8px}
.amETA .tag{font-family:"Cairo",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.06em;color:var(--green-2);background:rgba(19,107,77,.1);padding:4px 12px;border-radius:20px}
.aside{position:sticky;top:92px;display:grid;gap:18px}
.aside .box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.aside .box h4{font-size:1.02rem;color:var(--dark);margin-bottom:12px}
.aside .toc{list-style:none;display:grid;gap:8px}
.aside .toc a{font-size:.92rem;color:#4b5660;display:block;padding-inline-start:14px;position:relative}
.aside .toc a::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.aside .toc a:hover{color:var(--green-2)}
.aside .box.cta-box{background:linear-gradient(135deg,#0c3d2c,#0a2a20);border:0;color:#eaf5f0}
.aside .box.cta-box h4{color:#fff}
.aside .box.cta-box p{font-size:.92rem;color:#bcd4cb;margin-bottom:14px}
.aside .box.cta-box .btn{width:100%;justify-content:center;font-size:.96rem;padding:13px 20px}
.relgrid{display:grid;gap:10px}
.relgrid a{display:block;font-size:.92rem;color:#4b5660;padding:10px 12px;border:1px solid var(--paper-2);border-radius:10px;transition:.2s}
.relgrid a:hover{border-color:var(--line);color:var(--green-2);background:var(--paper)}

/* article cards listing on guides where used */
.guidecards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gcard .top{padding:22px 22px 0}
.gcard .tag{font-family:"Cairo",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;color:var(--green-2);background:rgba(19,107,77,.1);padding:4px 11px;border-radius:20px;display:inline-block;margin-bottom:12px}
.gcard h3{font-size:1.12rem;color:var(--dark);padding:0 22px;margin-bottom:8px;line-height:1.45}
.gcard p{font-size:.94rem;color:#5b6772;padding:0 22px;margin-bottom:16px;flex:1}
.gcard .more{font-family:"Cairo",sans-serif;font-weight:700;font-size:.92rem;color:var(--green-2);padding:0 22px 22px;display:inline-flex;align-items:center;gap:7px}
.gcard .more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- CONTACT / FORM (same as homepage) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,56px);align-items:start}
.contact-info h2{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--dark);margin-bottom:16px}
.contact-info p{color:#56616b;margin-bottom:22px;font-size:1.05rem}
.mailbox{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;box-shadow:var(--shadow)}
.mailbox svg{width:26px;height:26px;stroke:var(--green-2);fill:none;stroke-width:1.6;flex:none}
.mailbox a{font-family:"Tajawal",sans-serif;direction:ltr;font-weight:700;color:var(--green-2);font-size:1.05rem}
.contact-list{list-style:none;margin-top:28px;display:grid;gap:14px}
.contact-list li{display:flex;gap:12px;align-items:flex-start;color:#4b5660;font-size:.98rem}
.contact-list svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;flex:none;margin-top:2px}
form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,38px);box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
label{display:block;font-family:"Cairo",sans-serif;font-weight:600;font-size:.9rem;color:var(--dark);margin-bottom:7px}
.req{color:#b5532b}
input,textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid #e0dac8;border-radius:11px;padding:13px 15px;transition:.2s}
input:focus,textarea:focus{background:#fff;border-color:var(--teal)}
textarea{resize:vertical;min-height:120px}
form .btn{width:100%;justify-content:center;margin-top:6px}
.formnote{font-size:.82rem;color:#7a838c;text-align:center;margin-top:12px}

/* ---------- FOOTER ---------- */
footer{background:#0a121a;color:#aebac4;padding-block:48px 30px}
.foot-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand{display:flex;align-items:center;gap:12px;color:#fff}
.foot-brand small{color:var(--gold-soft);font-size:.74rem;letter-spacing:.16em}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{font-size:.94rem;transition:.2s}
.foot-links a:hover{color:var(--gold-soft)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-top:22px;font-size:.86rem;color:#7e8a94}
.foot-bottom .en{color:#9aa6b0}
.foot-bottom a{color:var(--gold-soft)}

/* ---------- CTA STRIP ---------- */
.cta-strip{text-align:center;max-width:680px;margin-inline:auto}
.cta-strip h2{color:#fff;font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:14px}
.cta-strip p{color:#bcd4cb;font-size:1.06rem;margin-bottom:26px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .article{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:repeat(2,1fr);display:grid}
}
@media (max-width:900px){
  .catcards,.series-grid,.guidecards{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  nav.main{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;background:rgba(15,25,35,.99);padding:16px clamp(18px,5vw,40px) 24px;border-bottom:1px solid rgba(212,168,83,.22);transform:translateY(-130%);transition:.3s;visibility:hidden;max-height:calc(100vh - 72px);overflow-y:auto}
  nav.main.open{transform:translateY(0);visibility:visible}
  nav.main a{padding:13px 14px;border-radius:10px}
  .has-drop{position:static}
  .drop{position:static;opacity:1;visibility:visible;transform:none;background:rgba(255,255,255,.03);box-shadow:none;margin:2px 0 6px;border-color:rgba(212,168,83,.15)}
  .has-drop>a svg{display:none}
  .langs{margin:0;padding:8px 0 0;border-inline-start:0;border-top:1px solid rgba(212,168,83,.18);justify-content:flex-start}
  .cta-mini{text-align:center}
  .burger{display:block}
}
@media (max-width:560px){
  .catcards,.series-grid,.guidecards,.appgrid,.aside,.frow{grid-template-columns:1fr}
  .phero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}