/* Perspectives index (and the 404 page): page header, featured post, post grid, connect strip */

/* Page header */
#maxsys .mx-phead{padding:48px 0 26px;max-width:760px;}
#maxsys .mx-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mx-muted);
  border:1px solid var(--mx-line);background:var(--mx-bg2);padding:6px 14px;border-radius:999px;margin-bottom:20px;}
#maxsys .mx-dot{width:8px;height:8px;border-radius:50%;background:var(--mx-accent2);box-shadow:0 0 0 4px rgba(46,230,192,.14);}
#maxsys .mx-phead h1{font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin:0 0 16px;font-weight:850;letter-spacing:-.5px;}
#maxsys .mx-phead h1 span{background:linear-gradient(120deg,var(--mx-accent),var(--mx-accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#maxsys .mx-phead p{color:var(--mx-muted);font-size:clamp(15px,2vw,18px);margin:0;}

/* Featured post */
#maxsys .mx-feature{margin:14px 0 30px;}
#maxsys .mx-feature a{display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  background:var(--mx-card);border:1px solid var(--mx-line);border-radius:18px;overflow:hidden;transition:.2s;}
#maxsys .mx-feature a:hover{border-color:var(--mx-accent);transform:translateY(-2px);}
#maxsys .mx-feature .txt{padding:30px;}
#maxsys .mx-feature .art{background:
    radial-gradient(420px 300px at 70% 20%,rgba(91,140,255,.35),transparent 60%),
    radial-gradient(360px 260px at 20% 90%,rgba(46,230,192,.28),transparent 60%),
    var(--mx-bg2);
  border-left:1px solid var(--mx-line);min-height:220px;display:grid;place-items:center;}
#maxsys .mx-feature .art svg{width:96px;height:96px;fill:none;stroke:var(--mx-accent2);stroke-width:1.4;opacity:.85;}
#maxsys .mx-kicker{font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mx-accent2);margin-bottom:12px;}
#maxsys .mx-feature h2{font-size:clamp(22px,3vw,30px);margin:0 0 12px;font-weight:800;letter-spacing:-.3px;line-height:1.14;}
#maxsys .mx-feature p{color:var(--mx-muted);font-size:15px;margin:0 0 18px;}
#maxsys .mx-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--mx-muted);font-size:12.5px;}
#maxsys .mx-meta .tag{border:1px solid var(--mx-line);background:var(--mx-bg2);color:var(--mx-text);
  padding:3px 10px;border-radius:7px;font-size:11.5px;}

/* Section label */
#maxsys .mx-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:34px 0 18px;border-top:1px solid var(--mx-line);padding-top:26px;}
#maxsys .mx-label h3{font-size:15px;letter-spacing:.4px;text-transform:uppercase;color:var(--mx-muted);margin:0;font-weight:700;}

/* Post grid */
#maxsys .mx-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;padding-bottom:20px;}
#maxsys .mx-post{background:var(--mx-card);border:1px solid var(--mx-line);border-radius:16px;
  padding:22px;transition:.2s;display:flex;flex-direction:column;min-height:190px;}
#maxsys .mx-post.live{cursor:pointer;}
#maxsys .mx-post.live:hover{border-color:var(--mx-accent);transform:translateY(-2px);}
#maxsys .mx-post h4{font-size:17px;margin:0 0 9px;font-weight:750;line-height:1.22;letter-spacing:-.2px;}
#maxsys .mx-post p{color:var(--mx-muted);font-size:13.5px;margin:0 0 16px;flex:1;}
#maxsys .mx-post .mx-meta{margin-top:auto;}
#maxsys .mx-soon{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--mx-muted);border:1px dashed var(--mx-line);padding:3px 9px;border-radius:7px;}
#maxsys .mx-post.draft{opacity:.72;}

/* Subscribe / connect strip */
#maxsys .mx-strip{margin:26px 0 6px;background:var(--mx-card);border:1px solid var(--mx-line);
  border-radius:18px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
#maxsys .mx-strip h3{margin:0 0 6px;font-size:19px;font-weight:800;}
#maxsys .mx-strip p{margin:0;color:var(--mx-muted);font-size:14px;max-width:520px;}
#maxsys .mx-strip .mx-btn{padding:12px 22px;border-radius:11px;font-weight:700;font-size:14.5px;
  background:linear-gradient(135deg,var(--mx-accent),var(--mx-accent2));color:#04122b;white-space:nowrap;}
#maxsys .mx-strip .mx-btn:hover{transform:translateY(-1px);}

@media(max-width:480px){
  /* keep the pill on one line on small phones (fits down to 320px) */
  #maxsys .mx-pill{font-size:11.5px;padding:6px 12px;gap:7px;}
}
@media(max-width:820px){
  #maxsys .mx-feature a{grid-template-columns:1fr;}
  #maxsys .mx-feature .art{border-left:0;border-top:1px solid var(--mx-line);min-height:150px;order:-1;}
}