/* MSA Gold — content & price pages. Loaded after assets/style.css. */
:root{--msa-bg:#1c1414;--msa-card:#261818;--msa-line:#5c4331;--msa-gold:#f0b52b;--msa-gold-d:#7a4f00;--msa-text:#f3eee8;--msa-muted:#c9bfb3;--msa-ok:#3fb67a;--msa-warn:#e39a3b}
body.msa-page{background:var(--msa-bg);color:var(--msa-text);margin:0;font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif}
body.msa-page[dir=ltr],html[dir=ltr] body.msa-page{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.msa-main,.msa-light,.msa-live,.msa-card,.msa-kpi,.msa-scroll,.msa-form,.msa-form input,.msa-form select,.msa-result{box-sizing:border-box}
.msa-light,.msa-live,.msa-card,.msa-scroll{min-width:0;max-width:100%}
.msa-skip{position:absolute;inset-inline-start:-999px;top:0}.msa-skip:focus{inset-inline-start:8px;z-index:50;background:#fff;color:#000;padding:8px}

/* header */
.msa-top{position:sticky;top:0;z-index:20;background:rgba(28,20,20,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--msa-line)}
.msa-top-in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.msa-logo{display:flex;align-items:center;gap:8px;color:var(--msa-gold);text-decoration:none;font-weight:700;flex:none}
.msa-logo img{width:40px;height:auto}
.msa-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.msa-nav::-webkit-scrollbar{display:none}
.msa-nav a{color:var(--msa-text);text-decoration:none;padding:7px 11px;border-radius:10px;white-space:nowrap;font-size:15px}
.msa-nav a:hover,.msa-nav a[aria-current=page]{background:#3a2626;color:var(--msa-gold)}
.msa-lang{flex:none;color:var(--msa-gold);border:1px solid var(--msa-line);border-radius:10px;padding:6px 10px;text-decoration:none;font-size:14px}

/* layout & type */
.msa-main{max-width:960px;margin:0 auto;padding:18px 16px 40px}
.msa-crumbs{font-size:14px;color:var(--msa-muted);margin:6px 0 10px}
.msa-crumbs a{color:var(--msa-muted)}
.msa-main h1{color:var(--msa-gold);font-size:clamp(28px,5vw,44px);line-height:1.45;margin:8px 0 12px}
.msa-main h2{color:var(--msa-gold);font-size:clamp(22px,3.4vw,30px);line-height:1.5;margin:34px 0 10px}
.msa-main h3{color:var(--msa-gold);font-size:20px;margin:22px 0 6px}
.msa-main p,.msa-main li{font-size:17px;line-height:1.95}
.msa-main a{color:var(--msa-gold)}
.msa-lead{font-size:19px!important;color:var(--msa-text)}
.msa-def{border-inline-start:4px solid var(--msa-gold);background:var(--msa-card);border-radius:12px;padding:14px 18px;margin:14px 0}
.msa-note{font-size:14px!important;color:var(--msa-muted)!important;line-height:1.8!important}
.msa-card{background:var(--msa-card);border:1px solid var(--msa-line);border-radius:18px;padding:20px 22px;margin:16px 0}
.msa-card>h2:first-child,.msa-card>h3:first-child{margin-top:0}

/* tables */
.msa-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.msa-table{width:100%;border-collapse:collapse;font-size:16px}
.msa-table caption{caption-side:top;text-align:start;color:var(--msa-muted);font-size:14px;padding-bottom:6px}
.msa-table th,.msa-table td{border:1px solid var(--msa-line);padding:10px 12px;text-align:start}
.msa-table thead th{background:#3a2626;color:var(--msa-gold)}
.msa-table td.num,.msa-table th.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:end;white-space:nowrap}

/* live price box */
.msa-live{background:var(--msa-card);border:1px solid var(--msa-gold);border-radius:18px;padding:18px 20px;margin:18px 0}
.msa-live-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.msa-live-head h2{margin:0!important;font-size:22px!important}
.msa-status{display:inline-block;max-width:100%;white-space:normal;line-height:1.7;font-size:13px;border-radius:14px;padding:4px 12px;background:rgba(63,182,122,.15);color:var(--msa-ok);border:1px solid rgba(63,182,122,.4)}
.msa-status.is-stale{background:rgba(227,154,59,.12);color:var(--msa-warn);border-color:rgba(227,154,59,.4)}
.msa-updated{font-size:14px!important;color:var(--msa-muted)!important;margin:8px 0 0!important}
.msa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 4px}
.msa-kpi{background:#1f1515;border:1px solid var(--msa-line);border-radius:14px;padding:12px 14px}
.msa-kpi span{display:block;font-size:14px;color:var(--msa-muted)}
.msa-kpi b{display:block;font-size:22px;color:var(--msa-gold);direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.msa-kpi small{display:block;font-size:12px;color:var(--msa-muted)}

/* price change (colour is never the only signal: arrow + words + sign are always present) */
.msa-chg.up b{color:#3fb67a}.msa-chg.down b{color:#e0705c}.msa-chg.flat b{color:var(--msa-muted)}
.msa-light .msa-chg .msa-kpi b{color:inherit}

.msa-badge{display:inline-block;font-size:11px;line-height:1;padding:3px 7px;border-radius:999px;border:1px solid var(--msa-line);color:var(--msa-muted);vertical-align:middle;margin-inline-start:6px}
.msa-updated .msa-note{display:inline}
.msa-live [data-state=very_old] .msa-status,.msa-live [data-state=old] .msa-status{font-weight:700}

/* freshness states: unavailable hides the numeric blocks, very_old softens them and says so */
.msa-live[data-state=unavailable] .msa-kpis,.msa-live[data-state=unavailable] .msa-scroll,.msa-live[data-state=unavailable] .msa-note:not(.msa-updated .msa-note){display:none}
.msa-live[data-state=very_old]{border-color:var(--msa-warn)}
.msa-live[data-state=very_old] .msa-kpis,.msa-live[data-state=very_old] .msa-scroll{opacity:.85}
.msa-live[data-state=old] .msa-status{border-color:var(--msa-warn)}

/* links, CTA, FAQ */
.msa-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}
.msa-links a{display:block;border:1px solid var(--msa-line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--msa-text);background:rgba(38,24,24,.6)}
.msa-links a b{display:block;color:var(--msa-gold);margin-bottom:2px}
.msa-links a span{font-size:14px;color:var(--msa-muted)}
.msa-cta{display:inline-block;background:var(--msa-gold);color:#241717!important;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700;margin:6px 0 6px 8px}
html[dir=ltr] .msa-cta{margin:6px 8px 6px 0}
.msa-cta.alt{background:transparent;color:var(--msa-gold)!important;border:1px solid var(--msa-gold)}
.msa-main details{border:1px solid var(--msa-line);border-radius:14px;padding:12px 16px;margin:10px 0;background:rgba(38,24,24,.6)}
.msa-main summary{cursor:pointer;font-weight:700;color:var(--msa-gold);font-size:17px}
.msa-main details p{margin:8px 0 0}
.msa-shots{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.msa-shots img{height:auto;max-width:100%;border-radius:16px}

/* calculators */
.msa-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}
.msa-form label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--msa-muted)}
.msa-form input,.msa-form select{background:#1f1515;color:var(--msa-text);border:1px solid var(--msa-line);border-radius:10px;padding:10px 12px;font-size:17px}
.msa-form input:focus,.msa-form select:focus{outline:2px solid var(--msa-gold);outline-offset:1px}
.msa-result{font-size:18px!important;background:#1f1515;border:1px dashed var(--msa-gold);border-radius:12px;padding:12px 14px}
.msa-result b{color:var(--msa-gold)}

/* footer */
.msa-foot{border-top:1px solid var(--msa-line);background:#170f0f;margin-top:30px}
.msa-foot-in{max-width:1080px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.msa-foot h2{font-size:15px!important;color:var(--msa-gold);margin:0 0 8px!important}
.msa-foot ul{list-style:none;margin:0;padding:0}
.msa-foot li{font-size:14px!important;line-height:2!important}
.msa-foot a{color:var(--msa-muted);text-decoration:none}
.msa-foot a:hover{color:var(--msa-gold)}
.msa-foot-copy{text-align:center;color:var(--msa-muted);font-size:13px;padding:0 16px 20px;margin:0}

/* home hero: intrinsic width/height attributes reserve space, CSS keeps the aspect ratio */
.devices-showcase img{height:auto}

/* light variant — the section appended to the existing home page */
.msa-light{color:#2a1c1c;width:100%;max-width:960px;margin:0 auto;padding:10px 16px 30px}
.msa-light h2,.msa-light h3{color:var(--msa-gold-d)}
.msa-light p,.msa-light li{color:#2a1c1c;font-size:17px;line-height:1.95}
.msa-light a{color:var(--msa-gold-d)}
.msa-light .msa-note{color:#6b5a4a!important}
.msa-light .msa-def{background:#fff;border-color:var(--msa-gold-d)}
.msa-light .msa-live,.msa-light .msa-card{background:#241717;color:var(--msa-text)}
.msa-light .msa-live h2,.msa-light .msa-card h2,.msa-light .msa-card h3{color:var(--msa-gold)}
.msa-light .msa-card li,.msa-light .msa-card p{color:var(--msa-text)}
.msa-light .msa-links a{background:#fff;border-color:#d9c9a8;color:#2a1c1c}
.msa-light .msa-links a b{color:var(--msa-gold-d)}
.msa-light .msa-links a span{color:#6b5a4a}
.msa-light details{background:#fff;border:1px solid #d9c9a8;border-radius:14px;padding:12px 16px;margin:10px 0}
.msa-light summary{cursor:pointer;font-weight:700;color:var(--msa-gold-d);font-size:17px}
.msa-light .msa-table th,.msa-light .msa-table td{border-color:var(--msa-line)}

@media (max-width:560px){
  .msa-top-in{gap:8px;padding:8px 12px}
  .msa-logo span{display:none}
  .msa-main p,.msa-main li,.msa-light p,.msa-light li{font-size:16px}
  .msa-kpi b{font-size:20px}
  .msa-table{font-size:14px}
  .msa-table th,.msa-table td{padding:8px 7px}
  .msa-live,.msa-card{padding:14px 12px}
}