/* =========================================================
   StorageRank Design System v2 — content pages layer
   Loaded AFTER each page's own <style> so it harmonises
   older page components with the v2 look.
   ========================================================= */

/* shell robustness against page-level element selectors */
.nav ul,.nav li,.sheet a,.foot ul,.foot li,.foot h4{margin:0;padding:0;list-style:none}
.foot li{font-size:inherit;margin:0}
.foot p{margin:14px 0 0;font-size:14px;line-height:1.65}
.foot a,.nav a,.sheet a{color:inherit}
.nav .logo span,.foot .logo span{color:#fff}
.nav-space{height:72px}
@media(max-width:640px){.nav-space{height:64px}}

/* page canvas */
body.pg{background:var(--bg);color:var(--t);font-family:var(--sans)}
body.pg::before{content:"";position:fixed;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 85% -10%,rgba(139,92,246,.22),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 0%,rgba(6,182,212,.08),transparent 70%)}
body.pg::after{content:"";position:fixed;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

/* headings */
.pg h1,.pg .h1-alt{font-family:var(--sans);font-weight:850;letter-spacing:-.035em;color:#fff}
.pg h2{letter-spacing:-.02em}
.pg main h1 em,.pg main .h1-alt em,.pg h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* eyebrows → mono kicker */
.pg .eyebrow,.pg .article-tag,.pg .blog-eyebrow,.pg article.w>.tag,.pg .lbl,.pg .kick{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v3)}
.pg .article-meta,.pg article.w>.meta,.pg .updated,.pg .card-date{font-family:var(--mono);font-size:12px;color:var(--m)}

/* hero bands */
.pg .hero,.pg .blog-hero{border-bottom-color:var(--line)}

/* body copy */
.pg article p,.pg .article-wrap p,.pg .wrap p{color:var(--t2)}
.pg article a:not([class]),.pg .article-wrap a:not([class]),.pg .wrap p a:not([class]),.pg .section a:not([class]){color:var(--v3);text-decoration-color:rgba(196,181,253,.4);text-underline-offset:3px}

/* callouts / notes */
.pg .callout,.pg .note,.pg .intro-note,.pg .insight{background:linear-gradient(160deg,rgba(40,28,80,.35),rgba(14,16,30,.6));border:1px solid rgba(167,139,250,.28);border-left:3px solid var(--c);border-radius:14px}

/* CTA boxes */
.pg .cta-box{background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(139,92,246,.28),transparent 70%),linear-gradient(180deg,#120E26,#0B0F19);border:1px solid rgba(167,139,250,.35);border-radius:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.pg .cta-box h3,.pg .cta-box h2{color:#fff;letter-spacing:-.02em}

/* buttons */
.pg .cta-btn,.pg .tbtn,.pg .calc-btn,.pg .sup-btn,.pg a.btn:not(.btn-p):not(.btn-g){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:12px;background:#7C3AED;color:#fff!important;font-weight:700;font-size:14.5px;letter-spacing:0;text-decoration:none;border:0;box-shadow:0 10px 30px -10px rgba(139,92,246,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.pg .cta-btn:hover,.pg .tbtn:hover,.pg .calc-btn:hover,.pg .sup-btn:hover,.pg a.btn:not(.btn-p):not(.btn-g):hover{background:#8B5CF6;transform:translateY(-1px)}
.pg a.btn.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line2);box-shadow:none}

/* cards */
.pg .card,.pg .blog-card,.pg .tool,.pg .rel-card,.pg .person-card,.pg .stat-box,.pg .score-box,.pg .bench-box,.pg .platform-box,.pg .signal-box,.pg .timeline-box,.pg .result-box,.pg .calc,.pg .scorecard,.pg .method,.pg .update-log,.pg .sup-box,.pg .share-box{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:18px}
.pg .blog-card,.pg .tool,.pg .rel-card,.pg a.card{transition:border-color .3s,transform .35s var(--ease),box-shadow .3s}
.pg .blog-card:hover,.pg .tool:hover,.pg .rel-card:hover,.pg a.card:hover{border-color:rgba(167,139,250,.45);transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(139,92,246,.7)}
.pg .card-featured{background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(14,16,30,.6));border-color:rgba(167,139,250,.4)}
.pg .card-tag,.pg .rel-label{font-family:var(--mono);letter-spacing:.06em}

