:root{
  --ink:#0c1118; --ink-2:#121925; --panel:#161f2e; --panel-2:#1b2434;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --txt:#eef2f7; --txt-dim:#9fb0c4; --txt-mute:#6c7d92;
  --clay:#d8763f; --clay-soft:#e89a6b; --chalk:#e7e2d6; --grass:#5fa777;
  --warn:#e0584f; --good:#56b487;
  --maxw:1120px;--border: rgba(255,255,255,0.07);--dark:#0d0f12; --dark2: #161920; --dark3: #242831;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font-family:'Spline Sans',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img {max-width:100%; height:auto}

/* -- NAV -- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,15,18,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1rem,4vw,3rem);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  height: 60px;
}
.nav-inner .logo img {
	max-width:200px;
	height:auto;
	margin-top:5px;
	}
.nav-inner nav ul {
  float: right;
  margin-right: 20px;
}

.nav-inner nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

.nav-inner nav ul li a {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 1rem;
  height: 60px; display: flex; align-items: center;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  color: var(--txt-dim);
  text-transform: uppercase;
}

.nav-inner nav a.active,
.nav-inner nav a:hover {
   color: var(--clay-soft); border-bottom-color: var(--clay-soft);
}
.nav-inner nav .checkbtn {
  font-size: 22px;
  color: white;
  float: right;
  line-height: 55px;
  margin-right: 18px;
  cursor: pointer;
  display: none;
}

.nav-inner nav #check {
  display: none;
}


/* Responsive media query code for small screen */
@media (max-width: 767px) {
  .nav-inner nav .checkbtn {
    display: block;
  }

  .nav-inner nav label.logo {
    font-size: 22px;
  }

  .nav-inner nav ul {
 	background:var(--dark2);
    position: fixed;
    width: 100%;
    top: 60px;
    left: -100%;
    text-align: center;
	z-index:2;
    transition: all .5s;
  }

  .nav-inner nav ul li {
    display: block;
    line-height: 30px;
  }
  .nav-inner nav ul li a {
  	height:40px;
	padding: 0 2rem;
	}
  .nav-inner nav a:hover,
  .nav-inner nav a.active {
    background: none;
  }

  .nav-inner nav #check:checked~ul {
    left: 0;
  }
}

/* breadcrumb */
.crumb{font-size:12.5px;color:var(--txt-mute);padding: 8px 0 8px;}
.crumb a:hover{color:var(--clay-soft)}

/* hero */
.hero{padding:34px 0 40px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:
   radial-gradient(680px 320px at 88% -8%,rgba(216,118,63,.18),transparent 60%),
   radial-gradient(540px 300px at 6% 120%,rgba(95,167,119,.10),transparent 60%);pointer-events:none}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--clay);font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--clay)}
.hero h1{font-size:clamp(34px,6vw,60px);max-width:18ch;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--clay-soft)}
.lede{font-size:clamp(16px,2vw,19px);color:var(--txt-dim);max-width:62ch;margin-bottom:8px}
.updated{font-size:12.5px;color:var(--txt-mute);margin-top:18px}

/* diamond rule */
.dwrap{display:flex;align-items:center;gap:14px;margin:46px 0 26px}
.dwrap h2{font-size:clamp(22px,3.4vw,30px)}
.dwrap .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600;white-space:nowrap}
.dwrap:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* outlook table */
.rank{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink-2)}
.rank-row{display:grid;grid-template-columns:46px 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.rank-row:last-child{border-bottom:0}
.rank-row:hover{background:var(--panel)}
.rank-no{font-family:'Bricolage Grotesque';font-weight:800;font-size:24px;color:var(--clay);text-align:center}
.rank-team{font-family:'Bricolage Grotesque';font-weight:800;font-size:18px;color:var(--txt)}
.rank-sub{font-size:13px;color:var(--txt-dim);margin-top:2px}
.rank-tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.t-hot{background:rgba(224,88,79,.14);color:#f0897f;border:1px solid rgba(224,88,79,.3)}
.t-rise{background:rgba(86,180,135,.14);color:#79cda6;border:1px solid rgba(86,180,135,.3)}
.t-watch{background:rgba(216,118,63,.14);color:var(--clay-soft);border:1px solid rgba(216,118,63,.3)}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.card{display:block;border:1px solid var(--line);border-radius:14px;padding:22px;background:linear-gradient(180deg,var(--panel),var(--ink-2));transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card .ct{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:10px}
.card h3{font-size:21px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--txt-dim);margin-bottom:14px}
.card .go{font-size:13px;color:var(--clay-soft);font-weight:600}
.card .row{display:flex;gap:8px;margin-bottom:13px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--txt-dim);border:1px solid var(--line)}

/* explain blocks */
.lux{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:8px}
.lux div{background:var(--ink-2);padding:20px 18px}
.lux b{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;color:var(--clay-soft);display:block}
.lux small{font-size:12.5px;color:var(--txt-dim);display:block;margin-top:4px}

/* prose */
.prose p{font-size:15.5px;color:var(--txt-dim);max-width:74ch;margin-bottom:14px}
.prose strong{color:var(--txt)}
/*** image  **/
.image-wrap {background:var(--dark2); border:1px solid var(--dark3); padding:10px; text-align:center; margin:10px 0;}
.image-wrap-mid {background:var(--dark2); border:1px solid var(--dark3); padding:10px; text-align:center; max-width:900px; margin:10px auto}
/* faq */
.faq {margin-top:15px;}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--ink-2);overflow:hidden}
.faq summary{cursor:pointer;padding:17px 20px;font-family:'Bricolage Grotesque';font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--clay);font-size:22px;font-weight:400;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px;font-size:14.5px;color:var(--txt-dim);max-width:76ch}

