/* SMR All-Access: homepage section (.aa) + compact band on /resources (.aab). Shared pass art (.aa-pass). Charcoal, lime #b6ff00, paper #f4f4ee. */

/* the pass: strap, clip, lime card */
.aa-pass{position:absolute;z-index:3;pointer-events:none}
.aa-swing{transform-origin:50% 0;animation:aaSwing 7s ease-in-out infinite alternate}
.aa-strap{display:block;position:relative;width:34px;height:var(--strap,300px);margin:0 auto;overflow:hidden;background:linear-gradient(90deg,#262928 0 3px,#0b0c0c 3px calc(100% - 3px),#262928 calc(100% - 3px));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--strap-fade,120px));mask-image:linear-gradient(180deg,transparent 0,#000 var(--strap-fade,120px))}
.aa-strap span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);writing-mode:vertical-rl;font:800 9px/1 Manrope,Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#b6ff00;white-space:nowrap}
.aa-clip{display:block;position:relative;z-index:2;width:30px;height:44px;margin:-4px auto -20px;border-radius:7px 7px 11px 11px;background:linear-gradient(90deg,#5d6166,#c9ccd1 28%,#f4f4ee 46%,#9da1a6 64%,#4a4e52);box-shadow:0 6px 10px rgba(0,0,0,.45)}
.aa-clip::after{content:'';position:absolute;left:9px;right:9px;top:9px;height:13px;border-radius:5px;background:#0b0c0c;box-shadow:inset 0 2px 2px rgba(0,0,0,.7)}
.aa-card{position:relative;width:300px;box-sizing:border-box;padding:48px 26px 22px;border-radius:16px;background:#b6ff00;color:#101111;overflow:hidden;box-shadow:0 44px 90px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.35),0 0 110px rgba(182,255,0,.16)}
.aa-card::before{content:'';position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#101111 .55px,transparent .65px);background-size:4px 4px;pointer-events:none}
.aa-card::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:60%;background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);transform:translateX(-140%) skewX(-12deg);animation:aaSheen 7s 1.2s ease-in-out infinite;pointer-events:none}
.aa-slot{position:absolute;top:16px;left:50%;width:62px;height:11px;margin-left:-31px;border-radius:8px;background:#0e0f0f;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.aa-ctop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;font:800 9px/1.3 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.aa-ctop img{width:34px;height:34px;display:block;flex:none}
.aa-ch{position:relative;margin:22px 0 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:94px;line-height:.8;letter-spacing:-.02em}
.aa-cfoot{position:relative;display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:10px;border-top:2px solid #101111;font:800 9px/1.3 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.aa-bars{position:relative;display:block;height:30px;margin-top:14px;background:repeating-linear-gradient(90deg,#101111 0 2px,transparent 2px 5px,#101111 5px 6px,transparent 6px 9px,#101111 9px 13px,transparent 13px 15px,#101111 15px 16px,transparent 16px 20px)}
@keyframes aaSwing{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
@keyframes aaSheen{0%,62%{transform:translateX(-140%) skewX(-12deg)}100%{transform:translateX(260%) skewX(-12deg)}}

/* homepage section */
.aa{position:relative;z-index:1;color:#f4f4ee;background:linear-gradient(180deg,#1b1d1c 0,#131414 18%,#0d0e0e 50%,#131414 82%,#1b1d1c 100%)}
.aa-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.aa-glow{position:absolute;right:4%;top:50%;width:820px;height:820px;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(182,255,0,.15),rgba(182,255,0,.05) 55%,rgba(182,255,0,0));}
.aa-wallmask{position:absolute;top:0;bottom:0;right:0;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.aa-wall{position:absolute;left:-6%;top:50%;transform:translateY(-50%) rotate(-9deg);display:flex;flex-direction:column;gap:18px}
.aa-row{display:flex;width:max-content;animation:aaL 90s linear infinite}
.aa-row:nth-child(2){animation-name:aaR;animation-duration:110s}
.aa-row:nth-child(3){animation-duration:100s}
.aa-row img{width:150px;height:188px;object-fit:cover;display:block;margin-right:18px;filter:brightness(.5) saturate(.8);box-shadow:0 18px 36px rgba(0,0,0,.45)}
@keyframes aaL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes aaR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.aa .grain{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.aa-in{position:relative;z-index:2;padding-top:132px;padding-bottom:156px}
.aa-copy{max-width:660px}
.aa-h{font-size:104px;line-height:.82;margin:0}
.aa-h span{color:#b6ff00}
.aa-lede{margin:28px 0 0;font-size:16px;line-height:1.75;color:#c9ccd1;max-width:470px}
.aa-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px 22px;margin:40px 0 0}
.aa-plan{margin:0;display:flex;align-items:flex-end;gap:12px}
.aa-plan strong{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:96px;line-height:.76;letter-spacing:-.02em;color:#f4f4ee}
.aa-plan>span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#c9ccd1;line-height:1.5;padding-bottom:1px}
.aa-plan em{font-style:normal;display:inline-block;margin-top:6px;padding:4px 8px;background:#b6ff00;color:#101111;letter-spacing:.12em}
.aa-or{margin:0 0 6px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;color:#5d6166}
.aa-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.aa-cta .btn{min-width:260px}
.aa-login{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 11px/1.3 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#c9ccd1;transition:color .15s}
.aa-login span{transition:transform .15s}
.aa-login:hover{color:#b6ff00}.aa-login:hover span{transform:translateX(4px)}
.aa-note{margin:22px 0 0;font-size:13px;line-height:1.6;color:#8d9196;max-width:470px}
.aa-note a{color:#c9ccd1;text-decoration-color:rgba(182,255,0,.6);text-underline-offset:3px}
.aa-note a:hover{color:#b6ff00}
.aa .aa-pass{--strap:310px;--strap-fade:150px;top:-84px;right:max(64px,calc((100% - 1440px) / 2 + 64px))}
.aa::after{content:'';position:absolute;left:0;right:0;top:100%;height:150px;background:linear-gradient(180deg,#1b1d1c,rgba(27,29,28,.55) 45%,rgba(27,29,28,0));pointer-events:none}

/* compact band on /resources */
.aab{position:relative;z-index:1;background:linear-gradient(180deg,#101111 0,#0c0d0d 45%,#151716 80%,#1b1d1c 100%);overflow-x:clip}
.aab::before{content:'';position:absolute;left:-140px;top:50%;width:760px;height:640px;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(182,255,0,.13),rgba(182,255,0,.04) 60%,rgba(182,255,0,0));pointer-events:none}
.aab-in{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr) auto;column-gap:56px;align-items:center;padding-top:72px;padding-bottom:84px}
.aab-art{position:relative;height:300px}
.aab .aa-pass{--strap:170px;--strap-fade:140px;left:50%;top:-112px;transform:translateX(-50%) scale(.72) rotate(-4deg);transform-origin:50% 0}
.aab-h{font-size:96px;line-height:.82;margin:18px 0 0}
.aab-h span{color:var(--lime,#b6ff00)}
.aab-copy p.aab-lede{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--mute,#c9ccd1);max-width:500px}
.aab-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.aab .aa-price{margin:0}
.aab .aa-plan strong{font-size:72px}
.aab .aa-or{font-size:24px;margin-bottom:4px}
.aab .aa-cta{margin-top:4px;flex-direction:column;align-items:stretch;gap:6px}
.aab .aa-cta .btn{min-width:280px}
.aab .aa-login{justify-content:center}

@media(prefers-reduced-motion:reduce){.aa-swing,.aa-row,.aa-card::after{animation:none !important}}
/* tablet */
@media(max-width:1180px) and (min-width:901px){
 .aa-h{font-size:9vw}.aa-copy{max-width:56%}
 .aa .aa-pass{--strap:250px;--strap-fade:150px;top:-36px;right:32px}
 .aa .aa-card{width:260px}.aa .aa-ch{font-size:80px}
 .aab-in{grid-template-columns:200px minmax(0,1fr);row-gap:28px}.aab-side{grid-column:2}
 .aab .aa-pass{transform:translateX(-50%) scale(.62) rotate(-4deg)}
 .aab-h{font-size:8vw}
}
/* phone */
@media(max-width:900px){
 .aa-art{position:relative;inset:auto;height:500px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
 .aa-glow{right:auto;left:50%;top:54%;width:520px;height:520px;transform:translate(-50%,-50%)}
 .aa-wallmask{width:100%;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 100%)}
 .aa-wall{left:-30%;gap:12px}
 .aa-row img{width:96px;height:120px;margin-right:12px}
 .aa .aa-pass{--strap:150px;--strap-fade:100px;top:-36px;right:auto;left:50%;transform:translateX(-50%)}
 .aa .aa-card{width:236px;padding:40px 20px 18px;border-radius:13px}
 .aa .aa-ch{font-size:74px;margin-top:18px}
 .aa .aa-bars{height:24px}
 .aa-in{padding-top:0;padding-bottom:72px;margin-top:-28px}
 .aa-copy{max-width:none}
 .aa-h{font-size:15.5vw}
 .aa-lede{font-size:15px}
 .aa-plan strong{font-size:72px}
 .aa-cta{flex-direction:column;align-items:stretch;gap:6px}
 .aa-cta .btn{min-width:0;width:100%}
 .aa-login{justify-content:center}
 .aab::before{left:0;width:100%;height:560px}
 .aab-in{display:block;padding-top:8px;padding-bottom:64px}
 .aab-art{height:300px}
 .aab .aa-pass{top:-60px;transform:translateX(-50%) scale(.6) rotate(-4deg)}
 .aab-h{font-size:22vw}
 .aab-side{margin-top:28px}
 .aab .aa-plan strong{font-size:64px}
 .aab .aa-cta{width:100%}.aab .aa-cta .btn{min-width:0;width:100%}
}
@media(max-width:380px){.aa-plan strong,.aab .aa-plan strong{font-size:60px}.aa-price{gap:10px 16px}}
