/* ---------------------------------------------------------------------------
   IBM Plex, self-hosted.

   These files are shipped deliberately. The stylesheet asked for IBM Plex for
   months while no font files existed and there was no @font-face rule, so only
   visitors who happened to have Plex installed locally ever saw it — everyone
   else silently got the fallback stack. The CSP is font-src 'self', so loading
   them from Google or any other host is blocked; self-hosting is the only way.

   Sans is a variable face covering 400-700, which is why one file serves the
   regular, semibold and bold weights. Mono ships as two static weights.
   Licensed SIL OFL 1.1.

   font-display:swap renders the fallback immediately and swaps Plex in when it
   arrives, so text is never invisible while a font loads.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#0d1117;
  --bg-card:#151b23;
  --bg-card-hover:#181f28;
  --border:#242c38;
  --border-hover:rgba(245,185,66,.42);
  --text:#e6e9ef;
  --text-soft:#c3cad6;
  --muted:#8b95a5;
  --dim:#5b6577;
  --amber:#f5b942;
  --amber-deep:#d98c2b;
  --amber-dim:rgba(245,185,66,.10);
  --amber-edge:rgba(245,185,66,.22);
  --shadow-card:0 12px 32px -14px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--text);
  font-family:'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* ambient warmth behind the top of the page — gives the flat dark some depth */
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 460px at 50% -240px, rgba(245,185,66,.055), transparent 70%),
    radial-gradient(700px 300px at 100% 0, rgba(91,101,119,.10), transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

a{color:inherit;}

.wrap{max-width:960px;margin:0 auto;padding:0 24px;}

/* ---------- header / nav ---------- */
header.top{padding:28px 0 0;}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  transition:opacity .18s var(--ease);
}
.brand:hover{opacity:.82;}
.brand svg{width:34px;height:34px;flex:none;}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.2px;color:var(--text);}
.brand-name .accent{color:var(--amber);}

nav.site{display:flex;gap:4px;flex-wrap:wrap;}
nav.site a{
  position:relative;
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border-radius:7px;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
nav.site a:hover{color:var(--text);background:rgba(255,255,255,.04);}
nav.site a.active{color:var(--amber);background:var(--amber-dim);}

/* ---------- hero ---------- */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--border);}
.hero h1{
  font-size:clamp(36px,6.2vw,54px);
  margin:0 0 14px;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-1.4px;
}
.hero p.tagline{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  color:var(--amber);
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-size:12px;
  margin:0 0 22px;
  padding:5px 12px;
  border:1px solid var(--amber-edge);
  border-radius:999px;
  background:var(--amber-dim);
}
.hero p.desc{
  max-width:600px;
  color:var(--text-soft);
  font-size:clamp(16px,2vw,18px);
  margin:0;
  line-height:1.55;
}
.hero-cta{margin-top:28px;}

/* interior page hero */
.page-hero{padding:60px 0 38px;border-bottom:1px solid var(--border);}
.page-hero h1{
  font-size:clamp(28px,4.4vw,38px);
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:-.8px;
  line-height:1.1;
}
.page-hero p{margin:0;color:var(--text-soft);max-width:640px;font-size:16px;}
.page-hero .tagline{
  font-family:'IBM Plex Mono',monospace;
  color:var(--amber);
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-size:12px;
  margin:0 0 10px;
}

/* ---------- sections ---------- */
section{padding:56px 0;}
section + section{border-top:1px solid var(--border);}

h2.eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  margin:0 0 22px;
  font-weight:400;
}
h2.eyebrow::before{
  content:"";
  width:16px;
  height:2px;
  border-radius:2px;
  background:var(--amber);
  flex:none;
}

h2.eyebrow + .section-intro{margin-top:-10px;}
.section-intro{
  max-width:660px;
  color:var(--text-soft);
  font-size:15px;
  margin:0 0 24px;
}

h3{margin:0 0 8px;font-size:18px;letter-spacing:-.3px;}

.prose{max-width:660px;}
.prose p{color:var(--text-soft);margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose a{color:var(--amber);text-underline-offset:3px;}
.prose ul{color:var(--text-soft);padding-left:20px;margin:0 0 16px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--text);}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;}

/* stops a lone card stretching the full width of the page */
.grid.compact{grid-template-columns:repeat(auto-fit,minmax(268px,380px));}