/* footer */
footer{border-top:1px solid var(--line);margin-top:60px;padding:40px 0 50px;background:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
footer .head{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);margin-bottom:14px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{font-size:13.5px;color:var(--txt-dim)}
footer a:hover{color:var(--clay-soft)}
.fbrand{font-family:'Bricolage Grotesque';font-weight:800;font-size:19px;color:var(--chalk);margin-bottom:12px}
.fbrand span{color:var(--clay)}
.fnote{font-size:12.5px;color:var(--txt-mute);max-width:42ch}
.fbot{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:12px;color:var(--txt-mute)}

/* -- AD PLACEHOLDER -- */
.ad-slot {
  background: var(--dark2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center; padding: 1.5rem;
  color: var(--txt-mute); font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}


@media(max-width:760px){
  .nav ul{gap:14px}
  .fgrid{grid-template-columns:1fr 1fr}
  .rank-row{grid-template-columns:38px 1fr;gap:12px}
  .rank-tag{grid-column:2;justify-self:start;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.center-block {display:block; margin-left:auto; margin-right:auto}
/***** SUB PAGES **/
.verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:26px}
.verdict div{background:var(--ink-2);padding:16px 18px}
.verdict b{font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;color:var(--clay-soft);display:block;line-height:1.1}
.verdict small{font-size:11.5px;color:var(--txt-dim);display:block;margin-top:5px;text-transform:uppercase;letter-spacing:.05em}
.updated{font-size:12.5px;color:var(--txt-mute);margin-top:20px}
.act{margin:46px 0 0}
.act-h{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.act-h .tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:999px;white-space:nowrap}
.tag-for{background:rgba(86,180,135,.14);color:#79cda6;border:1px solid rgba(86,180,135,.32)}
.tag-warn{background:rgba(224,88,79,.14);color:#f0897f;border:1px solid rgba(224,88,79,.32)}
.tag-x{background:rgba(216,118,63,.16);color:var(--clay-soft);border:1px solid rgba(216,118,63,.34)}
.act h2{font-size:clamp(23px,3.6vw,32px)}
.act .sub{font-size:14px;color:var(--txt-mute);margin:4px 0 20px;max-width:60ch}
.act p{font-size:15.5px;color:var(--txt-dim);max-width:74ch;margin-bottom:15px}
.act p strong{color:var(--txt)}
.points{display:grid;gap:12px;margin:6px 0 4px}
.pt{border:1px solid var(--line);border-left:3px solid var(--good);border-radius:10px;padding:15px 18px;background:var(--ink-2)}
.pt.bad{border-left-color:var(--warn)}
.pt h4{font-size:16px;margin-bottom:5px}
.pt p{font-size:14px;color:var(--txt-dim);margin:0;max-width:none}
.xbox{border:1px solid rgba(216,118,63,.3);border-radius:14px;padding:24px;background:linear-gradient(180deg,rgba(216,118,63,.07),var(--ink-2));margin-top:6px}
.xbox .who{font-family:'Bricolage Grotesque';font-weight:800;font-size:24px;color:var(--clay-soft);margin-bottom:6px}
.xbox .role{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-mute);margin-bottom:14px}
.xbox p{margin-bottom:0}
.nextrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.nextrow a{font-size:13.5px;color:var(--clay-soft);font-weight:600;border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:border-color .15s}
.nextrow a:hover{border-color:var(--line-2)}