/* Redesign phases 5-6 (Nov 2026): Start Here, quiz, 6 collector profiles, About, legal pages, articles hub.
   Load after pages.css + redesign.css + article.css. No card photos here on purpose (icons, numbers, charts). */
html { overflow-x:hidden; } body { overflow-x:clip; } /* no sideways wobble */

/* header band with a visual on the right */
.ax-head.has-vis { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px 56px; align-items:center; }
.ax-head.has-vis .ax-htext { min-width:0; }
.article.ax .ax-head.has-vis h1 { font-size:clamp(34px,4.4vw,54px); }
.ax-vis { position:relative; justify-self:center; width:min(420px,100%); margin:12px 0 36px; }
.ax-vis .rx-glow { inset:-10% -4%; }
.pv-chip { position:absolute; z-index:3; background:rgba(7,13,31,.92); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:16px; padding:10px 14px; box-shadow:0 20px 40px -18px rgba(0,0,0,.8); }
.pv-chip small { display:block; font:600 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pv-chip strong { font:700 19px var(--sans); letter-spacing:-.02em; color:var(--text); }
.pv-chip.a { top:-14px; left:-10px; } .pv-chip.b { bottom:34px; right:-10px; }
.pv-pill { text-decoration:none !important; position:absolute; z-index:3; left:50%; bottom:-20px; transform:translateX(-50%); background:var(--accent); color:var(--on-text); white-space:nowrap; font:800 14.5px var(--sans); padding:10px 20px; border-radius:999px; }
.article.ax .ax-tagline { font:700 clamp(17px,1.8vw,20px)/1.3 var(--sans); margin:-6px 0 16px; color:var(--c,var(--accent)); }
@media (max-width:900px) {
  .ax-head.has-vis { grid-template-columns:minmax(0,1fr); }
  .ax-vis { width:min(360px,88%); margin:4px auto 40px; }
}
@media (max-width:560px) { .pv-chip.a { left:0; } .pv-chip.b { right:0; } .pv-chip strong { font-size:16px; } .pv-pill { font-size:13px; padding:9px 16px; } }

/* Start Here: 9-step board */
.pv-steps { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px; border-radius:26px; background:linear-gradient(160deg,#16213f,#0a1128); border:1px solid var(--line-2); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.pv-steps a { display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1; padding:12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); text-decoration:none; color:var(--soft); font:600 13px/1.2 var(--sans); transition:transform .15s, border-color .15s; }
.pv-steps a b { font:800 26px/1 var(--sans); color:var(--accent); letter-spacing:-.03em; }
.pv-steps a:hover { transform:translateY(-2px); border-color:var(--accent); color:var(--text); }
.pv-steps a:first-child { background:var(--accent); color:var(--on-text); border-color:transparent; } .pv-steps a:first-child b { color:var(--on-text); }
@media (max-width:420px) { .pv-steps { gap:7px; padding:12px; } .pv-steps a { padding:9px; font-size:11.5px; } .pv-steps a b { font-size:21px; } }

/* Quiz + profiles: archetype tiles */
.pv-types { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pv-types a { display:grid; place-items:center; gap:6px; aspect-ratio:1; padding:12px 8px; border-radius:20px; background:linear-gradient(160deg,#16213f,#0a1128); border:1px solid var(--line-2); text-decoration:none; color:var(--soft); font:700 12.5px/1.2 var(--sans); text-align:center; transition:transform .15s, border-color .15s; }
.pv-types a:hover { transform:translateY(-3px); border-color:var(--c); color:var(--text); }
.pv-types img { width:52%; height:auto; }
@media (max-width:420px) { .pv-types { gap:8px; } .pv-types a { font-size:11px; border-radius:16px; } }

.pv-arch { position:relative; z-index:1; display:grid; place-items:center; aspect-ratio:1; width:78%; margin:0 auto; border-radius:34px; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),linear-gradient(160deg,#16213f,#0a1128); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.pv-arch img { width:58%; height:auto; }

/* portfolio split as a donut + legend */
.ax .pf { display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px; margin:22px 0; }
.pf-donut { width:180px; aspect-ratio:1; border-radius:50%; background:var(--g); display:grid; place-items:center; -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%); mask:radial-gradient(circle,transparent 52%,#000 53%); }
.pf-wrap { position:relative; width:180px; }
.pf-mid { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.pf-mid strong { font:800 30px/1 var(--sans); color:var(--text); } .pf-mid small { font:600 11.5px/1.3 var(--sans); color:var(--muted); max-width:90px; margin-top:4px; }
.ax .pf ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ax .pf li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; align-items:center; margin:0; font-size:15.5px; }
.ax .pf li i { width:12px; height:12px; border-radius:4px; background:var(--c); }
.ax .pf li b { font:700 15px var(--mono); color:var(--text); }
@media (max-width:560px) { .ax .pf { grid-template-columns:1fr; justify-items:center; padding:20px; } .ax .pf ul { width:100%; } }

/* quiz page: types grid + quiz box */
.ax .types { gap:12px; }
.ax .type { border-radius:18px; transition:transform .15s, border-color .15s; }
.ax .type:hover { transform:translateY(-2px); }
.ax .quiz { border-radius:24px; }
.ax .recs .rec { border-radius:18px; }

/* "who's behind it" + about */
.pv-about { position:relative; z-index:1; display:grid; gap:12px; }
.pv-about .row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pv-stat { border-radius:20px; padding:16px; background:linear-gradient(160deg,#16213f,#0a1128); border:1px solid var(--line-2); }
.pv-stat strong { display:block; font:800 32px/1 var(--sans); color:var(--accent); letter-spacing:-.03em; }
.pv-stat span { display:block; margin-top:6px; font:600 12.5px/1.3 var(--sans); color:var(--soft); }
.pv-stat.wide { display:flex; align-items:center; gap:14px; }
.pv-stat.wide img { width:84px; height:63px; object-fit:cover; border-radius:10px; flex:none; }
.pv-stat.wide strong { font-size:19px; color:var(--text); letter-spacing:-.01em; }
@media (max-width:420px) { .pv-stat { padding:12px; } .pv-stat strong { font-size:24px; } .pv-stat span { font-size:11px; } }

/* legal pages: quieter header */
.ax.ax-legal .ax-head { padding-bottom:0; }
.article.ax.ax-legal h1 { font-size:clamp(32px,4vw,46px); }
.ax-legal .ax-meta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }

/* articles hub */
.rx-hub { max-width:1180px; margin:0 auto; padding:20px 16px 0; }
.rx-hub .hub-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px 56px; align-items:center; max-width:1080px; margin:0 auto 36px; }
.rx-hub h1 { font-size:clamp(34px,4.6vw,54px); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin:12px 0 16px; }
.rx-hub .lede { font-size:clamp(17px,1.8vw,20px); color:var(--soft); margin:0 0 14px; }
.rx-hub .intro { color:var(--muted); font-size:15.5px; max-width:38em; }
.hub-stats { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.rx-hub .chips { max-width:1080px; margin:0 auto 26px; display:flex; flex-wrap:wrap; gap:8px; }
.rx-hub .chip { border-radius:999px; padding:9px 16px; font:600 14px var(--sans); }
.rx-hub .chip[aria-pressed="true"] { background:var(--accent); color:var(--on-text); border-color:transparent; }
.rx-hub .posts { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.rx-hub .post { border-radius:22px; overflow:hidden; padding:0 0 18px; display:flex; flex-direction:column; transition:transform .15s, border-color .15s; }
.rx-hub .post:hover { transform:translateY(-3px); border-color:var(--c,var(--accent)); }
.rx-hub .post .thumb { display:block; aspect-ratio:480/252; overflow:hidden; margin:0 0 14px; }
.rx-hub .post .thumb img { width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.rx-hub .post > :not(.thumb) { padding-inline:20px; }
.rx-hub .post h2 { font-size:19px; line-height:1.25; margin:6px 0 8px; }
.rx-hub .post > p:not(.eyebrow):not(.meta) { color:var(--soft); font-size:15px; }
.rx-hub .post .meta { margin-top:auto; padding-top:8px; }
.rx-hub .post.featured { grid-column:1/-1; padding:28px 28px 26px; background:linear-gradient(135deg,rgba(232,185,49,.16),rgba(90,212,238,.06)); border-color:rgba(232,185,49,.4); }
.rx-hub .post.featured > * { padding-inline:0; }
.rx-hub .post.featured h2 { font-size:clamp(22px,2.4vw,28px); }
@media (max-width:900px) { .rx-hub .hub-head { grid-template-columns:minmax(0,1fr); } .hub-stats { max-width:420px; } }
@media (max-width:420px) { .rx-hub .posts { grid-template-columns:minmax(0,1fr); } .rx-hub .post.featured { padding:22px 20px; } }
@media (prefers-reduced-motion:reduce) { .pv-steps a, .pv-types a, .rx-hub .post, .ax .type { transition:none; } }
.pv-steps, .pv-types { margin-bottom:30px; }