/* Shared styles for /guides/* pillar pages.
   Mirrors the design tokens used by the rest of elevatedtech.us. */

:root{
  --bg:#111113;--bg-alt:#0a0a0c;--bg-dark:#000;--bg-darker:#000;
  --bg-glow:#3E3AF2;--bg-glow-soft:#281A4D;
  --accent:#7B5BF0;--accent-deep:#42118F;
  --text:#f0f0f2;--text-soft:rgba(255,255,255,.55);--text-faint:rgba(255,255,255,.4);
  --border:rgba(255,255,255,.06);--border-strong:rgba(186,158,255,.14);
  --surface:rgba(255,255,255,.04);--surface-strong:rgba(186,158,255,.07);
  --light:#f0f0f2;--dark:#111113;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,h4,h5,h6,p{font-weight:inherit;margin:0;padding:0;}
em{font-style:italic;font-weight:500;padding:0 .08em;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
@media (min-width:992px){ body{font-size:1.05vw;} }
@media (min-width:1600px){ body{font-size:17px;} }

.nav-wrap{background:rgba(17,17,19,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);padding:1.1em 0;position:sticky;top:0;z-index:100;}
.nav-wrap::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(123,91,240,.5) 50%,transparent 100%);pointer-events:none;}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 5em;}
@media (max-width:991px){ .wrap{padding:0 20px;} }
.nav-inner{display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:.75em;}
.nav-logo img{height:1.6em;width:auto;}
.nav-links{display:flex;gap:1.75em;}
.nav-links a{font-size:.85em;color:var(--text);transition:opacity .2s;}
.nav-links a:hover{opacity:.6;}
@media (max-width:991px){ .nav-links{display:none;} }

.article-wrap{max-width:48em;margin:0 auto;padding:4em 0 6em;}
@media (max-width:991px){ .article-wrap{padding:2.5em 0 4em;} }

.crumbs{font-size:.78em;color:var(--text-faint);margin-bottom:1.5em;letter-spacing:.04em;}
.crumbs a{color:var(--text-soft);transition:color .2s;}
.crumbs a:hover{color:var(--accent);}

h1.title{font-size:3em;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:.5em;}
@media (max-width:991px){ h1.title{font-size:2.2em;} }
@media (max-width:600px){ h1.title{font-size:1.75em;} }

.byline{display:flex;align-items:center;gap:.85em;color:var(--text-soft);font-size:.88em;margin:1.5em 0 2.5em;padding-bottom:1.5em;border-bottom:1px solid var(--border);}
.byline img{width:2.4em;height:2.4em;border-radius:50%;}
.byline a{color:var(--text);font-weight:500;}
.byline a:hover{color:var(--accent);}
.byline .sep{color:var(--text-faint);}

.lede{font-size:1.2em;line-height:1.55;color:var(--text);margin-bottom:2em;}
.lede strong{color:var(--text);font-weight:500;}

.tldr{background:var(--surface);border-left:3px solid var(--accent);border-radius:.5em;padding:1.5em 1.75em;margin:2em 0;}
.tldr-h{font-size:.78em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.75em;}
.tldr ul{list-style:none;display:flex;flex-direction:column;gap:.6em;}
.tldr li{padding-left:1.4em;position:relative;color:var(--text);}
.tldr li::before{content:"→";position:absolute;left:0;color:var(--accent);}

h2{font-size:1.75em;font-weight:500;letter-spacing:-.02em;margin:2.5em 0 .75em;line-height:1.2;}
h3{font-size:1.25em;font-weight:500;letter-spacing:-.01em;margin:1.75em 0 .5em;line-height:1.3;}
p{margin-bottom:1.2em;}
p:last-child{margin-bottom:0;}
a.inline{color:var(--accent);border-bottom:1px solid rgba(123,91,240,.3);transition:border-color .2s;}
a.inline:hover{border-color:var(--accent);}
strong{color:var(--text);font-weight:500;}

.stat-row{background:var(--surface-strong);border:1px solid var(--border-strong);border-radius:1em;padding:1.5em 1.75em;margin:1.5em 0;}
.stat-row-h{font-size:.78em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.75em;}

