/* aigentsphere.ai — one stylesheet, no external requests, no fonts to fetch.
 *
 * Visual system: "AIgent Sphere v3" (design, 2026-07) + "Icon & Badge System v2".
 * The design's own markup sets everything inline and pulls JetBrains Mono from
 * Google Fonts. Neither survives here: the styles live in this one file so the
 * generated pages carry no inline style soup, and the mono face falls back to
 * the system stack — the same stack the badge SVGs use — because a third-party
 * font request on a site that sells machine-readability would be the wrong
 * kind of dependency.
 *
 * Selector names are unchanged from the previous stylesheet on purpose. The
 * pricing markup, the schema-generated order form and the engine's own
 * artifacts all target these classes, so the skin can change without a single
 * byte moving in the surfaces that carry facts.
 */

:root{
  /* v3 core */
  --bg:#07080a; --panel:#0a0c0f; --panel-2:#0d1117;
  --ac:#8fdce8; --ac-deep:#1e7a8d; --ac-soft:rgba(143,220,232,.13);
  --ink:#f4f5f7;
  --ink-2:rgba(244,245,247,.58);
  --ink-3:rgba(244,245,247,.5);
  /* The design sets its small type at .38–.4 alpha, which composites to 3.5:1
     on this background — under AA for normal text. The citations are the one
     thing on this site that must not be hard to read: a measured claim whose
     note reference is unreadable is an unmeasured claim. Raised to .58, which
     computes to 6.4:1. Size and tracking still carry the hierarchy. */
  --ink-4:rgba(244,245,247,.58);
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.1);
  --hair-3:rgba(255,255,255,.16);
  /* carried forward: the fact panel's own terminal palette, and the amber the
     copy fence uses to mark a passage as fixed wording */
  --green:#7ee787; --amber:#e3b341; --white:#f4f5f7;
  --dim:var(--ink-2); --faint:var(--ink-4); --line:var(--hair);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --pad:32px; --w:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
::selection{background:rgba(143,220,232,.28)}
@keyframes as-pulse{0%,100%{opacity:.35}50%{opacity:1}}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* Links: the design runs them at text colour and lets the accent do the work on
   hover. In running prose that loses the affordance, so body copy keeps a
   hairline underline and chrome does not. */
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ac)}
main p a,main li a,main dd a,main td a,.sub a,.tiny a{
  border-bottom:1px solid rgba(143,220,232,.35)}
main p a:hover,main li a:hover,main dd a:hover,main td a:hover,.sub a:hover,
.tiny a:hover{border-bottom-color:var(--ac)}
code{font-family:var(--mono);font-size:.85em;color:var(--ink-2);word-break:break-all}

/* ---------------------------------------------------------------- chrome --- */

header.top{position:sticky;top:0;z-index:50;
  background:rgba(7,8,10,.72);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--hair)}
header.top .wrap{min-height:56px;display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between}

/* The header lockup, per the icon spec: 20px small-cut mark + 14px wordmark,
   one word, no second tone, nothing added to the letters. */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);
  font-size:14px;font-weight:500;letter-spacing:-.01em;border:0}
.brand:hover{color:var(--ink)}
.brand .mark{width:20px;height:20px;display:block;flex:0 0 20px}
.brand .dot{display:none} /* the mark carries the node now */

nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
nav a{color:var(--ink-3);border:0;padding:8px 14px;font-size:13px;
  letter-spacing:-.005em}
nav a:hover{color:var(--ac)}
nav a.cta{margin-left:8px;padding:8px 16px;border:1px solid var(--hair-3);
  border-radius:99px;color:var(--ink);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
nav a.cta:hover{border-color:var(--ac);background:rgba(143,220,232,.08);color:var(--ac)}

/* ------------------------------------------------------------------ type --- */

h1{font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-.032em;
  font-weight:500;color:var(--ink);margin:0 0 20px;text-wrap:pretty}
h2{font-size:clamp(25px,3.1vw,40px);line-height:1.14;letter-spacing:-.026em;
  font-weight:500;color:var(--ink);margin:0 0 14px;text-wrap:pretty}
h3{font-size:17px;font-weight:500;color:var(--ink);margin:26px 0 6px;
  letter-spacing:-.01em}
p{margin:0 0 14px;max-width:38em}
.hero-lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;
  letter-spacing:-.01em;color:var(--ink-2);max-width:34em;margin:0}
