/* Dubai Storage Compared — main.css
   Fintech-comparison aesthetic. System fonts only. No framework. */

:root{
  --indigo:#4F46E5; --indigo-dark:#4338CA;
  --ink:#0F172A; --muted:#64748B; --line:#E2E8F0;
  --bg:#FFFFFF; --alt:#F8FAFC; --win:#EEF2FF;
  --pos:#16A34A; --neg:#94A3B8;
  --sky:#0EA5E9; --amber:#D97706;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.6; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--indigo-dark);text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:62px}
.brand{font-weight:700;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand b{color:var(--indigo)}
.brand:hover{text-decoration:none}
.nav-links{display:none;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);font-size:.9375rem;font-weight:500}
.nav-links a:hover{color:var(--indigo);text-decoration:none}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font-size:1.25rem;cursor:pointer;
}
#nav-menu[hidden]{display:none}
@media(min-width:960px){
  .nav-toggle{display:none}
  .nav-links{display:flex}
  #nav-menu{display:flex!important}
}
@media(max-width:959px){
  #nav-menu{
    flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:62px;background:#fff;
    border-bottom:1px solid var(--line);padding:8px 20px 16px;
  }
  #nav-menu a{display:block;width:100%;padding:11px 0;border-bottom:1px solid var(--line)}
  #nav-menu li:last-child a{border-bottom:0}
}

/* ---------- Hero ---------- */
.hero{background:var(--alt);border-bottom:1px solid var(--line)}
.hero-inner{padding:clamp(40px,7vw,76px) 0}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--indigo);background:var(--win);
  padding:5px 11px;border-radius:999px;margin-bottom:16px;
}
h1{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}
.deck{font-size:clamp(1.05rem,2vw,1.25rem);color:#1e293b;max-width:46rem;margin:0 0 18px}
.meta-line{font-size:.875rem;color:var(--muted);margin:0 0 24px}
.meta-line strong{color:var(--ink);font-weight:600}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:.9375rem;border-radius:8px;
  padding:11px 20px;cursor:pointer;transition:transform .08s ease,background .15s ease;
  border:1px solid transparent;text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-dark);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---------- Sections ---------- */
main{display:block}
.section{padding:clamp(44px,6vw,80px) 0}
.section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:clamp(1.4rem,2.6vw,1.75rem);font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.section .lead{color:var(--muted);max-width:52rem;margin:0 0 26px}
.section p{max-width:54rem}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);margin:0 0 8px}

.breadcrumb{font-size:.8125rem;color:var(--muted);padding:14px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li::after{content:"/";margin-left:6px;color:var(--line)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--indigo)}

