/* apiant.ai shared layer: brand tokens and the ONE button.
   Linked from the <head> of every page, before that page's own <style>.
   api/_render.js emits the same link for the catalog pages.

   Why this file exists: the primary CTA was defined five times — in
   index.html, pricing.html, api/_render.js, site.js and (as .btn.light)
   again in index.html — and the five copies had drifted to four different
   corner radii (8 / 11 / 13 / 999), two fills and three heights. Same
   label, same destination, four appearances. Anything that draws a button
   takes it from here; nothing redefines .btn in a page style block. */

:root{
  /* ---- ground ---- */
  --bg:#0a0a0a; --bg-2:#111210;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);

  /* ---- the text ramp, brightest to quietest ----
     Five roles, not four. index.html and the catalog template had both been
     spelling --dim, for OPPOSITE jobs: eyebrows and fine print on the home
     page (#6a6f6c) against lede and intro copy on the catalog (#c7c4be).
     Picking one value would have made home-page eyebrows near-white or
     catalog ledes near-invisible, so the quiet one gets its own name.
     Contrast on #0a0a0a: ink 18.6, dim 11.4, muted 6.1, label 3.9, faint 3.0.
     AA wants 4.5 for body text, so --label and --faint are for small caps,
     furniture and counters only. Body copy stops at --muted. */
  --ink:#f7f8f8;      /* primary text */
  --dim:#c7c4be;      /* secondary body: lede, intro */
  --muted:#8b908d;    /* tertiary: descriptions, captions, fine print */
  --label:#6a6f6c;    /* eyebrows, small caps, numeric keys */
  --faint:#5f5c56;    /* furniture: separators, counters */

  /* ---- brand ----
     Sampled from APIANT-AI.png and cross-checked against the V4 SVG fills.
     The logo's own letterform grey is #e6e7e8; whether --ink should move to
     it is an open question in knowledge/brand-identity.md. Do not change one
     without the other. */
  --v1:#f8a434; --v2:#facd61; --v3:#d96c27;
  --grad:linear-gradient(160deg,#facd61 0%,#f8a434 47%,#d96c27 100%);
  --on-accent:#2a1503;

  /* ---- type ---- */
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* ---- the rail ----
     One measure. The menu was 1200/24 while every other surface was 1120/20
     or 1120/24, so the wordmark sat 40px left of every heading under it. */
  --w:1120px; --gut:20px;
}

/* The one rail. Anything full-width on the site uses this. */
.rail{width:min(92vw,var(--w));margin-inline:auto;padding-inline:var(--gut)}

/* ---- the button ----------------------------------------------------- */
/* One shape: the amber pill. Ghost is the only secondary. There is no
   white variant — a white button next to an amber one reads as a second,
   different offer, which is exactly the bug this file closes. */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:48px; padding:0 22px; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:15px; line-height:1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  background:var(--grad); color:var(--on-accent);
  box-shadow:0 10px 30px -12px rgba(248,164,52,.55);
  transition:filter .15s, border-color .15s, color .15s, background .15s;
}
.btn:hover{filter:brightness(1.06)}
.btn:focus-visible{outline:2px solid var(--v2); outline-offset:2px}

/* Secondary. Never carries the page's main action. */
.btn.ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line-2); box-shadow:none;
}
.btn.ghost:hover{filter:none; border-color:rgba(255,255,255,.35)}

/* Menu size, same shape. NOT named .sm — site.js already owns that class
   for the sticky header element, and it would flatten the button. */
.btn.compact{height:44px; padding:0 18px; font-size:14px}

/* "Free" as a tag inside the button, not a sentence fragment after it.
   Used by the catalog pages; the label stays what tests and copy rules read. */
.btn .free{
  margin-left:.45em; padding:5px 11px; border-radius:999px;
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; line-height:1;
  background:rgba(42,21,3,.18); color:var(--on-accent);
  border:1px solid rgba(42,21,3,.22);
}

/* Full-width stacking on phones, for every surface that uses .btn. */
@media (max-width:560px){
  .btn{width:100%}
  .btn.compact{width:auto}
}

/* ---- the menu's Start free ------------------------------------------ */
/* site.js draws it with class="btn compact sm-start"; this only pins the bits
   the flex header needs. The fill, radius and weight come from .btn above,
   which is the whole point: the header button and the hero button are now
   the same button at two sizes. */
.sm-start{flex:none}

/* ---- the app tile ------------------------------------------------------- */
/* Drawn by the catalog template (api/_render.js) on several hundred pages and
   by the home page's app band. One definition. The white background behind
   the <img> is deliberate: most vendor logos assume it. It also means a logo
   with WHITE ink vanishes - Anthropic's does - which is a catalog bug to fix
   at the logo endpoint, not by darkening the tile (that breaks the four
   black-ink logos instead). */