/* tables (rankings, comparisons) */
.pg table{border-collapse:separate;border-spacing:0}
.pg th{font-family:var(--mono);font-weight:500;letter-spacing:.06em;color:var(--m2)}
.pg td,.pg th{border-bottom:1px solid var(--line)}
.pg tbody tr{transition:background .2s}
.pg tbody tr:hover td{background:rgba(139,92,246,.06)}
.pg .rank{font-family:var(--mono);font-weight:600;color:var(--v3)}
.pg .idx{font-family:var(--mono);color:var(--c)}
.pg .bar{background:rgba(255,255,255,.06);border-radius:6px}
.pg .bar span,.pg .bar-fill{background:var(--grad)!important;border-radius:6px}

/* FAQ blocks */
.pg .fitem,.pg .faq-item{border-bottom:1px solid var(--line)}
.pg .fq,.pg .faq-q{border-bottom:0;font-weight:650;color:#fff}
.pg .faq-icon{color:var(--v2)}

/* forms on content pages */
.pg input[type=number],.pg input[type=text],.pg select{border-radius:12px}

/* code */
.pg .code-block,.pg pre{font-family:var(--mono);border-radius:14px;border:1px solid var(--line);background:#05070C}

/* legal + small pages */
.pg .wrap{max-width:var(--wrapmax,1100px)}
.pg .step b,.pg .step-t{color:#fff}


/* mobile */
@media(max-width:768px){
  .pg .cta-box{border-radius:18px}
  .pg .cta-btn,.pg .tbtn,.pg .calc-btn,.pg .sup-btn{width:100%}
}

/* hub grids used a 1px-gap "border" trick; give them real gaps */
.pg .blog-grid,.pg main>.grid{background:transparent;gap:16px}

/* answer-first box (AEO) */
.pg .qa-box{margin:22px 0 30px;padding:20px 22px;border-radius:16px;background:linear-gradient(160deg,rgba(34,211,238,.08),rgba(139,92,246,.08));border:1px solid rgba(34,211,238,.35)}
.pg .qa-k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pg .qa-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.pg .qa-box p{margin:0;font-size:16px;line-height:1.7;color:#E6EAF2}
.pg .meta a[rel=author],.pg .article-meta a[rel=author]{color:var(--v3);text-decoration:none;border-bottom:1px solid rgba(196,181,253,.4)}
/* related reading */
.pg .related2{margin:48px 0 32px}
.pg .rel2-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--v3);margin-bottom:14px}
.pg .rel2-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pg .rel2{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));text-decoration:none;transition:border-color .25s,transform .3s var(--ease)}
.pg .rel2:hover{border-color:rgba(167,139,250,.45);transform:translateY(-2px)}
.pg .rel2-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.pg .rel2-t{font-size:15px;font-weight:700;color:#fff;line-height:1.35}
.pg .rel2-o{border-color:rgba(34,211,238,.3)}
.pg .rel2-o .rel2-k{color:var(--c)}

/* visuals (Canva) */
.pg .cover{margin:6px 0 26px;border-radius:18px;overflow:hidden;border:1px solid rgba(167,139,250,.25);background:#07090F;box-shadow:0 24px 60px -30px rgba(139,92,246,.6)}
.pg .cover-img{display:block;width:100%;height:auto;aspect-ratio:1400/707}
.pg .hero-art{margin:8px 0 28px;border-radius:20px;overflow:hidden;border:1px solid rgba(167,139,250,.28);background:#07090F;box-shadow:0 30px 80px -30px rgba(139,92,246,.65);max-width:1004px}
.pg .hero-img{display:block;width:100%;height:auto;aspect-ratio:1600/899}
.pg .card-img{display:block;width:calc(100% + 64px);max-width:none;margin:-32px -32px 6px;height:auto;aspect-ratio:700/353;object-fit:cover;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0}
.pg .blog-card{overflow:hidden}
@media(max-width:768px){.pg .card-img{width:calc(100% + 48px);margin:-24px -24px 6px}}
.pg main a[href^="mailto:"]:not([class]){color:var(--v3)}