/* ============================================================
   KILL WEEK by Monid
   Shared component language.

   Layout, structure and component shapes follow the ElevenHacks
   pattern: large rounded cards, pill controls, mono numeric
   badges, no shadows, sentence case headings.
   The palette is Monid's 2026 brand blue #0016D7 (the Astrid blue),
   run dark: solid blue surfaces use it neat, blue-as-ink uses a
   lifted tint of the same hue.
   The black terminal strip is kept, it is a monid.ai signature.
   ============================================================ */

:root{
  /* Dark terminal palette, on Monid Design System v1.0.

     THE ONE RULE: blue is ink on light grounds and GROUND on dark ones.
     #0016D7 as type on this page is 2.0:1, which is a defect, and the
     system has no blue ramp and forbids lightening the blue to make it
     fit. So on this page blue only ever appears as a filled surface, with
     white on top (10.0:1), and everything that used to be blue type is
     now white or grey.

     --brand      the one blue. Fills only, never type, never a hairline.
     --accent     what "text-brand" resolves to on a dark ground: white.
                  The name is kept because 40-odd call sites use it.
     --accent-lift  grey for the 12px mono uppercase eyebrows and labels.
     --accent-bg/-br  the neutral feature panel, no longer a blue tint.

     Emphasis inside a heading cannot be a blue word here, so .accent in an
     h1/h2 gets a blue band behind white type instead. Blue moving under the
     type is the system's own answer. */
  --bg:#08080b;
  --bg-warm:#101015;
  --white:#0e0e13;          /* card surface, no longer white */
  --text:#e6e6ea;
  --text-hi:#fff;
  --dim:#a8aab3;
  --faint:#787b85;
  --ghost:#565962;

  --surf:#0e0e13;
  --surf-2:#101015;
  --surf-3:#17171e;
  --br:#22232b;
  --br-2:#31333c;

  --brand:#0016D7;
  --brand-hover:#0012B0;
  --brand-press:#000E8C;

  --accent:#fff;
  --accent-lift:#adadad;
  --accent-on-dark:#fff;
  --accent-on-dark-2:#fff;
  --accent-bg:rgba(255,255,255,.055);
  --accent-bg-2:rgba(255,255,255,.09);
  --accent-br:rgba(255,255,255,.15);
  --accent-br-2:rgba(255,255,255,.24);

  /* the strike red, lifted for a dark ground */
  --kill:#ff4d3d;

  /* --dark used to be the inverted surface. On a black page the inversion
     runs the other way, so this is now the deepest well, not the darkest ink. */
  --dark:#000;
  --dark-2:#0a0a0e;
  --grid:rgba(255,255,255,.028);

  --sans:"Inter Tight",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  --r-card:16px;
  --r-hero:24px;
  --pill:999px;
  --pad:clamp(18px,4vw,32px);
  color-scheme:light only;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/72px 72px,
    var(--bg);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--brand);color:#fff}

h1,h2,h3,h4{margin:0;font-family:var(--sans);color:var(--text-hi);font-weight:600}
h1{font-size:clamp(40px,6.6vw,72px);letter-spacing:-.038em;line-height:1.04}
h2{font-size:clamp(27px,3.6vw,42px);letter-spacing:-.032em;line-height:1.1}
h3{font-size:clamp(17px,1.6vw,20px);letter-spacing:-.022em;line-height:1.25}
h4{font-size:15.5px;letter-spacing:-.015em;line-height:1.3;font-weight:600}
p{margin:0}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:720px}
.center{text-align:center}
.accent{color:var(--accent)}
/* Blue cannot carry a highlighted word on this ground, so it goes under the
   word instead. box-decoration-break keeps the band intact across a wrap.
   h1 only: a second band further down the page stops reading as a designed
   highlight and starts reading as stray text selection. In an h2 the
   emphasised word just stays white. */