/* ---------- Award cards ---------- */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.award{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.award .glyph{font-size:1.6rem;line-height:1}
.pill{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;align-self:flex-start;
}
.pill-overall{background:var(--win);color:var(--indigo-dark)}
.pill-budget{background:#dcfce7;color:#15803d}
.pill-valet{background:#e0f2fe;color:#0369a1}
.pill-biz{background:#fef3c7;color:#b45309}
.pill-scale{background:#f1f5f9;color:#475569}
.award .logo-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.award .co-name{font-weight:700;font-size:1.05rem}
.award .stat{font-size:.95rem;color:var(--indigo-dark);font-weight:600}
.award .why{font-size:.9rem;color:var(--muted);margin:2px 0 4px}
.award .more{font-size:.875rem;font-weight:600;margin-top:auto}
.logo-box{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;
}
.logo-box img{object-fit:contain;width:100%;height:100%;padding:4px}
.logo-40{width:40px;height:40px}
.logo-56{width:56px;height:56px}

/* ---------- Matrix table ---------- */
.table-note{font-size:.875rem;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scroll-hint{display:inline-block;font-size:.78rem;font-weight:600;color:var(--indigo);background:var(--win);padding:3px 9px;border-radius:999px}
@media(min-width:960px){.scroll-hint{display:none}}
.table-scroll{
  overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff;
  -webkit-overflow-scrolling:touch;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
table.matrix,table.cat{
  border-collapse:collapse;width:100%;font-size:.9rem;
  font-variant-numeric:tabular-nums;min-width:880px;
}
table.cat{min-width:680px}
.matrix caption,.cat caption{
  text-align:left;font-size:.8125rem;color:var(--muted);
  padding:12px 14px;border-bottom:1px solid var(--line);caption-side:top;
}
.matrix thead th,.cat thead th{
  position:sticky;top:0;background:var(--alt);z-index:2;
  text-align:left;font-weight:700;font-size:.78rem;letter-spacing:.02em;
  color:#334155;text-transform:uppercase;white-space:nowrap;
  padding:11px 12px;border-bottom:2px solid var(--line);
  box-shadow:0 1px 0 var(--line);
}
.matrix th .sort,.cat th .sort{color:var(--neg);font-size:.7rem;margin-left:3px}
.matrix th[aria-sort="descending"],.cat th[aria-sort="descending"]{color:var(--indigo)}
.matrix th[aria-sort="descending"] .sort{color:var(--indigo)}
.matrix th[aria-sort="ascending"]{color:var(--indigo)}
.matrix th[aria-sort="ascending"] .sort{color:var(--indigo)}
.matrix tbody td,.cat tbody td{
  padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle;
}
.matrix tbody tr:last-child td,.cat tbody tr:last-child td{border-bottom:0}
.matrix tbody tr:hover,.cat tbody tr:hover{background:var(--alt)}
.matrix .is-winner,.cat .is-winner{background:var(--win)}
.matrix .is-winner:hover,.cat .is-winner:hover{background:#e6eafe}
.matrix .is-winner td:first-child,.cat .is-winner td:first-child{box-shadow:inset 4px 0 0 var(--indigo)}
.rank-cell{font-weight:700;font-size:.95rem;white-space:nowrap}
.provider-cell{min-width:200px}
.provider-cell .pc-row{display:flex;align-items:center;gap:10px}
.provider-cell .co{font-weight:600;color:var(--ink)}
.provider-cell a.co:hover{color:var(--indigo)}
.provider-cell .bestfor{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;font-weight:400}
@media(min-width:960px){
  .matrix .col-provider{position:sticky;left:0;background:#fff;z-index:1}
  .matrix thead .col-provider{z-index:3;background:var(--alt)}
  .matrix .is-winner .col-provider{background:var(--win)}
  .matrix tbody tr:hover .col-provider{background:var(--alt)}
}
.meter{position:relative;height:7px;width:74px;background:#e9edf3;border-radius:999px;overflow:hidden;margin-top:5px}
.meter span{position:absolute;inset:0 auto 0 0;height:100%;background:var(--indigo);border-radius:999px}
.score-num{font-weight:700}
.score-cell{white-space:nowrap;min-width:96px}
.yes{color:var(--pos);font-weight:700}
.no{color:var(--neg);font-weight:700}
.cell-pill{
  display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;
  background:#f1f5f9;color:#475569;white-space:nowrap;
}
.cell-sub{display:block;font-size:.68rem;color:var(--muted);margin-top:1px}
.chip{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border-radius:6px;background:var(--indigo);color:#fff;margin-left:4px;white-space:nowrap;
}
.verdict-cell{min-width:160px;font-size:.85rem;color:#334155}
.medal{font-size:1rem}
.rating-star{color:var(--amber)}

/* ---------- Verdict cards ---------- */
.verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.vcard{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.vcard.is-winner{border-color:#c7d2fe;background:linear-gradient(#fff,#fff) padding-box}
.vcard.is-winner{border-left:4px solid var(--indigo)}
.vcard .vhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.vcard .vname{font-weight:700;font-size:1.1rem}
.vcard .vscore{font-size:.85rem;color:var(--muted);font-weight:600}
.vcard .vverdict{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--indigo);margin:2px 0 12px}
.vcard h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:12px 0 6px}
.vcard ul{margin:0;padding-left:18px}
.vcard ul li{margin-bottom:5px;font-size:.92rem}
.vcard .pros li::marker{color:var(--pos)}
.vcard .cons li::marker{color:var(--amber)}
.vcard .vprice{font-weight:700;margin:12px 0 6px;font-size:1rem}
.vcard .vbottom{font-size:.9rem;color:#334155;border-top:1px solid var(--line);padding-top:12px;margin-top:auto;font-style:italic}

/* ---------- Compare-by-category block ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cat-link{
  display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,transform .08s;
}
.cat-link:hover{border-color:var(--indigo);text-decoration:none;transform:translateY(-1px)}
.cat-link .ct{font-weight:700;color:var(--ink);font-size:1.02rem;margin-bottom:3px}
.cat-link .cd{font-size:.875rem;color:var(--muted)}
.cat-link .cw{font-size:.8rem;color:var(--indigo);font-weight:600;margin-top:6px;display:block}

/* ---------- Prose ---------- */
.prose{max-width:50rem}
.prose p{margin:0 0 16px}
.prose h3{font-size:1.15rem;font-weight:700;margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.callout{
  background:var(--win);border:1px solid #c7d2fe;border-left:4px solid var(--indigo);
  border-radius:10px;padding:16px 18px;margin:0 0 24px;
}
.callout p{margin:0;font-weight:500;color:#1e293b}
.callout .wlabel{font-weight:700;color:var(--indigo-dark)}

/* ---------- Methodology strip ---------- */
.method-strip{
  background:var(--win);border:1px solid #c7d2fe;border-radius:12px;
  padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;margin-top:8px;
}
.method-strip p{margin:0;font-size:.95rem;color:#1e293b;max-width:none}
.method-strip .ms-title{font-weight:700;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{max-width:50rem}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 28px 14px 0;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:12px;color:var(--indigo);
  font-size:1.4rem;font-weight:400;line-height:1;transition:transform .2s;
}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--indigo-dark)}
.faq .ans{padding:0 0 16px;color:#334155}
.faq .ans p{margin:0 0 10px}
.faq .ans p:last-child{margin:0}

/* ---------- Data definition list (methodology) ---------- */
.deflist{margin:0 0 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.deflist .row{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
.deflist .row:last-child{border-bottom:0}
.deflist dt{font-weight:700;padding:14px 16px 4px;background:var(--alt)}
.deflist dd{margin:0;padding:4px 16px 14px;color:#334155}
@media(min-width:680px){
  .deflist .row{grid-template-columns:220px 1fr}
  .deflist dt{background:var(--alt);padding:14px 16px}
  .deflist dd{padding:14px 16px;border-left:1px solid var(--line)}
}

/* ---------- Contact / about extras ---------- */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 24px}
.fact{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.fact .fl{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.fact .fv{font-weight:700;font-size:1.05rem;margin-top:3px}

/* ---------- Footer ---------- */
.site-footer{background:var(--alt);border-top:1px solid var(--line);margin-top:0}
.footer-cols{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding:clamp(36px,5vw,56px) 0 28px;
}
@media(min-width:760px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr}}
.footer-cols h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 12px}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-cols li{margin-bottom:8px}
.footer-cols a{color:#334155;font-size:.92rem}
.footer-cols a:hover{color:var(--indigo)}
.footer-brand{font-weight:700;font-size:1.05rem;color:var(--ink);margin:0 0 8px}
.footer-brand b{color:var(--indigo)}
.footer-blurb{font-size:.9rem;color:var(--muted);margin:0 0 14px;max-width:30rem}
.legal{
  border-top:1px solid var(--line);padding:20px 0 36px;
  font-size:.8125rem;color:var(--muted);line-height:1.7;
}
.legal p{margin:0 0 8px;max-width:none}
.legal strong{color:#475569}

/* ---------- Utility ---------- */
.mt0{margin-top:0}
.center{text-align:center}
.small{font-size:.875rem;color:var(--muted)}
.inline-link{font-weight:600}