.tile{position:relative;display:inline-block;flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;
background:hsl(var(--h,30) 28% 15%);border:1px solid hsl(var(--h,30) 40% 32%)}
.tile::before{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:26px;color:rgba(247,248,248,.92);letter-spacing:-.02em}
.tile img{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.tile.lg{width:96px;height:96px;border-radius:24px}.tile.lg::before{font-size:38px}
.tile.sm{width:44px;height:44px;border-radius:12px}.tile.sm::before{font-size:17px}
.tile.xs{width:22px;height:22px;border-radius:6px;vertical-align:middle}.tile.xs::before{font-size:9px}

/* ---- the ask card and its two doors ------------------------------------ */
/* Drawn by the catalog template (/apps, every app and pair page) and by the
   home page hero. One definition. Left door: the assistant, a plain top-level
   POST to app.apiant.ai/chat/start. Right door: the agent route, recessed and
   cool. The card IS the warm frame, so the assistant door is unframed inside
   it; a bordered card inside a bordered card draws the same box twice. */
.ask-card{border:1px solid color-mix(in oklab,var(--v1) 34%,transparent);background:linear-gradient(180deg,rgba(248,164,52,.07),rgba(248,164,52,.015));border-radius:18px;padding:28px 26px}
.ask-card h2{margin-bottom:8px}
.ask-card p:not(.kicker){color:var(--dim);max-width:44em;font-size:16px;line-height:1.6}
.ask-card .kicker{color:var(--label)}
/* The two doors: the catalog cut of the pair on the front page
   (index.html .door.lead / .door.cli). Scaled down, and unframed on the
   primary side - the ask-card IS the warm frame, so a bordered card inside
   it would draw the same box twice. The agent door is a recessed cool panel
   instead: same hierarchy, no nesting.
   Every name carries the ask- prefix. .door, .doors, .dgrid, .lead, .k and
   .fine all belong to index.html's page style block; a bare copy here would
   be a second definition of a shared element in a second file, which is the
   bug /site.css exists to close. Same reasoning as .door-mark vs
   pricing.html's .mark. */
.ask-doors{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
.ask-door{display:flex;flex-direction:column;min-width:0}
.ask-door.ask-cli{border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.42);padding:18px}
.ask-card p.ask-lab{display:flex;align-items:flex-start;gap:9px;line-height:1.5;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--v1);margin-bottom:12px;max-width:none}
.ask-card .ask-cli p.ask-lab{color:var(--label)}
.ask-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;border:1px solid rgba(248,164,52,.32);background:rgba(248,164,52,.1);color:var(--v1)}
.ask-mark svg{display:block;width:14px;height:14px}
.ask-cli .ask-mark{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--dim)}
.ask-cli .ask-mark svg{width:13px;height:13px}
.ask-form{display:flex;flex-direction:column;gap:12px}
/* 16px, not 15: iOS Safari zooms the page on focus below 16px. */
.ask-box{width:100%;min-height:96px;resize:vertical;padding:12px 13px;border-radius:13px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;outline:none}
.ask-box:focus{border-color:color-mix(in oklab,var(--v1) 60%,transparent)}
.ask-box::placeholder{color:#7d817f}
/* .ask-card p:not(.kicker) is (0,2,1); p.ask-fine matches it and
   wins on order. Do not drop the element from that selector. */
.ask-card p.ask-fine{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:none}
.ask-card .ask-cli p.ask-fine{margin-top:0}
.ask-doors .btn{align-self:stretch}
.ask-cli .btn{margin-top:16px}
.ask-alt{display:flex;flex-wrap:wrap;gap:10px}
.ask-alt .btn{align-self:auto}
/* One new breakpoint. The file's only other is max-width:640, a phone rule;
   this is where the card is wide enough for two real columns. */
@media (min-width:860px){
.ask-doors{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
/* A stretched pill under a 534px textarea reads as a banner, not a button.
   Both doors go to natural width together so the secondary never looks
   larger than the primary. */
.ask-doors .btn{align-self:flex-start;width:auto;min-width:190px}
.ask-cli .btn{margin-top:auto}
}

/* ---- Google reviews ------------------------------------------------------ */
/* Drawn by the home page and by the catalog template (/connections, /connect).
The section ships hidden and its page script reveals it only once the widget
has actually drawn something: a third-party embed can be over its quota,
switched off, or blocked by the visitor, and an empty "What our customers say"
heading is worse than no section at all. */
.revs[hidden]{display:none}
.revs .ops-head{margin-bottom:18px}
.revs .revs-head{margin-bottom:18px}

/* Phone. Three nested boxes each kept their desktop padding - the page rail,
the card, then the agent door - so on a 391px screen the composer was left
279px and the placeholder wrapped to four lines inside a box sized for two.
The last line was cut in half and Chrome drew its own light scrollbar and
resize grip on top of the dark card. Trimming the two inner paddings and
raising the floor clears the longest placeholder the template writes, down
to a 320px screen. resize:none is phone-only: the grip is a light native
widget on a dark card, and there is no pointer to drag it with. */
@media (max-width:560px){
.ask-card{padding:20px 16px;border-radius:16px}
.ask-door.ask-cli{padding:16px 14px}
.ask-box{min-height:150px;resize:none}
}
