/* Shared design tokens and layout for every JetInfer page.
   Extracted from index.html so the marketing page, the specs page and the legal
   pages cannot drift apart visually. Edit here, not in a page. */
:root {
    --ground:   #07090E;
    --surface:  #0F131B;
    --line:     #1C2331;
    --text:     #E9EEF6;
    --muted:    #9AA6BB;
    --core:     #A8DC00;
    --core-dim: #4E6A00;
    --flame:    #A8DC00;
    --good:     #C0E454;

    --measure: 68ch;
    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-2: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
    --step-3: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  }

  * { box-sizing: border-box; }

  /* The hero art is pinned to the viewport edge with calc(50% - 50vw), and 50vw counts
     the scrollbar, so the bleed overhangs by exactly the scrollbar width and the page
     gains a horizontal scrollbar. clip rather than hidden: hidden on the root would
     also create a scroll container and break position:sticky if anything ever needs it. */
  html { overflow-x: clip; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }

  /* --- masthead ------------------------------------------------------- */
  header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  }
  .mark {
    font-family: Archivo, ui-sans-serif, sans-serif;
    font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1;
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--text); text-decoration: none;
  }
  /* Matches the X banner, which sets JET in white and INFER in the accent, tracked
     wide. That tracking is what makes the wordmark read as a logotype rather than as
     a word, and it is the cheapest way to make the two surfaces look like one brand. */
  .mark { letter-spacing: 0.14em; }
  .mark b { font-weight: 800; color: var(--core); }
  /* The real mark, not a CSS stand-in: the same dart PNG serves the header, the
     favicon and the HuggingFace org avatar, so the identity is one thing everywhere.
     The glow is kept from the old shock-diamond treatment — it ties the mark to the
     accent glow used on the hero and the live-status dot. */
  .mark img {
    /* /mark.png - the real avatar's chevrons, cut from the source art with the ring
       dropped and alpha taken from luminance. The ring only reads at favicon sizes; at
       masthead height it crowds the wordmark. It replaced cyan PNGs that the lime
       rebrand could not recolour, and then a hand-drawn SVG stand-in that was close but
       not the actual mark. Crop is to the ink box, so height means height - the older
       art carried 29% transparent padding and rendered at 42% of its declared size.
       Sized in em so the glyph tracks the wordmark if the type size changes. */
    display: block; height: 1.15em; width: auto;
    filter: drop-shadow(0 0 10px rgba(168, 220, 0, 0.4));
  }
  .status {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem; color: var(--muted);
    display: inline-flex; align-items: center; gap: 0.5rem;
  }
  .status::before {
    content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background: var(--flame); box-shadow: 0 0 8px var(--flame);
  }

  /* --- hero ----------------------------------------------------------- */
  /* The X banner is the brand people meet first, and it works because it has depth:
     night sky, ridgeline, a jet dragging lime trails. The page was flat ground with the
     same palette, which reads as a different company. So the banner's own painting sits
     behind the hero, cropped to the half that carries no type - the headline is drawn
     live here, and baking it in would print it twice.
     The art is pinned to the viewport's right edge rather than the content column, so
     the ridgeline runs off the screen the way it does on X instead of stopping at a
     seam. Two gradients mask it: one horizontal, so the left third is solid ground
     under the text, and one vertical, so nothing collides with the masthead rule or
     the panel below. */
  .hero { position: relative; padding: clamp(3rem, 8vw, 5rem) 0 3rem; }
  .hero::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    /* Bounded by the hero box on BOTH axes. Sizing the height from the art's aspect
       ratio worked on the landing page, whose hero is tall, and overflowed on /specs,
       whose hero is two lines - the ridge ran on under the measurement panel and took
       the figures with it. cover crops instead of overflowing, so a short hero simply
       shows less sky. */
    /* Aspect ratio drives the height, with max-height as the only clamp. Binding this
       to the hero box on both axes looked like the safe fix and was not: the hero runs
       the full column - headline, chart panel, model card, ~1500px - so `cover` scaled
       the art up to fill that and cropped it HORIZONTALLY, leaving a tall narrow slice
       with the jet magnified and the ridgeline gone. At its own ratio the whole frame
       fits, which is what makes it read like the banner. max-height still protects the
       short hero on /specs, where cropping is correct. */
    top: -1px; right: calc(50% - 50vw); width: min(88vw, 1600px);
    aspect-ratio: 1260 / 724; max-height: 100%;
    background: url("/hero.jpg") right bottom / cover no-repeat;
    /* The vertical fade used to start at 62%, which erased the ridgeline along with
       the seam it was there to hide. It now only softens the last tenth, which is
       enough to stop a hard edge against the panel below. The horizontal reveal starts
       earlier so the ridge carries further across, the way it does on the banner; the
       text stays legible because .hero::after lays solid ground under the column and
       that was measured, not judged by eye. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 36%, #000 70%),
      linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 36%, #000 70%),
      linear-gradient(to bottom, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  @media (min-resolution: 1.5dppx) {
    .hero::before { background-image: url("/hero@2x.jpg"); }
  }
  /* Under ~900px the text column spans the full width, so the art would sit under the
     headline rather than beside it. */
  @media (max-width: 900px) { .hero::before { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: heroIn 900ms ease-out both; }
  }
  @keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
  /* Measured, not judged by eye: --muted on the lit ridge is 2.73:1, which fails WCAG
     AA outright, and lifting the token alone only reaches 4.19:1. So the text column
     gets its own ground back. With the scrim the effective background under every line
     is within a shade of --ground, which puts the lede at ~8:1 and keeps it there no
     matter which part of the painting sits behind it. */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(to right,
      var(--ground) 0%, rgba(7, 9, 14, 0.94) 40%,
      rgba(7, 9, 14, 0.62) 58%, transparent 80%);
  }
  .hero > * { position: relative; z-index: 1; }
  /* The banner's third line, in the banner's treatment: mono, uppercase, tracked
     wide. It says what category we are in, which the headline no longer has to. */
  .kicker {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 1.1rem;
  }
  h1 {
    font-family: Archivo, ui-sans-serif, sans-serif;
    font-weight: 800; font-size: var(--step-3);
    line-height: 1.02; letter-spacing: -0.035em;
    text-wrap: balance; margin: 0 0 1.25rem; max-width: 20ch;
  }
  h1 em { font-style: normal; color: var(--core); }
  .lede {
    max-width: var(--measure); color: var(--muted);
    font-size: var(--step-1); margin: 0 0 2rem;
  }
  /* The page was one flat grey below the headline, so nothing told the eye which
     clause carries the offer. strong is the only emphasis on the page and is spent on
     exactly that clause. */
  .lede strong { color: var(--text); font-weight: 600; }

  .cta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1rem 1.5rem; margin-bottom: 1rem;
  }
  .cta-note {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.72rem; color: var(--muted);
  }

  /* --- panels --------------------------------------------------------- */
  .panel {
    border: 1px solid var(--line); background: var(--surface); padding: 1.5rem;
    margin-top: 2.5rem;
  }
  .panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-bottom: 0.35rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  /* --- peer-pattern blocks -------------------------------------------------
     DeepInfra, Novita and Together all open the same way: hero, then a model card
     carrying the price, then a strip of headline metrics. We have one model instead
     of two hundred, so the carousel collapses to a single card - but the job is the
     same, which is to answer "what do you serve, what does it cost, how fast" before
     the visitor has to read a paragraph.
     What we deliberately do NOT copy is the trust row. All three follow the model
     cards with customer logos, testimonials and a funding line. We have no customers
     yet, and inventing that furniture is exactly the kind of claim this site exists
     not to make. The measured-numbers strip stands in its place: it is the proof we
     actually have. */
  .modelcard {
    border: 1px solid var(--line); background: var(--surface);
    padding: 1.25rem 1.5rem; margin-top: 2.5rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
  }
  .modelcard .mc-name {
    font-family: Archivo, ui-sans-serif, sans-serif;
    font-weight: 700; font-size: 1.05rem; margin-right: auto;
  }
  .modelcard .mc-name span {
    display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.72rem; font-weight: 400; color: var(--muted);
    letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.25rem;
  }
  .mc-fig { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.95rem; }
  .mc-fig b { color: var(--accent); font-weight: 600; }
  .mc-fig span {
    display: block; font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin-top: 0.25rem;
  }
  .metrics {
    display: grid; gap: 1px; margin-top: 1px;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    background: var(--line); border: 1px solid var(--line);
  }
  .metrics div { background: var(--surface); padding: 1rem 1.25rem; }
  .metrics .m-v {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.15rem; color: var(--text);
  }
  .metrics .m-k {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-top: 0.3rem;
  }
  .note {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.7rem; color: var(--muted); line-height: 1.55;
    margin: 1.25rem 0 0; max-width: 78ch;
  }
  .note strong { color: var(--text); font-weight: 600; }
  .note a { color: var(--core); }

  /* --- instruments ---------------------------------------------------- */
  .instruments {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    border: 1px solid var(--line); border-bottom: 0; margin: 2.5rem 0 0;
  }
  .inst {
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  .inst:last-child { border-right: 0; }
  .inst .v {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; display: block; color: var(--core);
  }
  .inst .v small { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
  .inst .k {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); display: block; margin-top: 0.4rem;
  }

  /* --- sections ------------------------------------------------------- */
  section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
  h2 {
    font-family: Archivo, ui-sans-serif, sans-serif;
    font-weight: 700; font-size: var(--step-2); letter-spacing: -0.025em;
    text-wrap: balance; margin: 0 0 1rem;
  }
  h3 {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; margin: 0 0 0.6rem;
  }
  h3.spaced { margin-top: 2.75rem; }
  section p { max-width: var(--measure); color: var(--muted); margin: 0 0 1rem; }
  section p strong { color: var(--text); font-weight: 500; }
  code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.92em; }

  pre {
    background: var(--surface); border: 1px solid var(--line);
    padding: 1.25rem; overflow-x: auto;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.85rem; line-height: 1.7; margin: 1.5rem 0 0;
  }
  .c-key { color: var(--core); }
  .c-str { color: var(--good); }
  .c-com { color: #4A5568; }

  .tbl-scroll { overflow-x: auto; }
  table {
    width: 100%; border-collapse: collapse; margin-top: 1.5rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem;
  }
  th, td {
    text-align: left; padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
  }
  th {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
  }
  td:first-child { color: var(--muted); }
  td.ours { color: var(--core); }
  tr.hero-row td { color: var(--text); }
  tr.hero-row td.ours { color: var(--core); font-weight: 600; }
  .tag {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted);
  }

  .honest { border-left: 2px solid var(--flame); padding-left: 1.25rem; }
  .honest p:last-child { margin-bottom: 0; }

  .cols {
    display: grid; gap: 1.5rem 2rem; margin-top: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .cols p { margin: 0; font-size: 0.92rem; }

  .btn {
    display: inline-block;
    padding: 0.85rem 1.6rem; background: var(--core); color: #0A1400;
    font-family: Archivo, ui-sans-serif, sans-serif; font-weight: 700;
    font-size: 0.95rem; text-decoration: none; border: 1px solid var(--core);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .btn:hover, .btn:focus-visible {
    box-shadow: 0 0 28px rgba(168, 220, 0, 0.45); transform: translateY(-1px);
  }
  .btn-ghost {
    background: transparent; color: var(--core); border: 1px solid var(--line);
  }
  a { color: var(--core); }
  :focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }

  /* --- access form ---------------------------------------------------- */
  form.access {
    display: grid; gap: 1rem; max-width: 34rem; margin-top: 1.75rem;
  }
  form.access label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); display: block; margin-bottom: 0.4rem;
  }
  form.access input, form.access textarea, form.access select {
    width: 100%; background: var(--surface); color: var(--text);
    border: 1px solid var(--line); padding: 0.7rem 0.85rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem;
  }
  form.access textarea { resize: vertical; min-height: 5rem; }
  form.access input:focus, form.access textarea:focus, form.access select:focus {
    border-color: var(--core-dim); outline: none;
  }
  .field-row {
    display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  footer {
    border-top: 1px solid var(--line); padding: 2rem 0 3rem;
    color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.72rem; display: flex; flex-wrap: wrap;
    gap: 0.75rem 2rem; justify-content: space-between;
  }
  footer nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

/* --- cost comparison bars (home page) --------------------------------------
   A chart rather than a table: the front page is read by people who are not
   infrastructure engineers, and four numbers in a row of bars is understood in
   about a second. The table with all the conditions lives on /specs. */
.bars { display: grid; gap: 1.15rem; margin: 2rem 0 0.5rem; }
.bar-row { display: grid; grid-template-columns: minmax(8.5rem, 14rem) 1fr auto;
           gap: 1rem; align-items: center; }
.bar-lab { font-size: 0.94rem; color: var(--muted); line-height: 1.35; }
.bar-lab b { display: block; color: var(--text); font-weight: 600; }
.bar-track { background: var(--surface); border: 1px solid var(--line);
             border-radius: 3px; height: 2.6rem; position: relative; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px 0 0 2px; }
.bar-fill.them { background: linear-gradient(90deg, #2A3446, #39455C); }
.bar-fill.us   { background: linear-gradient(90deg, var(--core-dim), var(--core)); }
.bar-val { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600;
           font-size: 1.15rem; min-width: 4.5rem; text-align: right; }
.bar-val.us { color: var(--core); }
.bar-save { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem;
            color: var(--good); }
@media (max-width: 34rem) {
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-track { grid-column: 1 / -1; height: 2rem; }
}

/* three plain facts under the chart */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
         gap: 1.75rem; margin: 3.5rem 0 0; }
.facts h3 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.78rem;
            letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
            margin: 0 0 0.5rem; font-weight: 500; }
.facts p { margin: 0; font-size: 0.98rem; }