h1 .accent{
  background:var(--brand);color:#fff;border-radius:4px;
  padding:0 .1em;margin:0 -.02em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.mono{font-family:var(--mono)}
.dimmed{color:var(--dim)}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-lift);
}
.eyebrow.grey{color:var(--faint)}
.label{font-size:14px;color:var(--faint);letter-spacing:.01em}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:80;background:rgba(8,8,11,.78);
  backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--br);
}
.topbar-in{display:flex;align-items:center;gap:18px;height:60px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
/* The 2026 lockup. One colour per instance is a hard brand rule, so on a
   dark ground the whole thing is white, mark included. Order is wordmark
   then Astrid, never the other way round. viewBox is the asset's ink box,
   not its artboard, so the height below is the real cap height and the
   mark sits on the type baseline. */
.logo-lockup{height:17px;width:auto;display:block;flex:none;overflow:visible}
.lk-word,.lk-star{fill:var(--text-hi)}
.logo b{font-weight:600;font-size:16px;letter-spacing:-.035em;color:var(--text-hi)}
.logo .thin{font-weight:400;color:var(--faint);font-size:16px;letter-spacing:-.025em}
.topnav{display:flex;align-items:center;gap:22px;margin-left:auto}
.topnav a{text-decoration:none;font-size:14.5px;color:var(--faint);transition:color .15s}
.topnav a:hover{color:var(--text-hi)}
.topnav a.on{color:var(--text-hi)}
.icon-link{
  display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  color:var(--faint);flex:none;transition:color .15s,background .15s;
}
.icon-link:hover{color:var(--text-hi);background:var(--bg-warm)}
.icon-link svg{width:18px;height:18px;display:block}
.topbar-meta{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ghost)}
@media(max-width:760px){.topnav{gap:14px}.topnav a{font-size:13.5px}}
@media(max-width:620px){.topbar-meta{display:none}}
@media(max-width:600px){
  .topbar-in{gap:10px}
  .topnav{gap:13px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{flex:none;white-space:nowrap}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.01em;
  padding:10px 22px;border-radius:var(--pill);
  background:var(--white);border:1px solid var(--br);color:var(--text-hi);
  transition:background .16s,border-color .16s,transform .1s;
}
.btn:hover{background:var(--bg-warm);border-color:var(--br-2)}
.btn:active{transform:translateY(1px)}
/* the primary button is the system's blue fill, white type on it */
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-solid{background:var(--text-hi);border-color:var(--text-hi);color:var(--bg)}
.btn-solid:hover{background:#dcdce2;border-color:#dcdce2}
.btn-quiet{background:transparent;border-color:var(--br)}
.btn-quiet:hover{background:var(--white)}
.btn-lg{font-size:15px;padding:12px 26px}
.btn-sm{font-size:13.5px;padding:7px 15px}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  padding:4px 11px;border-radius:var(--pill);
  background:var(--accent-bg);border:1px solid var(--accent-br);color:var(--accent);
}
.badge.grey{background:var(--bg-warm);border-color:var(--br);color:var(--faint)}
.badge.solid{background:var(--white);border-color:var(--br-2);color:var(--dim)}
/* a 6px blue dot on near-black is 2:1, under the 3:1 graphics floor */
.dot{width:6px;height:6px;border-radius:50%;background:var(--text-hi);flex:none}
.dot.live{animation:pulse 2s infinite}
.dot.off{background:var(--ghost)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7.5vw,96px) 0 clamp(30px,4vw,48px);text-align:center}
.hero h1{margin:18px auto 0;max-width:15ch}
.hero .lede{
  margin:22px auto 0;max-width:54ch;font-size:18.5px;color:var(--dim);
  letter-spacing:.005em;line-height:1.65;
}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- terminal strip (monid.ai signature) ---------- */
.term{
  margin:34px auto 0;max-width:520px;
  background:var(--dark);border:1px solid var(--br);border-radius:12px;
  display:flex;align-items:center;gap:12px;padding:12px 15px;text-align:left;
}
.term code{
  font-family:var(--mono);font-size:13.5px;color:#e8e5dd;
  white-space:nowrap;overflow:auto;min-width:0;flex:1;
}
.term code .p{color:var(--accent-on-dark)}
.term .copy{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#a9a59c;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:5px;padding:5px 9px;cursor:pointer;flex:none;transition:all .15s;
}
.term .copy:hover{color:#fff;background:var(--brand);border-color:var(--brand)}

/* ---------- sections ---------- */
section{padding:clamp(38px,5.5vw,68px) 0}
.sec-head{margin-bottom:26px}
.sec-head h2{margin-top:11px}
.sec-head p.txt{margin-top:15px;max-width:62ch;color:var(--dim);font-size:17px;line-height:1.6}
.sec-title{font-size:14px;color:var(--faint);margin-bottom:14px;letter-spacing:.01em}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--br);border-radius:var(--r-card);
  transition:background .18s,border-color .18s;
}
a.card:hover{background:var(--bg-warm);border-color:var(--br-2)}

