/* GovCon API, the only stylesheet on the site.
   Pages contribute no CSS: no <style> block, no style=" attribute, no new class names.
   Three heading levels, eleven classes. Content is written to fit this, not the reverse.
   Hierarchy is size and weight. ONE accent (--accent rust), on .button--primary and nowhere
   else; every other use of colour means status. */

:root{
  --bg:#020617; --surface:#212e4d; --raised:#2e3d61;
  --line:#2c3a52; --edge:#64748b;
  --text:#f8fafc; --muted:#cbd5e1; --subtle:#94a3b8;
  --accent:#c2410c; --on-accent:#ffffff;         /* the one high-contrast accent */
  --ok:#34d399; --warn:#f59e0b; --bad:#f87171;   /* status, and nothing else */
  --max:1024px; --pad:24px; --gap:20px; --gap-lg:44px; --sec:72px; --radius:6px;
  --sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--muted);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--muted);outline-offset:2px}

/* Structure. The measure is set once, here, and nowhere else. */
body>header>*,main>section>*,body>footer>*{width:min(var(--max),100% - var(--pad)*2);margin-inline:auto}
main>section{padding:var(--sec) 0}
main>section+section{border-top:1px solid var(--line)}
body>header{position:sticky;top:0;z-index:50;background:var(--bg);padding:18px 0;border-bottom:1px solid var(--line)}
/* so an anchor target is not hidden under the sticky header */
html{scroll-padding-top:82px;scroll-behavior:smooth}
body>footer{padding:36px 0;border-top:1px solid var(--line);color:var(--subtle);font-size:14px}
body>header>*{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* two groups: where to go (links, beside the logo) and what to do (the one button, alone at the right) */
body>header nav{margin-left:8px}
body>header>*>.button{margin-left:auto}
:is(body>header,body>footer) nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
:is(body>header,body>footer) nav ul li{margin:0}
:is(body>header,body>footer) a{color:var(--muted);text-decoration:none;font-size:14px}
:is(body>header,body>footer) a:hover{color:var(--text)}
/* The footer is the SECONDARY index: ~34 links in five columns under 12px headings. At
   the header's 14px it out-weighs the labels above it and competes with the primary nav,
   so it sits one step down. Chrome is two registers, not one. */
body>footer a{font-size:13px}
body>header>*>a:first-child{color:var(--text);font-weight:600;font-size:15px}
:is(body>header,body>footer) img{width:26px;height:26px;border-radius:5px;vertical-align:-7px;margin-right:9px}

/* Type. Three levels and no more: h4 appears on 11 of 66 pages, h5 and h6 on none. */
h1,h2,h3{color:var(--text);line-height:1.22;text-wrap:balance}
h1{font-size:40px;font-weight:800;letter-spacing:-.025em;margin:0 0 .45em}
h2{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:var(--gap-lg) 0 .5em}
h3{font-size:20px;font-weight:600;margin:64px 0 .45em}
p,ul,ol,dl,figure,pre,form,details,table,.grid,.stats,.note,.warn{margin:0 0 var(--gap)}
ul,ol{padding-left:22px}
li+li{margin-top:6px}
:is(h1,h2,h3)+*{margin-top:0}
:is(h1,h2,h3)+:is(h2,h3){margin-top:var(--gap)}
:is(main>section>*,.note,.warn,.grid>*,details>div,li,td,th)>:first-child{margin-top:0}
:is(.note,.warn,.grid>*,details>div,li,td,th)>:last-child{margin-bottom:0}
/* The paragraph after the page title is the lead. It needs no class. */
h1+p{font-size:19px;max-width:62ch}
/* Landing hero only, a step larger than every other page's h1. Scoped by the sign-up form, which only the landing
   carries, so no page-specific class is needed. */
main>section:first-child:has(#signup-form){padding-block:104px 88px}
main>section:first-child:has(#signup-form) h1{font-size:54px;line-height:1.1}
main>section:first-child:has(#signup-form) h1+p{font-size:21px;max-width:none}
a{color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--text)}
strong{color:var(--text);font-weight:600}
small{font-size:13px;color:var(--subtle)}

/* One button, drawn one way. Bare <button> is styled only inside main: chrome has its
   own vocabulary, and a dropdown trigger or a close X must not inherit CTA chrome. */
main button,.button{display:inline-block;padding:11px 22px;border:1px solid var(--edge);background:transparent;color:var(--text);border-radius:var(--radius);font:500 14px/1.15 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s}
main button:hover,.button:hover{background:var(--raised);color:var(--text)}
.button--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.button--primary:hover{filter:brightness(1.08);background:var(--accent);color:var(--on-accent)}
/* the selected one in a group of buttons, e.g. a tab row. Not a second primary. */
:is(main button,.button)[aria-current]{background:var(--raised);border-color:var(--muted);color:var(--text)}
/* :not(.hidden) or this rule's 0-1-1 outranks .hidden and un-hides a hidden button row */
p:has(>.button):not(.hidden),main p:has(>button):not(.hidden){display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Forms */
label{display:block;font-size:13px;color:var(--subtle);margin-bottom:6px}
input,select,textarea{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font:15px/1.4 var(--sans)}
/* a checkbox or radio keeps its own size; the 100% above is for text fields and selects */
input:is([type=checkbox],[type=radio]){width:auto}
input:focus,select:focus,textarea:focus{border-color:var(--edge)}
/* stretch, not flex-end: the button matches the input's height exactly instead of
   sitting 2.9px shorter, which reads as a step on the site's main conversion control. */
form{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;max-width:520px}
form>p{flex:1 1 220px;margin:0}
form>button{flex:0 0 auto}

/* Tables. 109 of them across the site, so they get the care. */
figure{overflow-x:auto}
/* the table inside keeps no bottom margin of its own, or every wrapped table gets a double gap */
figure>:last-child{margin-bottom:0}
/* a note right under a table belongs to the table: keep it close */
figure:has(+p){margin-bottom:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:12px 26px 12px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
:is(th,td):last-child{padding-right:0}
thead th{color:var(--subtle);font:600 12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.06em;border-bottom-color:var(--edge)}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* A comparison table: column one holds row labels and the rest are PEERS, so they share the
   width evenly. Mark it with data-compare on the table. The old signal was an empty first
   header cell, which is fragile: give that cell a name and the table silently falls back to
   browser auto-layout, which sizes each plan column to its widest string. Measured on
   /pricing: peer columns came out 79 / 135 / 126px on one table and 273 / 273 / 273 on
   another, on the same page. A data table keeps content-based columns and carries no attribute. */
table[data-compare]{table-layout:fixed}
/* The PEER columns are what must match each other, so they are what gets a width. Column one
   takes whatever is left, which is right whether it holds "Price" or a 40-word capability
   description. Pinning column one instead gave prose 410px while three columns of 205px sat
   holding the word "No". Peers carry short values (Yes, No, 10 / day, $19/mo); 14% is enough
   for those and leaves the label column nearly 600px. */
table[data-compare] :is(th,td):not(:first-child){width:24%}
/* ...unless column one carries prose rather than a label. A capability table pairs a name and
   its description against short plan values, so the peers give way. Same rule, two shapes:
   without this the limits table shows the word "Price" in a 594px column beside 143px peers. */
table[data-compare="prose"] :is(th,td):not(:first-child){width:14%}
/* A comparison table's column heads name the PLANS you are choosing between, so they carry
   more weight than a data table's field labels. Scoped to the comparison table only. */
/* Plan names are set as <code>, like the endpoints and the Pro marker, so they drop the
   generic thead uppercase+tracking: mono on a chip already says "a named thing in the
   system", and PRO here vs Pro in the heading was the same label rendered two ways. */
table[data-compare] thead th{font-size:15px;text-transform:none;letter-spacing:0}
/* PEER TABLES. Several tables of the same shape stacked in one region are read DOWN, so their
   columns must line up with each other, not each size to its own longest cell. Content-based
   sizing made the five tool tables on /mcp/tools come out 275 / 186 / 212 / 247 / 266px in
   column one, visibly ragged. data-compare cannot do this job: it pins the PEER columns and
   lets column one take the remainder, which is the opposite of what a name+description table
   needs. Mark each table in the run with data-cols. */
table[data-cols~="name"]{table-layout:fixed}
table[data-cols~="name"] :is(th,td):first-child{width:26%}
/* A short second column (a source like SAM.gov, or a price) between the name and its description. On a phone the
   three columns would squeeze into 342px, so the table keeps a floor width and scrolls inside its figure. */
table[data-cols~="short"] :is(th,td):nth-child(2){width:16%}
/* Any table of three or more columns keeps a floor width on a phone and scrolls inside its figure, so dates,
   counts and names never break mid-value. Two-column tables still fit the screen. */
@media (max-width:640px){figure>table:has(tr>:nth-child(3)){min-width:600px}}
/* The price row of a comparison table is the decision the page is asking for, so it carries
   the figure size (19px, the lead's size) rather than body-table 14px. Marked by attribute:
   a size is a styling choice and does not belong in a semantic tag. */
td[data-price]{font-size:19px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* Code */
code{font:.88em var(--mono);background:var(--raised);color:#e2e8f0;padding:2px 6px;border-radius:4px}
pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;overflow:auto;max-height:420px;font:13px/1.6 var(--mono);color:#e2e8f0}
pre code{background:none;padding:0;font-size:inherit}

/* Two asides, and a grid of plain columns. The landing boxes none of its grid children. */
.note,.warn{background:var(--surface);padding:14px 18px;border-radius:var(--radius)}
.warn{border-left:3px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0}
.grid{display:grid;gap:40px 48px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* a column ending in buttons aligns them across the row, whatever the copy above does */
.grid>*{display:flex;flex-direction:column}
.grid>*>p:has(>.button){margin-top:auto}
/* room between a section's intro and the plan columns under it */
main p+.grid,main .grid+p{margin-top:36px}
/* a plan's price is the figure the column is about: the stat size */
.grid [data-price]{font:600 28px/1.1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums}
/* the footer is an index, not prose: five columns of links, tighter track and gaps */
body>footer .grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 32px}
body>footer ul{list-style:none;padding:0}
body>footer li+li{margin-top:4px}
body>footer h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin:0 0 10px}
/* The action a column ends on ("All capabilities", "Manage billing"): the body-link
   treatment, restored. The rule above strips text-decoration from every chrome link, which
   is exactly what makes an underline read as "not one of the index rows". Marked with an
   attribute, not <strong>/<u>: those are semantic claims about the CONTENT (strong
   importance, unarticulated annotation) and a screen reader announces them. This is a
   styling decision, so it lives in the stylesheet. */
body>footer .grid a[data-action]{color:var(--text);text-decoration:underline}
/* The bottom bar is a different register from the index above it: identity on one side,
   legal and account on the other, with a rule between. Run together in one sentence they
   read as a single run-on line. */
body>footer p{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;border-top:1px solid var(--line);margin:34px 0 0;padding-top:22px}
/* A link must never outgrow the text it sits in. The 14px chrome-link rule above is
   0-0-3 and was beating small's 13px, so bar links rendered LARGER than the bar. */
:is(body>header,body>footer) small a{font-size:inherit}

/* Stats: <dl class=stats><div><dt>label</dt><dd>value</dd></div></dl> */
.stats{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stats>div{display:flex;flex-direction:column;gap:4px}
.stats dt{order:2;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle)}
.stats dd{margin:0;font:600 28px/1.1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums}

/* A nav inside main is always the in-page contents. All three real ones are labelled so. */
main nav{border-bottom:1px solid var(--line);padding-bottom:22px;margin:0 0 var(--gap)}
main nav strong{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:600;margin-bottom:10px}
main nav ol,main nav ul{margin:0}

/* Status */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--subtle);font:600 11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.05em}
.badge--ok{color:var(--ok);border-color:#14532d}
.badge--bad{color:var(--bad);border-color:#7f1d1d}

/* Checkout and the like. <dialog> gives the overlay, centring and Escape for free. */
dialog{max-width:420px;width:calc(100% - var(--pad)*2);background:var(--surface);color:var(--muted);border:1px solid var(--edge);border-radius:var(--radius);padding:24px}
dialog::backdrop{background:rgb(0 0 0 / .72)}

/* Disclosure: <details><summary>..</summary><div>..</div></details> */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
summary{padding:14px 18px;cursor:pointer;color:var(--text);font-weight:600;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";margin-right:10px;color:var(--subtle);font-weight:400}
details[open] summary::before{content:"\2212"}
details>div{padding:0 18px 18px}

.hidden{display:none}

@media(max-width:640px){
  :root{--sec:48px;--gap-lg:32px}
  h1{font-size:31px} h2{font-size:22px} h1+p{font-size:17px} h3{margin-top:44px;font-size:18px}
  main>section:first-child:has(#signup-form){padding-block:64px 56px}
  main>section:first-child:has(#signup-form) h1{font-size:36px}
  main>section:first-child:has(#signup-form) h1+p{font-size:18px}
  body>header>*{gap:14px} body>header nav{margin-left:0}
  /* phone: logo and button share the first row, the links take the second */
  body>header>*>.button{order:2} body>header nav{order:3;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}