.sub{color:var(--ink-2);max-width:36em;font-size:16.5px;line-height:1.55;
  letter-spacing:-.01em}
.tiny{font-size:13px;color:var(--ink-4);line-height:1.55;max-width:44em}
/* The author line, directly under a written page's h1. Mono and quiet: it is a
   provenance stamp, not a masthead, and it must not compete with the lede that
   follows it. */
.byline{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--ink-4);margin:-4px 0 18px}
em{color:var(--ink)}

/* The design separates every band with a hairline and a lot of air. */
section{padding:clamp(56px,8vh,104px) 0 0;border-top:1px solid var(--hair);
  margin-top:clamp(56px,8vh,104px)}
section:first-of-type,section.flush{border-top:0;margin-top:0;padding-top:0}
main>h1:first-child{margin-top:clamp(40px,7vh,88px)}
hr{border:0;border-top:1px solid var(--hair);margin:clamp(40px,6vh,72px) 0}
ul,ol{padding-left:22px;max-width:38em}
li{margin:6px 0}

/* The above-the-fold benefit line and the three prices beside it. One new type
   size, borrowed from the h2 scale and stopped short of it, because the strip
   has to read before the headline does on a phone and after it on a desktop. */
.lede-strip{font-size:clamp(19px,2.1vw,25px);line-height:1.35;letter-spacing:-.018em;
  color:var(--ink);max-width:26em;margin:0 0 8px;text-wrap:pretty}
.price-big{font-family:var(--mono);font-size:19px;letter-spacing:-.01em;color:var(--ac);
  margin:2px 0 6px}

/* mono micro-label — the design's section eyebrow */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 18px;max-width:none}
.eyebrow.ac{color:var(--ac)}
.chip{display:flex;align-items:flex-start;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,245,247,.55);margin:0 0 26px;max-width:none}
/* the dot tracks the FIRST line, not the centre of a wrapped block */
.chip i{width:6px;height:6px;border-radius:50%;background:var(--ac);
  animation:as-pulse 2.4s ease-in-out infinite;flex:0 0 6px;margin-top:5px}
@media (prefers-reduced-motion:reduce){.chip i{animation:none;opacity:1}}

/* --------------------------------------------------------------- the hero --- */
/* The design's hero is a generated image behind a scrim. ::before carries the
   image (self-hosted, 9 KB of WebP — smooth gradients compress to almost
   nothing), with a composed accent field underneath it so the band still reads
   if the image has not arrived. ::after is the design's own scrim, handing the
   bottom of the section back to the background colour so type stays legible
   over the brighter floor in the photograph. */
.hero{position:relative;overflow:hidden;border-top:0;margin-top:0;
  padding:clamp(56px,11vh,132px) 0 clamp(40px,7vh,84px);
  background:
    radial-gradient(circle at 22% 18%,var(--ac-soft),transparent 58%),
    radial-gradient(circle at 88% 8%,rgba(30,122,141,.16),transparent 54%)}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none}
.hero::before{inset:0;
  background:url("assets/img/hero.webp") right center/cover no-repeat;
  opacity:.85;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 62%,transparent 100%)}
/* Two scrims. The horizontal one keeps the headline on darkness while letting
   the sphere read on the right — without it the last word of the h1 sits on the
   lit edge of the photograph. The vertical one hands the bottom of the band back
   to the background colour. */
.hero::after{inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,10,.88) 0%,rgba(7,8,10,.62) 42%,
      rgba(7,8,10,.12) 72%,transparent 100%),
    linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.26) 30%,
      rgba(7,8,10,.78) 74%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:2}

/* --------------------------------------------------------------- figures --- */
/* Decorative photography. alt="" and aria-hidden keep it out of the accessibility
   tree — it carries no information a reader would otherwise miss. width/height
   are on the element so nothing reflows when it loads. */
figure.shot{margin:34px 0 8px;border:1px solid var(--hair-2);border-radius:16px;
  overflow:hidden;background:var(--panel);line-height:0}