.cards2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.cards2{grid-template-columns:1fr}}
.bigcard{
  position:relative;overflow:hidden;text-decoration:none;
  border:1px solid var(--br);border-radius:var(--r-card);
  padding:24px;min-height:186px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--white);
}
.bigcard .k{font-size:14px;color:var(--faint)}
.bigcard .v{
  font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:-.042em;
  line-height:1;margin-top:11px;color:var(--text-hi);
}
.bigcard .s{font-size:15.5px;margin-top:11px;color:var(--dim);line-height:1.5;max-width:42ch}
.bigcard>*{position:relative;z-index:1}
.bigcard .corner{
  position:absolute;top:18px;right:18px;z-index:2;
  font-size:13.5px;color:var(--text-hi);background:var(--white);
  border:1px solid var(--br-2);padding:6px 13px;border-radius:var(--pill);
}

/* hero card, the wide one on the ElevenHacks leaderboard page */
.herocard{
  position:relative;overflow:hidden;border:1px solid var(--br);
  border-radius:var(--r-hero);padding:clamp(28px,4.4vw,52px);background:var(--white);
}
.herocard>*{position:relative;z-index:1}
.herocard h1{max-width:16ch;margin:0}
.herocard p.txt{margin-top:18px;max-width:58ch;color:var(--dim);font-size:17px;line-height:1.6}
.inline-stats{display:flex;gap:clamp(20px,3.4vw,42px);flex-wrap:wrap;margin-top:30px}
.inline-stats .k{font-size:13.5px;color:var(--faint)}
.inline-stats .v{font-size:24px;font-weight:600;letter-spacing:-.035em;margin-top:5px;color:var(--text-hi)}
.inline-stats .v small{font-size:15px;font-weight:500;color:var(--faint);letter-spacing:-.01em}

/* notice strip */
.notice{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--br);border-radius:var(--r-card);
  padding:17px 20px;font-size:16px;color:var(--dim);line-height:1.55;
}
.notice b{color:var(--text-hi);font-weight:600}
.notice .ic{color:var(--accent);flex:none;font-size:15px;line-height:1.4}

/* ---------- pill row of small stats ---------- */
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pillrow span{
  font-size:13.5px;color:var(--dim);background:var(--white);
  border:1px solid var(--br);border-radius:var(--pill);padding:5px 12px;
}
.pillrow span b{color:var(--accent);font-weight:500;font-family:var(--mono);font-size:12.5px}

/* ---------- tabs ---------- */
.tabs{display:inline-flex;gap:6px;background:var(--bg-warm);border:1px solid var(--br);border-radius:var(--pill);padding:5px}
.tabs button{
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  padding:8px 20px;border:0;border-radius:var(--pill);background:transparent;
  color:var(--faint);cursor:pointer;transition:all .15s;
}
.tabs button:hover{color:var(--text-hi)}
.tabs button.on{background:var(--white);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-br)}
@media(max-width:560px){.tabs button{padding:8px 13px;font-size:13.5px}}

/* ---------- chips ---------- */
.chips{display:inline-flex;gap:7px;flex-wrap:wrap}
.chips button{
  font-size:13.5px;padding:7px 15px;border-radius:var(--pill);cursor:pointer;
  background:transparent;border:1px solid var(--br);color:var(--faint);transition:all .15s;
}
.chips button:hover{color:var(--text-hi);border-color:var(--br-2)}
.chips button.on{background:var(--text-hi);border-color:var(--text-hi);color:var(--bg)}

/* ---------- search ---------- */
.search{
  display:flex;align-items:center;gap:9px;
  background:var(--white);border:1px solid var(--br);border-radius:var(--pill);
  padding:9px 17px;min-width:230px;flex:1;max-width:320px;
}
.search:focus-within{border-color:var(--accent-br)}
.search input{
  border:0;outline:0;background:transparent;font-family:var(--sans);font-size:15px;
  width:100%;color:var(--text-hi);
}
.search input::placeholder{color:var(--ghost)}
.search svg{flex:none;color:var(--ghost)}

