@font-face{font-family:"SlipCond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/BarlowCondensed-Medium.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-Bold.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/BarlowCondensed-Black.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.ttf") format("truetype")}
:root{
  --bg:#06080c; --panel:#101820; --line:#243244; --text:#f7fafc; --muted:#d5deea;
  --amber:#ffc633; --green:#22e06b; --red:#ff3b3b; --blue:#5ec4ff;
  --cond:"SlipCond","Arial Narrow","Roboto Condensed",Impact,system-ui,sans-serif;
  --ui:"SlipSans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#06080c;color:var(--text)}
body{
  min-height:100vh; font-family:var(--ui); font-weight:400; font-synthesis:none;
  background:
    radial-gradient(90% 50% at 50% -10%, #1a2433 0%, transparent 55%),
    #06080c;
}
b,strong{font-weight:400}
a,a:link,a:visited,a:hover,a:focus,a:active,a *,a:link *,a:visited *{text-decoration:none;-webkit-text-decoration:none}
.sample{
  position:sticky; top:0; z-index:5; margin:0; padding:.55rem .8rem; text-align:center;
  background:#2a2108; color:var(--amber); border-bottom:2px dashed #ffb400;
  font-family:var(--cond); font-weight:400; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem;
}
.atmosphere{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.streaks{
  position:absolute; inset:-20% -10%;
  background:
    repeating-linear-gradient(100deg, transparent 0 70px, rgba(94,196,255,.05) 70px 72px, transparent 72px 140px),
    repeating-linear-gradient(100deg, transparent 0 28px, rgba(255,198,51,.035) 28px 29px);
  animation:streaks 7s linear infinite;
}
@keyframes streaks{to{transform:translate3d(-8%,0,0)}}
.top,main{position:relative; z-index:1}
.top{position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.85rem 1.2rem .2rem; text-align:center}
.account{
  position:absolute; top:.15rem; right:.2rem; z-index:2;
  display:flex; align-items:center; gap:.45rem; max-width:46%;
}
.account[hidden]{display:none}
.acct-email{color:var(--muted); font-size:.92rem; font-weight:400; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.account button{
  color:#fff; font-weight:400; border:1px solid #2c3a4e; background:#141c27; border-radius:.5rem;
  padding:.4rem .7rem; min-height:2.4rem; cursor:pointer;
}
.account button:hover,.account button:focus-visible{background:#1c2838}
.brand{display:flex; justify-content:center; max-width:100%}
.logo{width:min(52rem, 94vw); height:auto; display:block}
.lede{margin:.35rem 0 .2rem; max-width:36rem; color:var(--muted); font-size:1.05rem; font-weight:400}
.applinks{display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin:.35rem 0 .15rem; max-width:100%}
.applinks a{
  display:inline-flex; align-items:center; justify-content:center; min-height:2.4rem; padding:.35rem .85rem;
  border:1px solid #2c3a4e; border-radius:999px; background:#141c27; color:#fff; font-weight:400;
  font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase;
}
.applinks a[hidden]{display:none}
.applinks a:hover,.applinks a:focus-visible{background:#1c2838}
main{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem;
  width:min(72rem, calc(100% - 2rem)); margin:.6rem auto 2.5rem;
}
body.shop main{
  display:block;
  width:min(40rem, calc(100% - 2rem));
}
.gate[hidden]{display:none}
.gate{
  display:flex; flex-direction:column; gap:.7rem; min-height:100%;
  padding:1rem 1rem 1.05rem; border:1px solid var(--line); border-radius:1rem;
  background:linear-gradient(180deg, rgba(16,24,32,.92), rgba(10,14,20,.92));
  color:var(--text); box-shadow:0 0 0 1px #000 inset;
}
.gate:hover,.gate:focus-visible{background:#162433; border-color:#3a4d66; outline:none}
.gate:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.ico{width:auto; height:auto; max-width:100%}
.ico img{height:2.55rem; width:auto; max-width:100%; display:block; object-fit:contain}
.copy{display:flex; flex-direction:column; gap:.3rem}
.name{font-family:var(--cond); font-weight:400; font-size:2rem; letter-spacing:.04em; text-transform:uppercase; line-height:.95}
.desc{color:var(--muted); font-size:1rem; font-weight:400; line-height:1.35}
.preview{margin-top:auto; border:1px solid #1d2735; border-radius:.7rem; background:#0b1016; padding:.55rem .65rem}
.sampletag{
  display:inline-flex; align-items:center; margin:0 0 .35rem;
  font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase;
  font-size:.72rem; color:var(--muted); font-weight:400;
}
.leadbar .sampletag, .slip .sampletag, .trace .sampletag{grid-column:1 / -1; justify-self:start}
.leadbar{display:grid; gap:.35rem}
.leadbar .lane{display:grid; grid-template-columns:1fr auto auto; gap:.4rem; align-items:center; font-family:var(--cond); font-weight:400}
.leadbar i{display:block; height:.45rem; border-radius:1rem; background:#243044}
.leadbar .ahead i{width:86%; background:#22e06b}
.leadbar .behind i{width:62%; background:#ff3b3b}
.leadbar .leadtag{font-size:.72rem; letter-spacing:.08em; color:#22e06b; font-weight:400; min-width:2.2rem}
.leadbar em{font-style:normal; font-size:1.15rem; color:#f7fafc}
.slip{display:grid; grid-template-columns:1fr auto 1fr; gap:.2rem .4rem; text-align:center; font-family:var(--cond); font-weight:400; font-size:1.15rem}
.slip span.unit{color:var(--muted); font-family:var(--ui); font-size:.75rem; letter-spacing:.04em}
.slip .win{color:var(--green)}
.trace{position:relative; padding:.4rem .4rem .2rem}
.trace svg{width:100%; height:3.2rem; display:block}
.trace span{position:absolute; left:.55rem; top:.35rem; font-family:var(--cond); font-size:.75rem; letter-spacing:.12em; color:var(--amber); font-weight:400}
.sampleads{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.75rem;
  width:min(72rem, calc(100% - 2rem)); margin:.35rem auto 2.2rem; padding:1rem 1rem 1.15rem; text-align:center;
  background:#101820; border:1px solid #2c3a4e; border-radius:1rem;
}
.sampleads p{margin:0; font-size:.85rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:#f7fafc}
.sampleads ul{display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; list-style:none; margin:0; padding:0; width:100%}
.sampleads li{
  display:flex; align-items:center; justify-content:center; flex:1 1 12rem; margin:0; padding:0;
  min-height:0; background:transparent; border:0; border-radius:0; box-shadow:none;
}
.sampleads img{display:block; height:clamp(4rem, 8vw, 5.4rem); width:auto; max-width:min(18rem, 86vw)}
@media (max-width: 1024px){
  main, body.shop main{width:min(100% - 1.4rem, 72rem); gap:.75rem}
  .name{font-size:1.7rem}
  .logo{width:min(44rem, 94vw)}
  .sampleads{width:min(100% - 1.4rem, 72rem)}
}
@media (max-width: 820px){
  main{grid-template-columns:1fr; width:min(36rem, calc(100% - 1.2rem))}
  body.shop main{width:min(36rem, calc(100% - 1.2rem))}
  .sampleads{width:min(36rem, calc(100% - 1.2rem))}
  .top{padding-top:.55rem}
  .lede{font-size:1rem}
}
.shop h1{font-family:var(--cond); font-weight:400; font-size:2rem; letter-spacing:.04em; text-transform:uppercase; margin:.2rem 0 .4rem}
.shop h2{font-family:var(--cond); font-weight:400; font-size:1.35rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 .35rem}
.shop p{color:var(--muted); font-weight:400; line-height:1.4}
.shop .panel{
  margin:.9rem 0; padding:1rem; border:1px solid var(--line); border-radius:1rem;
  background:linear-gradient(180deg, rgba(16,24,32,.92), rgba(10,14,20,.92));
}
.plans{display:grid; gap:.6rem}
@media (min-width: 700px){ .plans{grid-template-columns:1fr 1fr} }
.plan{
  display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; text-align:left;
  min-height:2.7rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:.8rem;
  background:#141c27; color:#fff; font:inherit; font-weight:400; cursor:pointer;
}
.plan strong{font-family:var(--cond); font-weight:400; letter-spacing:.06em; text-transform:uppercase; font-size:1.15rem}
.plan.on{border-color:var(--blue); color:var(--blue)}
.checkout{display:grid; gap:.65rem; margin-top:.8rem}
.checkout label{display:flex; flex-direction:column; gap:.25rem; color:var(--muted); font-size:.78rem; font-weight:400}
.checkout input{
  width:100%; box-sizing:border-box; min-height:2.7rem; padding:.4rem .6rem;
  background:#0c1218; color:#fff; border:1px solid var(--line); border-radius:.5rem; font:inherit; font-weight:400;
}
.checkout button, .shop .pill{
  display:inline-flex; align-items:center; justify-content:center; min-height:2.6rem; padding:.4rem .9rem;
  border:1px solid #2c3a4e; border-radius:999px; background:#141c27; color:#fff; font-family:var(--cond);
  letter-spacing:.08em; text-transform:uppercase; font-weight:400; cursor:pointer;
}
.checkout .error{color:#e7b4b4; margin:0}
.checkout[hidden], .checkout .error[hidden], #checkoutDone[hidden]{display:none}
.testnote{margin:0}
.plan .add{font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); font-size:.85rem}
.cartline{display:flex; flex-direction:column; gap:.2rem; padding:.15rem 0 .2rem}
.cartline strong{font-family:var(--cond); font-weight:400; letter-spacing:.06em; text-transform:uppercase; font-size:1.2rem; color:#fff}
.cartactions{display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 0}
.cartactions .pill, a.pill, button.pill, #cartRemove{
  display:inline-flex; align-items:center; justify-content:center; min-height:2.6rem; padding:.4rem .9rem;
  border:1px solid #2c3a4e; border-radius:999px; background:#141c27; color:#fff; text-decoration:none;
  font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase; font-weight:400; cursor:pointer;
}
.order{
  margin:.7rem 0 0; padding:.85rem .9rem; border:1px solid var(--line); border-radius:.8rem; background:#141c27;
}
.order.on{border-color:var(--blue)}
.order h2{font-size:1.15rem}
.status{
  display:inline-flex; margin:0 0 .35rem;
  font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; color:var(--muted); font-weight:400;
}
.shop .panel a:not(.pill){color:var(--blue)}
.shop [hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){
  .streaks{animation:none}
}