figure.shot img{display:block;width:100%;height:auto}
/* Evidence figures are never reveal-gated and never lazy: an agent or a
   screenshot that does not scroll must not find a void where the proof is. */
figure.shot.evidence{opacity:1;transform:none;background:var(--panel)}
@media (max-width:600px){figure.shot{border-radius:14px}}

/* ---------------------------------------------------------------- buttons --- */

.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  letter-spacing:-.005em;padding:11px 20px;border:1px solid var(--hair-3);
  border-radius:99px;background:transparent;color:var(--ink);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.btn:hover{border-color:var(--ac);background:rgba(143,220,232,.08);color:var(--ac)}
.btn-pay,.btn.primary{border-color:rgba(143,220,232,.55);
  background:rgba(143,220,232,.1);color:var(--ac)}
.btn-pay:hover,.btn.primary:hover{background:rgba(143,220,232,.16);
  border-color:var(--ac)}
.btn.alt{color:var(--ink-3)}
/* the per-row call to action in the pricing ladder */
.btn.tiny-btn{padding:7px 14px;font-size:13px;white-space:nowrap}
td.act{text-align:right;white-space:nowrap;padding-left:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;border-color:var(--hair-2);
  background:transparent;color:var(--ink-4)}
.btn[disabled]:hover{border-color:var(--hair-2);background:transparent;
  color:var(--ink-4)}
button.btn{cursor:pointer;font-family:inherit}

/* ----------------------------------------------------------------- tables --- */

table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0 8px}
caption{text-align:left;color:var(--ink-4);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding-bottom:10px}
th,td{border-top:1px solid var(--hair);padding:13px 14px 13px 0;text-align:left;
  vertical-align:top;line-height:1.5}
th:last-child,td:last-child{padding-right:0}
thead th{color:var(--ink-4);font-weight:400;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;border-top:0;padding-bottom:10px}
tbody th{color:var(--ink);font-weight:500}
tbody tr:hover td,tbody tr:hover th{background:rgba(255,255,255,.018)}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.up{color:var(--ac);font-family:var(--mono)}
.flat{color:var(--ink-4);font-family:var(--mono)}
td.hash code{font-size:11px;color:var(--ink-4)}
.price{font-family:var(--mono);color:var(--ink);white-space:nowrap;font-size:14px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ----------------------------------------------------------------- panels --- */

.panel{background:var(--panel);border:1px solid var(--hair-2);border-radius:16px;
  padding:24px 26px;margin:24px 0}
.panel h3{margin-top:0}
.panel>p:last-child{margin-bottom:0}

/* Snippets — the robots.txt groups and the generated file. The mono scale and
   the panel already exist; a <pre> needs only its own margins reset and a
   scrollbar for the day a directive is wider than a phone. No new type, no new
   colour, nothing that reads as a second design. */
.panel pre{margin:0;overflow-x:auto;white-space:pre;font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.panel pre code{color:inherit;font-size:inherit;word-break:normal}

/* The validator's verdict marks. Two hues, both already in the system: the
   accent for a condition met, the copy fence's amber for one that is not.
   Deliberately not red — nothing here is an error, it is a checklist. */
.mark{font-family:var(--mono);font-size:11px;letter-spacing:.08em;white-space:nowrap}
.mark.ok{color:var(--ac)}
.mark.no{color:var(--amber)}
.mark.info{color:var(--ink-4)}
.fence{border-left:2px solid var(--amber);background:#0e0c07;
  border-radius:0 16px 16px 0}
.cite{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-4)}
.cite a{color:var(--ink-4)}
.kv{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-4)}

