/* Longstop Software — Nocturne palette and type, Modernist structure.
   Zero radius, 2px rules, flush-left, accent used as a line rather than a fill. */

:root{
  --bg:#161826;
  --surface:#232532;
  --text:#e9e9ed;
  --accent:#9184d9;
  --accent-300:#d2cefd;
  --accent-700:#5d5294;
  --accent-900:#2b2741;
  --n-300:#cfd3e5;
  --n-400:#b2b6ca;
  --n-500:#9397ab;
  --n-600:#75798c;
  --n-800:#3f424d;
  --n-900:#292b31;
  --rule:rgba(233,233,237,.16);
  --rule-strong:rgba(233,233,237,.28);
  --measure:74rem;
  --pad:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(.975rem,.35vw + .9rem,1.0625rem);
  line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600;line-height:1.14;letter-spacing:-.021em;margin:0}
p{margin:0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-700);padding-bottom:1px}
a:hover{color:var(--accent-300);border-bottom-color:var(--accent-300)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
strong{font-weight:600;color:var(--text)}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-500);margin:0 0 1.25rem;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:.5rem;background:var(--surface);padding:.5rem .75rem;z-index:9}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--rule)}
.masthead .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;padding-block:1.5rem}
.mark{display:flex;align-items:center;gap:.75rem;font-weight:700;letter-spacing:-.02em;font-size:1.0625rem;
  color:var(--text);border-bottom:0}
.mark svg{flex:none;display:block}
.masthead nav{margin-left:auto;display:flex;gap:1.75rem;font-size:.875rem}
.masthead nav a{color:var(--n-400);border-bottom-color:transparent}
.masthead nav a:hover{color:var(--text);border-bottom-color:var(--rule-strong)}
.masthead nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;bottom:0;
  left:max(var(--pad),calc((100% - var(--measure))/2 + var(--pad)));
  width:120px;height:2px;background:var(--accent);
  box-shadow:0 0 32px 2px rgba(145,132,217,.45);
}
.hero h1{font-size:clamp(2rem,5.4vw,3.5rem);max-width:22ch;margin-bottom:1.75rem}
.hero .lede{font-size:clamp(1.0625rem,.7vw + .95rem,1.3125rem);line-height:1.55;color:var(--n-300);max-width:56ch}
.hero .lede + .lede{margin-top:1.125rem;font-size:1rem;color:var(--n-500);max-width:60ch}
.hero .kicker{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.5rem}

/* ---------- sections ---------- */
section{padding-block:clamp(3rem,6vw,4.75rem)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem 3rem;margin-bottom:2.5rem}
@media(min-width:56rem){
  .sec-head{grid-template-columns:14rem minmax(0,1fr);align-items:start}
  .sec-head .eyebrow{margin:.5rem 0 0}
}
.sec-head h2{font-size:clamp(1.5rem,2.4vw,2rem);max-width:28ch}
.sec-head .sub{margin-top:1rem;color:var(--n-400);max-width:60ch}

.prose{max-width:62ch;color:var(--n-300)}
.prose p + p{margin-top:1rem}
@media(min-width:56rem){.offset{margin-left:17rem}}

/* ---------- modular grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));border-top:2px solid var(--rule)}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.cell{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:2px solid var(--rule)}
@media(min-width:48rem){.cell{border-right:2px solid var(--rule);padding-left:1.5rem}.cell:first-child{padding-left:0}}
.cell h3{font-size:1rem;margin-bottom:.625rem}
.cell p{color:var(--n-400);font-size:.9375rem}
.cell p + p{margin-top:.625rem}
.cell .num{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:1rem}

/* ---------- definition rows ---------- */
.rows{border-top:2px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:.375rem;padding:1.5rem 0;border-bottom:2px solid var(--rule)}
@media(min-width:48rem){.row{grid-template-columns:17rem minmax(0,1fr);gap:2.5rem;align-items:start}}
.row dt{font-size:.9375rem;font-weight:600;color:var(--text)}
.row dt .tag{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-600);margin-bottom:.375rem}
.row dd{margin:0;color:var(--n-400);font-size:.9375rem;max-width:64ch}
.row dd + dd{margin-top:.5rem}

/* ---------- screenshot ---------- */
figure{margin:0}
.shot{border:2px solid var(--rule);background:var(--n-900);padding:0;overflow:hidden}
.shot img{display:block;width:100%;height:auto}
figcaption{margin-top:.875rem;color:var(--n-600);font-size:.8125rem;max-width:70ch}

/* ---------- status band ---------- */
.band{background:var(--n-900);border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.band .wrap{padding-block:clamp(2.25rem,4vw,3rem)}
.band .eyebrow{color:var(--accent)}
.band p{max-width:62ch;color:var(--n-300)}
.band p + p{margin-top:1rem}

/* ---------- notice ---------- */
.notice{border-left:2px solid var(--accent);padding:1rem 0 1rem 1.25rem;margin-top:2rem;
  color:var(--n-400);font-size:.9375rem;max-width:62ch}
.notice p + p{margin-top:.75rem}

/* ---------- limits list ---------- */
.limits{list-style:none;padding:0;margin:0;border-top:2px solid var(--rule);max-width:62ch}
.limits li{padding:.875rem 0 .875rem 1.75rem;border-bottom:2px solid var(--rule);
  color:var(--n-400);font-size:.9375rem;position:relative}
.limits li::before{content:"";position:absolute;left:0;top:1.45rem;width:10px;height:2px;background:var(--n-600)}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--rule);padding-block:3rem 3.5rem;color:var(--n-500);font-size:.875rem}
footer a{color:var(--n-400);border-bottom-color:var(--n-800)}
footer a:hover{color:var(--text);border-bottom-color:var(--n-600)}
.foot-cols{display:grid;gap:2.25rem 3rem;grid-template-columns:minmax(0,1fr);padding-bottom:2.25rem}
@media(min-width:48rem){.foot-cols{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}}
.foot-brand .mark{margin-bottom:.875rem;font-size:.9375rem}
.foot-brand p{max-width:34ch}
.foot-col h2{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-600);margin-bottom:.875rem}
.foot-col address{font-style:normal;line-height:1.7}
.foot-legal{border-top:2px solid var(--rule);padding-top:1.75rem}
.foot-legal p{max-width:76ch;color:var(--n-600)}
.foot-note{margin-top:.625rem}