/* ===========================================================================
   AKON INVESTORS — inner page components (loads after style.css)
   =========================================================================== */

/* active nav item */
.nav > a.on{color:var(--red)}

/* ---------------------------------------------------------------- page hero */
.phero{background:var(--ink);color:#fff;border-bottom:3px solid var(--red);
  padding:clamp(40px,5vw,76px) 0 clamp(36px,4.4vw,64px);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:12px;background:var(--stripe);opacity:.9}
.phero h1{margin:14px 0 0;color:#fff;max-width:20ch}
.phero .lead{margin-top:18px;max-width:70ch;color:rgba(255,255,255,.8)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.crumb a:hover{color:var(--red)}
.crumb span{color:rgba(255,255,255,.3)}
.crumb b{color:#fff;font-weight:600}
.ph-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.phero .btn-out{border-color:#fff;color:#fff}
.phero .btn-out:hover{color:#fff}

/* ---------------------------------------------------------------- point grid */
.ptgrid{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--ink);border-bottom:0}
.dark .ptgrid{border-color:#fff}
.pt{padding:26px 28px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  background:transparent;transition:.35s var(--e)}
.dark .pt{border-color:#fff}
.pt:nth-child(3n){border-right:0}
.pt:hover{background:var(--red);color:#fff}
.pt:hover .pt-n{color:#fff}
.pt:hover p{color:rgba(255,255,255,.9)}
.pt-n{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;color:var(--red);font-weight:600;transition:.3s}
.dark .pt-n{color:var(--red)}
.pt h3{font-family:var(--f-t);font-weight:600;font-size:16.5px;letter-spacing:.02em;text-transform:uppercase;
  margin:12px 0 8px;line-height:1.3}
.pt p{font-size:14px;line-height:1.55;margin:0;color:var(--mute);transition:.3s}
.dark .pt p{color:var(--mute-d)}

/* ---------------------------------------------------------------- steps */
.pstep{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink)}
.dark .pstep{border-color:#fff}
.pstep li{padding:24px 26px 26px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:.3s}
.dark .pstep li{border-color:var(--line-d)}
.pstep li:nth-child(3n){border-right:0}
.pstep li::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e);transition-delay:calc(var(--i,0)*.07s)}
.pstep.in li::before,.rv.in.pstep li::before{transform:scaleX(1)}
.pstep .n{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;color:var(--red);font-weight:600}
.pstep h4{font-family:var(--f-t);font-weight:600;font-size:15.5px;letter-spacing:.04em;text-transform:uppercase;
  margin:12px 0 8px}
.pstep p{font-size:13.5px;line-height:1.55;margin:0;color:var(--mute);padding-right:8px}
.dark .pstep p{color:var(--mute-d)}

/* ---------------------------------------------------------------- prose */
.prose{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,70px)}
.prose h2{margin-top:14px}
.prose .pbody p{font-size:16px;line-height:1.7;color:var(--body,#3a3a42)}
.dark .prose .pbody p{color:rgba(255,255,255,.78)}
.prose .pbody p + p{margin-top:6px}

/* ---------------------------------------------------------------- link grid */
.lkgrid{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--ink);border-bottom:0}
.dark .lkgrid{border-color:#fff}
.lk{padding:24px 26px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  display:flex;flex-direction:column;gap:8px;position:relative;transition:.3s var(--e)}
.dark .lk{border-color:#fff}
.lk:nth-child(3n){border-right:0}
.lk:hover{background:var(--ink);color:#fff}
.dark .lk:hover{background:var(--red)}
.lk:hover span{color:rgba(255,255,255,.78)}
.lk b{font-family:var(--f-t);font-weight:600;font-size:16.5px;letter-spacing:.02em;text-transform:uppercase}
.lk span{font-size:13.5px;color:var(--mute);line-height:1.5;transition:.3s}
.dark .lk span{color:var(--mute-d)}
.lk i{margin-top:6px;color:var(--red)}
.lk:hover i{color:#fff}

/* ---------------------------------------------------------------- cta band */
.ctaband{background:var(--red);color:#fff;border-bottom:3px solid var(--ink);
  padding:clamp(40px,4.4vw,68px) 0}
.ctaband .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);align-items:center}
.ctaband h2{color:#fff;margin:14px 0 12px}
.ctaband p{color:rgba(255,255,255,.86);max-width:60ch;margin:0;font-size:16px}
.ctaband .acts{display:flex;flex-direction:column;gap:12px}
.ctaband .btn{min-width:270px}
.ctaband .btn-out{border-color:#fff;color:#fff}
.ctaband .btn-out::after{background:#fff}
.ctaband .btn-out:hover{color:var(--red);border-color:#fff}
.ctaband .btn:not(.btn-out){background:var(--ink);border-color:var(--ink)}
.ctaband .btn:not(.btn-out)::after{background:#fff}
.ctaband .btn:not(.btn-out):hover{color:var(--ink);border-color:#fff}

/* ---------------------------------------------------------------- legal */
.legalwrap{max-width:900px}
.legal-item{padding:22px 0;border-top:1px solid var(--line)}
.legal-item:first-child{border-top:3px solid var(--ink)}
.legal-item h2{font-family:var(--f-t);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.legal-item h2::first-letter{color:inherit}
.legal-item p{margin:10px 0 0;color:var(--mute);font-size:15.5px;line-height:1.65}

/* contact block on light background */
.dark-info li{border-color:var(--line)!important}
.dark-info b{color:var(--mute)!important}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .ptgrid,.lkgrid,.pstep{grid-template-columns:repeat(2,1fr)}
  .pt:nth-child(3n),.lk:nth-child(3n){border-right:3px solid var(--ink)}
  .dark .pt:nth-child(3n),.dark .lk:nth-child(3n){border-right-color:#fff}
  .pt:nth-child(2n),.lk:nth-child(2n){border-right:0}
  .pstep li:nth-child(3n){border-right:1px solid var(--line)}
  .pstep li:nth-child(2n){border-right:0}
  .prose{grid-template-columns:1fr}
  .ctaband .wrap{grid-template-columns:1fr}
}
@media (max-width:820px){
  .ptgrid,.lkgrid,.pstep{grid-template-columns:1fr}
  .pt,.lk{border-right:0!important}
  .pstep li{border-right:0!important}
  .phero h1{max-width:none}
  .ctaband .btn{min-width:0;width:100%}
}