.role-card{background:var(--surface);border:1px solid var(--border);border-radius:1em;padding:1.75em 2em;margin:1.25em 0;transition:border-color .2s, transform .2s;}
.role-card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.role-rank{font-size:.78em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.role-h{font-size:1.4em;font-weight:500;letter-spacing:-.015em;margin:.4em 0 .8em;}
.role-meta{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:1em;}
.role-meta .pill{font-size:.75em;background:var(--bg-alt);border:1px solid var(--border);border-radius:1em;padding:.3em .85em;color:var(--text-soft);}
.role-meta .pill.green{color:#7be08f;border-color:rgba(123,224,143,.3);}
.role-card p{font-size:.97em;color:var(--text-soft);margin-bottom:.9em;}
.role-card p:last-child{margin-bottom:0;}
.role-card .why{padding-top:1em;border-top:1px solid var(--border);font-size:.93em;color:var(--text);}
.role-card .why strong{color:var(--accent);}
.role-card .breakin{margin-top:.8em;font-size:.93em;color:var(--text);}

table.cmp{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.92em;}
table.cmp th, table.cmp td{padding:.85em .9em;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
table.cmp th{color:var(--text-soft);font-weight:500;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-alt);}
table.cmp tr:last-child td{border-bottom:none;}

.quote-box{background:var(--surface-strong);border:1px solid var(--border-strong);border-radius:1em;padding:1.75em 2em;margin:2em 0;position:relative;}
.quote-box::before{content:"\201C";position:absolute;top:.15em;left:.35em;font-size:4em;color:var(--accent);opacity:.25;line-height:1;font-family:Georgia, serif;}
.quote-box p{font-size:1.05em;line-height:1.65;color:var(--text);margin-bottom:.85em;font-style:italic;}
.quote-box p:last-of-type{margin-bottom:0;}
.quote-attr{font-size:.85em;color:var(--text-soft);font-style:normal;margin-top:1em;display:flex;align-items:center;gap:.6em;}
.quote-attr img{width:2em;height:2em;border-radius:50%;}

.faq-h{font-size:1.1em;font-weight:500;margin-bottom:.4em;color:var(--text);}
.faq-body{color:var(--text-soft);margin-bottom:1.6em;}

.cta-bottom{background:linear-gradient(135deg,var(--bg-glow-soft) 0%, var(--bg-darker) 100%);border:1px solid var(--border-strong);border-radius:1.25em;padding:2.5em 2.5em;margin-top:3em;text-align:center;}
.cta-bottom h3{font-size:1.5em;font-weight:500;letter-spacing:-.02em;margin-bottom:.65em;color:var(--text);}
.cta-bottom p{color:var(--text-soft);max-width:34em;margin:0 auto 1.5em;}
.btn{align-items:center;background:var(--light);border-radius:2em;color:var(--dark);cursor:pointer;display:inline-flex;font-size:1em;font-weight:500;gap:.85em;padding:.5em .5em .5em 1.4em;transition:opacity .2s;}
.btn:hover{opacity:.88;}
.btn-icon-box{align-items:center;background:var(--dark);border-radius:50%;color:var(--light);display:flex;height:2em;justify-content:center;width:2em;}
.btn-icon-box svg{width:.85em;height:.85em;}

.related-section{background:var(--bg-alt);padding:4em 0;border-top:1px solid var(--border);}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-top:2em;}
@media (max-width:991px){ .related-grid{grid-template-columns:1fr;} }
.related-card{background:var(--surface);border:1px solid var(--border);border-radius:.85em;padding:1.4em 1.5em;transition:background .2s, border-color .2s, transform .2s;}
.related-card:hover{background:var(--surface-strong);border-color:var(--border-strong);transform:translateY(-2px);}
.related-card .tag{font-size:.72em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.65em;}
.related-card .t{font-size:1.05em;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--text);}
.related-h{font-size:.78em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);text-align:center;margin-bottom:.5em;}

.footer-section{background:var(--bg-darker);color:var(--light);padding:5em 0 2.5em;}
.footer-top{display:flex;justify-content:space-between;gap:4em;flex-wrap:wrap;}
.footer-text{max-width:28em;}
.footer-text .h3{color:var(--light);font-size:1.5em;letter-spacing:-.02em;}
.footer-text p{color:rgba(255,255,255,.55);margin-top:.75em;font-size:.95em;}
.footer-cols{display:flex;gap:4em;}
.footer-col{display:flex;flex-direction:column;gap:.75em;min-width:8em;}
.footer-col-h{font-size:.72em;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:.4em;}
.footer-link{color:rgba(255,255,255,.7);font-size:.92em;transition:color .2s;}
.footer-link:hover{color:var(--light);}
.footer-divider{height:1px;background:rgba(255,255,255,.1);margin:4em 0 1.5em;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em;}
.footer-bottom p,.footer-bottom a{color:rgba(255,255,255,.5);font-size:.8em;}
@media (max-width:991px){ .footer-top{flex-direction:column;gap:2.5em;} .footer-cols{flex-wrap:wrap;gap:2em;} }