.card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:11px;
  overflow:hidden;
  transition:border-color .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease), background-color .2s var(--ease);
}
/* hairline highlight along the top edge — reads as a lit surface */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 30%,rgba(255,255,255,.07) 70%,transparent);
}
.card:hover{
  border-color:var(--border-hover);
  background:var(--bg-card-hover);
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}
.card[aria-disabled="true"]{opacity:.72;}
.card[aria-disabled="true"]:hover{
  transform:none;
  border-color:var(--border);
  background:var(--bg-card);
  box-shadow:none;
}

.card .status{
  align-self:flex-start;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  color:var(--amber);
  background:var(--amber-dim);
  border:1px solid var(--amber-edge);
  padding:4px 10px;
  border-radius:999px;
  line-height:1.5;
}
.card .status.dev{
  color:var(--muted);
  background:rgba(139,149,165,.09);
  border-color:rgba(139,149,165,.2);
}
.card h3{margin:0;font-size:18px;}
.card p{margin:0;color:#aab3c2;font-size:14.5px;flex:1;line-height:1.55;}
.card a.link{
  font-size:13px;
  font-weight:600;
  color:var(--amber);
  text-decoration:none;
  transition:gap .18s var(--ease);
}
.card a.link:hover{text-decoration:underline;text-underline-offset:3px;}
.card .link.muted{color:var(--muted);cursor:default;font-size:13px;font-weight:600;}

/* ---------- faq ---------- */
.faq{max-width:700px;}
.faq details{
  border-bottom:1px solid var(--border);
  padding:16px 2px;
  transition:border-color .18s var(--ease);
}
.faq details[open]{border-color:rgba(245,185,66,.22);}
.faq summary{
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  transition:color .18s var(--ease);
}
.faq summary:hover{color:var(--amber);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  color:var(--amber);
  font-weight:400;
  font-size:18px;
  line-height:1.3;
  flex:none;
}
.faq details[open] summary::after{content:"\2013";}
.faq details p{color:var(--text-soft);margin:12px 0 0;font-size:15px;}
.faq details p a{color:var(--amber);}

/* ---------- buttons ---------- */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.btn{
  display:inline-block;
  padding:11px 20px;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  transition:border-color .18s var(--ease), color .18s var(--ease),
             background-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.btn:hover{
  border-color:var(--border-hover);
  background:var(--bg-card-hover);
  transform:translateY(-1px);
}
.btn.primary{
  background:var(--amber);
  border-color:var(--amber);
  color:#191203;
}
.btn.primary:hover{
  background:var(--amber-deep);
  border-color:var(--amber-deep);
  color:#191203;
  box-shadow:0 10px 24px -12px rgba(245,185,66,.7);
}

.fineprint{
  margin-top:16px !important;
  font-size:14px;
  color:var(--muted) !important;
}

/* ---------- footer ---------- */
footer{
  padding:40px 0 60px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
}
.foot-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.foot-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:5px 9px;
  border-radius:7px;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.foot-nav a:hover{color:var(--text);background:rgba(255,255,255,.04);}
footer .crust-line{font-family:'IBM Plex Mono',monospace;margin-top:6px;color:var(--dim);}

/* ---------- accessibility ---------- */
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
  .card:hover,.btn:hover{transform:none !important;}
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .wrap{padding:0 22px;}
  .hero{padding:60px 0 46px;}
}

@media (max-width:768px){
  .topbar{flex-direction:column;align-items:flex-start;gap:14px;}
  nav.site{gap:2px;margin-left:-10px;}
  .hero{padding:46px 0 38px;}
  section{padding:44px 0;}
  .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
  .grid.compact{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .wrap{padding:0 18px;}
  header.top{padding:20px 0 0;}
  .brand svg{width:30px;height:30px;}
  .brand-name{font-size:16px;}

  nav.site{width:100%;row-gap:4px;}
  nav.site a{font-size:13px;padding:5px 9px;}

  .hero{padding:36px 0 32px;}
  .hero p.tagline{font-size:11px;letter-spacing:1.3px;}

  .page-hero{padding:34px 0 26px;}

  section{padding:34px 0;}
  h2.eyebrow{margin-bottom:18px;}
  .section-intro{font-size:14.5px;}

  .grid,.grid.compact{grid-template-columns:1fr;}
  .card{padding:18px;border-radius:12px;}

  .btn-row{flex-direction:column;align-items:stretch;}
  .btn{text-align:center;padding:13px 20px;}

  .faq summary{font-size:14px;}
  .prose p,.prose ul{font-size:15px;}

  footer{padding:30px 0 48px;}
  .foot-nav{margin-left:-9px;}
}

@media (max-width:380px){
  nav.site a{font-size:12px;padding:5px 7px;}
}