/* the design's hairline grid: 1px gaps over a lit background */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);margin:34px 0 8px}
.grid3>div{background:var(--bg);padding:30px 26px 30px 0}
.grid3>div:not(:first-child){padding-left:26px}
.grid2{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;margin:30px 0 8px}
@media (max-width:860px){
  .grid3{grid-template-columns:1fr;gap:1px}
  .grid3>div{padding:24px 0}
  .grid3>div:not(:first-child){padding-left:0}
  .grid2{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ forms --- */

fieldset.ff{border:1px solid var(--hair-2);border-radius:16px;padding:22px 24px;
  margin:26px 0;background:var(--panel)}
fieldset.ff legend{color:var(--ink);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:0 8px}
.ff-help{font-size:13px;color:var(--ink-4);margin:0 0 10px;max-width:44em}
.fld{margin:18px 0}
.fld label{display:block;font-size:15px;color:var(--ink);margin-bottom:6px;
  letter-spacing:-.005em}
.req{font-family:var(--mono);font-size:9px;color:var(--amber);letter-spacing:.1em;
  text-transform:uppercase;vertical-align:2px}
input,textarea{width:100%;background:#050608;color:var(--ink);
  border:1px solid var(--hair-2);border-radius:10px;padding:11px 13px;
  font-family:var(--sans);font-size:15px;transition:border-color .2s ease}
textarea{font-size:14.5px;line-height:1.55;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:rgba(143,220,232,.6)}
input::placeholder,textarea::placeholder{color:rgba(244,245,247,.45)}
.check{display:flex;gap:12px;align-items:flex-start;margin:20px 0}
/* The honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips a hidden field and fills a visible one. Nothing here is
   announced to a screen reader either: the wrapper carries aria-hidden. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check input{width:auto;margin-top:5px}

/* ----------------------------------------------------------------- footer --- */

footer.bottom{border-top:1px solid var(--hair);
  margin-top:clamp(64px,10vh,128px);padding:32px 0 72px;font-size:14px;
  color:var(--ink-4)}
.footcols{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;
  align-items:flex-start}
footer.bottom a{color:var(--ink-3)}
footer.bottom a:hover{color:var(--ac)}

/* The badge is the client-site artifact, so it carries its own geometry inline
   and inherits nothing from here. These rules only give it room to breathe and
   keep the Sapid credit a plain text link beside it — never inside the lockup. */
.badgerow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 12px}
.badgerow .credit{font-size:12px;color:var(--ink-4)}
a.badge{border:0}
a.badge:hover{color:inherit}

/* The design reveals each band on scroll. Default is VISIBLE: the hidden state
   is only ever applied by the script, and only when it has an observer to undo
   it with. A page that sells machine-readability cannot have copy that depends
   on JavaScript to exist. */
.reveal{opacity:1;transform:none}
html.js-reveal .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),
             transform .9s cubic-bezier(.2,.7,.2,1)}
html.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-reveal .reveal{opacity:1;transform:none;transition:none}
}

/* the generated fact block sits in the hero; keep its summary looking like a
   lede. Its own <style> owns everything inside it — deliberately untouched, so
   the measured artifact stays the measured artifact. */
#agent-facts{margin:0 0 6px}
#agent-facts summary{cursor:pointer}

/* The where-to-go table is the same portable artifact a client installs, so it
   ships with neutral styling for a light host page and centres itself in a
   narrow column. On our dark page that leaves its row labels at about 2.9:1 and
   floating off the grid. Restated here — colours and alignment only, nothing
   structural. Two ids out-specify the artifact's own rule without !important,
   so the file a client receives is not touched to make our page look right. */
#agent-index-section #agent-index{margin-left:0;max-width:none}
#agent-index-section #agent-index caption{color:var(--ink-4)}
#agent-index-section #agent-index th,
#agent-index-section #agent-index td{border-top-color:var(--hair)}
#agent-index-section #agent-index th{color:var(--ink-2)}
#agent-index-section #agent-index a:hover{color:var(--ac)}

@media (max-width:600px){
  :root{--pad:20px}
  body{font-size:16px}
  th,td{padding:11px 10px 11px 0}
  .panel{padding:20px;border-radius:14px}
  fieldset.ff{padding:18px 16px}
  /* With no JS menu the nav wraps to two rows, and a sticky two-row bar eats a
     quarter of a phone screen. Every link stays reachable; the bar just scrolls
     away instead of following you down the page. */
  header.top{position:static}
  header.top .wrap{padding-top:10px;padding-bottom:10px;gap:6px 12px}
  nav a{padding:6px 10px}
  nav a.cta{margin-left:0}
}