/* SaaS Tech Watch — analyst layout, built on tokens.css */

@font-face{font-family:'Inter';src:url('/fonts/Inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-500.woff2') format('woff2');font-weight:500;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--text-body-m-size);
  line-height:var(--text-body-m-line-height);color:var(--color-gray-800);background:var(--color-white);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-blue-500);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--color-blue-600)}
:focus-visible{outline:2px solid var(--color-blue-500);outline-offset:2px}

h1,h2,h3,h4{color:var(--color-indigo-900);margin:0 0 var(--space-md)}
h1{font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);
   line-height:var(--text-h1-line-height);letter-spacing:var(--text-h1-letter-spacing)}
h2{font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);
   line-height:var(--text-h2-line-height);letter-spacing:var(--text-h2-letter-spacing)}
h3{font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:var(--text-h3-line-height)}
h4{font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-line-height)}
p{margin:0 0 var(--space-md)}

.wrap{max-width:var(--container-lg,1200px);margin:0 auto;padding:0 var(--space-xl)}
.wrap--article{max-width:720px}
.wrap--data{max-width:960px}
@media (max-width:640px){.wrap{padding:0 var(--space-md)}}

.label{font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--color-indigo-600);display:block;margin-bottom:var(--space-sm)}
.mono{font-family:var(--font-mono);font-size:0.875rem;font-weight:500;color:var(--color-gray-600)}

/* masthead */
.masthead{position:sticky;top:0;z-index:100;background:var(--color-white);
  border-bottom:2px solid var(--color-indigo-900)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-lg);padding:var(--space-md) 0;flex-wrap:wrap}
.masthead__brand{font-size:1.375rem;font-weight:700;letter-spacing:-0.01em;
  color:var(--color-indigo-900);text-decoration:none}
.masthead__brand:hover{color:var(--color-indigo-700)}
.masthead__nav{display:flex;gap:var(--space-lg);flex-wrap:wrap;font-size:0.875rem;font-weight:500}
.masthead__nav a{color:var(--color-gray-600);text-decoration:none}
.masthead__nav a:hover{color:var(--color-indigo-700)}

/* index hero */
.lede{padding:var(--space-2xl) 0;border-bottom:1px solid var(--color-gray-200);
  margin-bottom:var(--space-2xl)}
.lede h1{max-width:26ch}
.lede p{font-size:var(--text-body-l-size);line-height:var(--text-body-l-line-height);
  color:var(--color-gray-600);max-width:64ch;margin:0}

/* cards */
.grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{border:1px solid var(--color-gray-200);border-radius:8px;padding:var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-sm);
  transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--color-indigo-600);box-shadow:0 4px 16px rgba(30,27,75,.08)}
.card h3{margin:0}
.card h3 a{color:var(--color-indigo-900);text-decoration:none}
.card h3 a:hover{color:var(--color-indigo-700)}
.card p{margin:0;font-size:0.875rem;line-height:1.55;color:var(--color-gray-600)}
.card__foot{margin-top:auto;padding-top:var(--space-sm);display:flex;gap:var(--space-md);
  flex-wrap:wrap;align-items:center}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);
  flex-wrap:wrap;margin:var(--space-2xl) 0 var(--space-lg);padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--color-gray-200)}
.section-head h2{margin:0}

/* article */
.article{padding:var(--space-2xl) 0}
.article__head{margin-bottom:var(--space-xl)}
.article__meta{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;
  padding-top:var(--space-md);border-top:1px solid var(--color-gray-200)}
.prose{font-size:var(--text-body-l-size);line-height:var(--text-body-l-line-height);
  color:var(--color-gray-700);max-width:72ch}
.prose h2{margin-top:var(--space-2xl)}
.prose h3{margin-top:var(--space-xl)}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 var(--space-md)}
.prose li{margin-bottom:var(--space-sm)}
.prose strong{color:var(--color-indigo-900);font-weight:600}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--color-gray-100);
  padding:.1em .35em;border-radius:4px}
.prose pre{background:var(--color-gray-900);color:var(--color-gray-100);padding:var(--space-lg);
  border-radius:8px;overflow-x:auto}
.prose pre code{background:none;padding:0;color:inherit}
.prose blockquote{margin:var(--space-xl) 0;padding-left:var(--space-lg);
  border-left:3px solid var(--color-indigo-600);color:var(--color-gray-600)}

/* comparison table */
.prose .table-wrap,.table-wrap{overflow-x:auto;border:1px solid var(--color-gray-200);
  border-radius:8px;margin:var(--space-xl) 0}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:0.875rem}
th,td{padding:var(--space-md);text-align:left;border-bottom:1px solid var(--color-gray-200)}
th{background:var(--color-gray-100);color:var(--color-gray-700);font-size:0.75rem;font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:none}
td:not(:first-child){font-family:var(--font-mono);font-weight:500}
td[data-trend="up"]{color:var(--color-success)}
td[data-trend="watch"]{color:var(--color-warning)}

/* analyst callout + verdict */
.callout{border-left:3px solid var(--color-indigo-600);background:var(--color-gray-50);
  padding:var(--space-lg);border-radius:4px;margin:var(--space-xl) 0}
.verdict{background:var(--color-indigo-900);color:var(--color-blue-300);border-radius:8px;
  padding:var(--space-xl);margin:var(--space-2xl) 0}
.verdict h2,.verdict h3{color:var(--color-white);margin-top:0}
.verdict a{color:var(--color-blue-400)}

/* metric strip */
.metrics{display:flex;gap:var(--space-xl);flex-wrap:wrap;margin:var(--space-xl) 0;
  padding:var(--space-lg) 0;border-top:1px solid var(--color-gray-200);
  border-bottom:1px solid var(--color-gray-200)}
.metric__value{font-family:var(--font-mono);font-size:var(--text-h3-size);font-weight:500;
  color:var(--color-indigo-900)}
.metric__label{font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--color-gray-500)}

/* tags */
.tag{display:inline-block;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;padding:3px 10px;border-radius:9999px;
  background:var(--color-gray-100);color:var(--color-gray-600);text-decoration:none}
.tag:hover{background:var(--color-indigo-600);color:var(--color-white)}

/* footer */
.site-foot{background:var(--color-indigo-900);color:var(--color-blue-300);
  padding:var(--space-2xl) 0;margin-top:var(--space-3xl)}
.site-foot__inner{display:flex;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}
.site-foot a{color:var(--color-blue-400)}
.site-foot__brand{font-size:1.25rem;font-weight:700;color:var(--color-white);
  margin-bottom:var(--space-sm)}
.site-foot__meta{font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--color-gray-400)}

/* pagination */
.pager{display:flex;justify-content:space-between;gap:var(--space-md);margin:var(--space-2xl) 0;
  font-size:0.875rem;font-weight:600}
.pager span{color:var(--color-gray-400)}
