:root{
  --bg:#0a0a0d;
  --panel:#121217;
  --ink:#eceae4;
  --gray:#9a97a0;
  --faint:#5f5d66;
  --line:#26262e;
  --teal:#45d6c4;
  --pink:#ff2e88;
  --violet:#9b8cff;
  --blue:#5ab4ff;
  --amber:#e8b23e;
  --green:#6fd66a;
  /* Extra category hues. The original six were reused across sixteen
     categories, so Coding rendered the same blue as Research, Chat the
     same teal as Email, and Framework the same pink as Sales -- the dot
     stopped distinguishing anything. Tools sat on --faint, which is a
     dark grey on a near-black page and read as no colour at all. */
  --orange:#ff8f3e;
  --magenta:#e26bff;
  --lime:#c3f53c;
  --sky:#38d9f0;
  --coral:#ff7a5c;
  --peri:#8fa3ff;
  --slate:#93a1b8;
  --aqua:#7ee8c0;
  --gold:#ffd23e;
  --disp:'Archivo',sans-serif;
  --sans:'Public Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* hero -- the photograph is the design */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,13,.55) 0%,rgba(10,10,13,0) 22%,rgba(10,10,13,0) 55%,rgba(10,10,13,.92) 92%,var(--bg) 100%)}
.hbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:40px;padding:22px 0}
.logo{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.14em;text-transform:uppercase}
nav{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:.02em}
nav a{color:rgba(236,234,228,.75)}
nav a:hover{color:#fff}
.hfoot{position:relative;z-index:2;margin-top:auto;padding-bottom:56px}
.hfoot h1{font-family:var(--disp);font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:.01em;text-transform:uppercase;max-width:20ch}
.hfoot p{font-family:var(--mono);font-size:13px;color:var(--gray);margin-top:14px;letter-spacing:.04em}
.hfoot p b{color:var(--ink);font-weight:500}

/* plain topbar for non-hero pages */
.topbar{border-bottom:1px solid var(--line);padding:22px 0}
.topbar nav a{color:var(--gray)}
.topbar nav a:hover{color:var(--ink)}

/* toolbar */
.tools{display:flex;gap:14px;align-items:center;padding:30px 0 22px;flex-wrap:wrap}
.q{flex:1;min-width:260px;display:flex;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.q input{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:14px;padding:12px 14px;color:var(--ink)}
.q input:focus{outline:none}
.q:focus-within{border-color:var(--teal)}
.q button{border:none;background:var(--ink);color:var(--bg);font-family:var(--sans);font-weight:600;font-size:13px;padding:0 20px;cursor:pointer;border-radius:0 3px 3px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;color:var(--gray);border:1px solid var(--line);border-radius:4px;padding:7px 12px;background:transparent;cursor:pointer;display:inline-block}
.chip:hover{border-color:var(--gray);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* table */
.hairline{height:2px;margin-bottom:-1px;background:linear-gradient(90deg,transparent 0%,var(--pink) 50%,transparent 100%)}
table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
th{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
td.nm{font-weight:600;font-size:15px;white-space:nowrap}
td.nm a:hover{color:var(--teal)}
td.ds{color:var(--gray);font-size:14px}
td.ct{font-family:var(--mono);font-size:12px;color:var(--gray)}
td.pr{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
td.vd{font-family:var(--mono);font-size:12px;white-space:nowrap;text-align:center}
.yes{color:var(--teal)}
.no{color:var(--faint)}
.tfoot{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font-family:var(--mono);font-size:12.5px;color:var(--gray)}
.tfoot a{color:var(--ink);border-bottom:1px solid var(--ink)}
.tfoot a:hover{color:var(--teal);border-color:var(--teal)}

.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-email{background:var(--teal)}
.dot-chat{background:var(--green)}
.dot-research{background:var(--violet)}
.dot-coding{background:var(--blue)}
.dot-framework{background:var(--orange)}
.dot-sales{background:var(--pink)}
.dot-memory{background:var(--magenta)}
.dot-retrieval{background:var(--lime)}
.dot-data{background:var(--sky)}
.dot-automation{background:var(--amber)}
.dot-content{background:var(--coral)}
.dot-ops{background:var(--peri)}
.dot-voice{background:var(--aqua)}
.dot-vision{background:var(--gold)}
.dot-security{background:#e0705f}
/* A real, if muted, colour -- not the near-invisible --faint. */
.dot-tools{background:var(--slate)}
.dot-none{background:var(--slate)}
/* Status pill: every row states its real status. A bare dash in this
   column said nothing and made the table read as unfinished. */
.st{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.st-verified{color:var(--teal);background:rgba(79,209,165,.10)}
.st-tested{color:var(--teal);background:rgba(79,209,165,.18);font-weight:500}
.st-listed{color:var(--faint);background:rgba(255,255,255,.05)}
.st-failed{color:#e0705f;background:rgba(224,112,95,.10)}

/* reviews */
.rev{margin-top:36px;border-top:1px solid var(--ink);padding-top:28px}
.rev .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--pink);text-transform:uppercase;margin-bottom:16px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcell{border:1px solid var(--line);border-radius:4px;padding:18px 20px;background:var(--panel);display:block}
.rcell:hover{border-color:var(--gray)}
.rcell h3{font-family:var(--disp);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.rcell p{font-size:13.5px;color:var(--gray);margin-bottom:12px}
.rcell .vt{font-family:var(--mono);font-size:12px}

/* generic content sections (agent detail, methodology) */
.section{margin-top:36px;border-top:1px solid var(--ink);padding-top:28px}
.section .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--pink);text-transform:uppercase;margin-bottom:16px}
.section h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,40px);text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px}
.section h2{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.03em;margin:28px 0 12px}
.section p{color:var(--gray);font-size:14.5px;max-width:70ch}
.section p + p{margin-top:10px}
.meta{font-family:var(--mono);font-size:13px;color:var(--gray);display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 22px}
.meta b{color:var(--ink);font-weight:500}
.pill{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:4px 9px;color:var(--gray);display:inline-block;margin:0 6px 6px 0}

.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px}
.check{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:var(--panel)}
.check .name{font-family:var(--mono);font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}
.check .result{font-family:var(--mono);font-size:14px;margin-top:6px}
.check .result.pass{color:var(--teal)}
.check .result.fail{color:var(--pink)}
.check .result.skip{color:var(--faint)}

.runs{margin-top:16px}
.run{border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin-bottom:10px;background:var(--panel)}
.run .rh{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;color:var(--gray)}
.run .rh .outcome{font-weight:600}
.run .outcome.pass{color:var(--teal)}
.run .outcome.partial{color:var(--amber)}
.run .outcome.fail, .run .outcome.unreachable{color:var(--pink)}

.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 6px;font-family:var(--mono)}
.stat{border:1px solid var(--line);border-radius:4px;padding:16px 20px;background:var(--panel);min-width:140px}
.stat .n{font-size:26px;font-weight:600;color:var(--ink)}
.stat .l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

.empty{color:var(--faint);font-family:var(--mono);font-size:13px;padding:30px 0}

footer{margin-top:52px;border-top:1px solid var(--line);padding:22px 0 40px}
.fg{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;color:var(--faint)}
.fg a:hover{color:var(--ink)}
.fg .r{display:flex;gap:20px}

/* ---------------------------------------------------------------- */
/* Responsive                                                          */
/*                                                                     */
/* The directory is a 5-column data table, which does not fit a phone. */
/* The previous rules "solved" that by hiding the What-it-does column  */
/* below 860px -- deleting the single most useful column on exactly    */
/* the devices with least context. Instead: tablets keep the table     */
/* (tightened), phones get the same rows re-laid-out as stacked cards  */
/* with nothing hidden.                                                */
/* ---------------------------------------------------------------- */

/* Tablet: keep the table, keep every column, tighten spacing. */
@media(max-width:900px){
  .wrap{padding:0 20px}
  nav{gap:16px;font-size:12px}
  .hero{min-height:70vh}
  .stat-row{gap:14px}
  .rgrid{grid-template-columns:1fr}
  th,td{padding:11px 9px}
  td.nm{font-size:14px;white-space:normal}
  td.ds{font-size:13px}
  table{font-size:13.5px}
  /* Chip strip scrolls sideways instead of stacking into a wall that
     pushes the table below the fold. */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
}

/* Phone: rows become cards. Every field still present and labelled. */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .hbar{flex-wrap:wrap;justify-content:center;gap:10px 18px;text-align:center;padding:16px 0}
  nav{flex-wrap:wrap;justify-content:center;gap:10px 16px}
  .hero{min-height:78vh}
  .hfoot{padding-bottom:36px}
  .tools{padding:22px 0 16px;gap:10px}
  .q{min-width:0;width:100%}
  /* 44px min touch targets */
  .q input{padding:13px 14px;font-size:16px}      /* 16px avoids iOS zoom-on-focus */
  .q button{padding:0 18px;min-height:46px}
  .chip{padding:9px 13px}

  .hairline{display:none}
  table,thead,tbody,tr,td{display:block;width:100%}
  table{border-top:none;font-size:14px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tr{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:14px 15px;margin-bottom:10px}
  td{border:none;padding:0}

  td.nm{font-size:16px;font-weight:600;white-space:normal;margin-bottom:5px}
  td.ds{display:block;color:var(--gray);font-size:13.5px;line-height:1.5;margin-bottom:10px}
  /* category / status / checked share one compact meta line */
  td.ct,td.vd,td.pr{display:inline-block;width:auto;vertical-align:middle}
  td.ct{font-size:12px;margin-right:12px}
  td.vd{text-align:left;margin-right:12px}
  td.pr{text-align:left;font-size:12px;color:var(--faint)}
  td.pr::before{content:'checked ';color:var(--faint)}

  .tfoot{flex-direction:column;align-items:flex-start;gap:8px}
  .fg{flex-direction:column;align-items:flex-start;gap:10px}
  .fg .r{flex-wrap:wrap;gap:14px}
  .section h2{margin:22px 0 10px}
  .meta{gap:6px 14px}
  .checks{grid-template-columns:1fr}
  .run .rh{flex-direction:column;gap:4px}
  .stat{min-width:0;flex:1 1 42%;padding:13px 15px}
  .stat .n{font-size:22px}
}