/* ---------- window nav ---------- */
.winnav{display:flex;align-items:center;gap:8px;justify-content:center}
.winnav .lbl{
  font-family:var(--mono);font-size:13px;color:var(--dim);
  background:var(--white);border:1px solid var(--br);border-radius:var(--pill);padding:8px 17px;
}
.winnav .nb{
  width:32px;height:32px;border-radius:50%;background:var(--white);border:1px solid var(--br);
  color:var(--faint);display:grid;place-items:center;cursor:pointer;font-size:13px;
}
.winnav .nb[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- CTA block ---------- */
.ctablock{
  position:relative;overflow:hidden;
  border:1px solid var(--br);border-radius:var(--r-hero);
  padding:clamp(24px,2.6vw,32px);background:var(--white);
}
.ctablock>*{position:relative;z-index:1}
.ctablock .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center}
.ctablock .in>*{min-width:0}
/* single column CTA: centred and deliberately small. It is a closing line and
   two buttons, so it should not take a full screen to say so. */
/* gap:0 matters: .in is a grid, so the two-column gap becomes a 36px row gap
   here and stacks on top of the margins below */
.ctablock .in.one{grid-template-columns:1fr;gap:0;max-width:52ch;margin:0 auto;text-align:center}
.ctablock .in.one h2{max-width:none;font-size:clamp(24px,2.5vw,30px)}
.ctablock .in.one p{margin-left:auto;margin-right:auto;margin-top:8px;font-size:15.5px}
.ctablock .in.one div{justify-content:center;margin-top:17px}
@media(max-width:860px){.ctablock .in{grid-template-columns:1fr;gap:26px}}
.ctablock h2{max-width:22ch}
.ctablock p{margin-top:15px;font-size:16.5px;color:var(--dim);max-width:46ch;line-height:1.6}
.ctablock .term{margin:0;max-width:none}


/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--br);background:var(--bg-warm);
  padding:46px 0 28px;margin-top:60px;
}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
.fgrid .about p{font-size:14.5px;color:var(--faint);margin-top:14px;max-width:36ch;line-height:1.55}
.fcol p.h{font-size:14px;color:var(--text-hi);margin-bottom:14px;font-weight:500}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcol a{font-size:14.5px;color:var(--faint);text-decoration:none;transition:color .15s}
.fcol a:hover{color:var(--accent)}
.fbot{
  margin-top:42px;padding-top:20px;border-top:1px solid var(--br-2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ghost);
}
.fbot a{color:var(--ghost);text-decoration:none;margin-left:18px}
.fbot a:hover{color:var(--text-hi)}

/* ============================================================
   Surface modifiers. Declared last on purpose: they have to win
   over .card / .bigcard / .herocard / .ctablock, which are all
   single-class selectors too.

   .glow      the accent-filled surface, standing in for the
              colour photo cards on ElevenHacks. Children invert.
   .glow-dim  the warm neutral surface, its quieter sibling.
   ============================================================ */
.glow{background:var(--brand);border-color:var(--brand);color:#fff}
.glow h1,.glow h2,.glow h3,.glow h4,.glow .v{color:#fff}
.glow p,.glow .k,.glow .s,.glow .txt,.glow .lede{color:rgba(255,255,255,.84)}
.glow .eyebrow{color:rgba(255,255,255,.9)}
.glow .label{color:rgba(255,255,255,.72)}
.glow .corner{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff}
.glow .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36);color:#fff}
.glow .btn:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5)}
.glow .btn-primary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36);color:#fff}
.glow .btn-solid{background:#fff;border-color:#fff;color:var(--brand)}
.glow .btn-solid:hover{background:#e2e5ff;border-color:#e2e5ff}
.glow .badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}
/* the accent word would vanish into an accent-filled surface, so on
   blue it becomes ink, which is the other half of the monid.ai pair */
.glow .accent{color:var(--text-hi)}
.glow h1 .accent{background:none;padding:0;margin:0}
.glow .term{border-color:#000f96}
.glow a{color:#fff}
.glow .inline-stats .k{color:rgba(255,255,255,.72)}
.glow .inline-stats .v{color:#fff}
.glow .inline-stats .v small{color:rgba(255,255,255,.66)}

.glow-dim{background:var(--bg-warm);border-color:var(--br)}
a.glow-dim:hover{background:var(--surf-3);border-color:var(--br-2)}

/* ---------- sample banner ---------- */
.sample-banner{
  background:var(--accent-bg);border-bottom:1px solid var(--accent-br);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  padding:9px 0;text-align:center;color:var(--accent);
}
.sample-banner code{background:rgba(255,255,255,.09);border-radius:4px;padding:1px 5px}