/* 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:1160px; /* THE MEASURE. WEAE layout pass, 2026-07-31: one cap, in ch, applied to every run of prose on the site. It was previously set per element in em — 38em here, 44em there, 36em somewhere else — which meant three different line lengths on one page and no way to change any of them at once. */ --measure:70ch; } *{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:transparent;border-bottom:1px solid transparent; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); transition:background .3s ease,border-color .3s ease} header.top.scrolled{background:rgba(7,8,10,.72); border-bottom-color: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)} /* The account link. Deliberately the quietest thing in the header, sitting immediately left of the CTA — the quiet way in beside the loud way in. Sentence case, no chrome. The label becomes "Dashboard" client-side when the tab holds a live session. */ nav a.signin{color:var(--ink-4);font-size:13px;letter-spacing:-.005em} nav a.signin:hover{color:var(--ac)} /* THE ONE CALL TO ACTION IN THE CHROME. Everything else in the nav is a text link; the CTA carries the accent as a fill, not an outline, for the same reason .btn.solid exists: read cold, a ghost button is not a call to anything. */ nav a.cta{margin-left:8px;padding:8px 18px;border:1px solid var(--ac); border-radius:99px;background:var(--ac);color:#07080a;font-weight:500; transition:background .16s ease,transform .16s ease} nav a.cta:hover{background:#a9e5ef;border-color:#a9e5ef;color:#07080a; transform:translateY(-1px)} /* ------------------------------------------------------------------ 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 at 22px, not 17px. The WEAE layout pass (A1-A4, 2026-07-31) found the old size sitting between body copy and an h2 without belonging to either, so a subhead read as an emphasised paragraph. Rule from that pass: a subhead is either >=22px or it is an .eyebrow. There is no third size. */ h3{font-size:22px;font-weight:500;color:var(--ink);margin:34px 0 8px; letter-spacing:-.016em;line-height:1.25} p{margin:0 0 14px;max-width:var(--measure)} .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:var(--measure);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:var(--measure)} /* 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. * * WEAE layout pass, 2026-07-31: 120px MINIMUM top and bottom, not 56px top and * nothing at the bottom. The old rule gave a section air above it and let the * next one crowd it from below, so two claims shared a viewport and the reader * read neither. One claim per viewport is the rule; this is the mechanism. */ section{padding:clamp(120px,12vh,168px) 0;border-top:1px solid var(--hair); margin-top:0} 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)} /* Written pages open with a breadcrumb eyebrow, so :first-child above never fires there and the h1 pressed against the chrome (operator note, 2026-08-01). The crumb gets the top band; the golden step down to the h1 keeps the rhythm. Article headings also run one step smaller than the marketing pages: a 2,600-word document is a reading surface, not a billboard. */ main.wrap>.eyebrow:first-child{margin-top:clamp(56px,9vh,110px)} main.wrap>.eyebrow:first-child+h1{font-size:clamp(28px,3.8vw,42px); margin-bottom:16px} main.wrap>.eyebrow:first-child~section h2, main.wrap>h1~h2{font-size:clamp(21px,2.4vw,29px)} hr{border:0;border-top:1px solid var(--hair);margin:clamp(40px,6vh,72px) 0} ul,ol{padding-left:22px;max-width:var(--measure)} li{margin:6px 0} li,dd{max-width:var(--measure)} /* 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 spacing runs on the golden section: the top band is phi times the bottom one (17vh against 10.5vh, 212px against 131px at the clamps), so the headline hangs a third of the way down the viewport instead of pressing against the chrome. The 2026-08-01 pass doubled the old top clamp for exactly the complaint you'd expect: the page opened with the chip jammed under the sticky bar and a wall of text before the first scroll. */ .hero{position:relative;overflow:hidden;border-top:0;margin-top:0; padding:clamp(112px,17vh,212px) 0 clamp(70px,10.5vh,131px); 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%)} /* Restated at section.hero specificity because the hero IS a section.flush, and the flush rule's padding-top:0 out-specifies the shorthand above — which is exactly how the first ship of this redesign went live with the chip still pressed against the chrome. The selector must tie .flush and sit later in the file, or the top band silently vanishes again. */ section.hero{padding-top:clamp(112px,17vh,212px)} .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,.8) 0%,rgba(7,8,10,.4) 32%, rgba(7,8,10,.4) 68%,rgba(7,8,10,.8) 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%)} /* Centered, because the hero is a statement before it is a document. The horizontal scrim above is symmetric for the same reason — the old one assumed left-set type and left the right half of a centered headline on the lit edge of the photograph. Body sections stay left-set; only the hero speaks from the middle. */ .hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column; align-items:center;text-align:center} .hero .chip{justify-content:center;margin-bottom:clamp(28px,4vh,44px)} .hero h1{margin-bottom:clamp(24px,3.2vh,36px)} .hero .btnrow{justify-content:center;margin-top:clamp(28px,4.4vh,46px)} /* --------------------------------------------------------------- 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 */ /* THE ONE ACTION ON A PAGE THAT IS THE THING TO DO. .btn.primary is an accent OUTLINE that fills on hover, which is right for a page offering three or four equal choices. It is wrong for a page with one obvious next step: read cold, it is a ghost button. .solid carries the fill as its DEFAULT state with dark text on it, and hover only lifts it. */ .btn.solid{background:var(--ac);border-color:var(--ac);color:#07080a; font-weight:500;transition:background .16s ease,transform .16s ease} .btn.solid:hover{background:#a9e5ef;border-color:#a9e5ef;color:#07080a; transform:translateY(-1px)} .btn.solid[disabled],.btn.solid[disabled]:hover{background:rgba(143,220,232,.4); border-color:transparent;color:#07080a;transform:none} @media (prefers-reduced-motion:reduce){ .btn.solid,.btn.solid:hover{transition:none;transform:none} } .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 
 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);max-width:var(--measure)}
.cite a{color:var(--ink-4)}
.kv{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-4)}

/* ------------------------------------------------------- evidence zones --- */
/* THE MONOSPACE QUARANTINE. WEAE layout pass, 2026-07-31.
 *
 * The terminal look — mono type, `//` prefixes, the green-on-near-black
 * palette — is the visual signature of a MEASUREMENT, and it stopped meaning
 * that when it leaked into headings, buttons and marketing copy. It is now
 * confined to .evidence and to the four places that genuinely are readouts:
 * the fact panel, the agent index, the citation line and the section eyebrow.
 * Nothing else on a public page gets it, and nothing new should.
 *
 * The rule for anyone adding to this file: if a reader could not, in
 * principle, go and check the thing being shown, it is not evidence and it
 * does not get mono. */
.evidence{margin:40px 0 8px}
.evidence>.evidence-head{font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--ink-4);margin:0 0 10px;max-width:none}
.evidence>.evidence-head::before{content:"// "}

/* ------------------------------------------------------ stats as images --- */
/* The layout pass replaced decorative screenshots with the numbers themselves.
 * There is no illustration on this site that is not a measurement. */

/* The 30 -> 78 comparison, full bleed inside the wrap. Two bars, to scale,
   labelled with the arms they came from. Built in markup rather than as an
   image so it reflows, reads in a text extractor, and cannot fall out of step
   with the table beside it. */
.statbars{margin:44px 0 10px;display:grid;gap:18px}
.statbars .bar{display:grid;grid-template-columns:minmax(150px,26%) 1fr auto;
  gap:16px;align-items:center}
.statbars .bar .lbl{font-size:14px;color:var(--ink-2);line-height:1.35}
/* display:block on both, and it is not decoration: a  is inline, and
   width and height do not apply to an inline box. The first build of this
   graphic rendered two empty tracks with a hairline at the left edge, which is
   a chart that shows nothing while looking like a chart — the exact failure
   mode this site sells against. */
.statbars .bar .track{display:block;height:44px;background:var(--panel-2);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.statbars .bar .fill{display:block;height:100%;background:linear-gradient(90deg,
  rgba(143,220,232,.22),rgba(143,220,232,.55));border-right:2px solid var(--ac)}
.statbars .bar.control .fill{background:rgba(255,255,255,.07);
  border-right:2px solid var(--hair-3)}
.statbars .bar .val{font-family:var(--mono);font-size:clamp(28px,4.4vw,46px);
  letter-spacing:-.03em;color:var(--ac);min-width:3.2em;text-align:right}
.statbars .bar.control .val{color:var(--ink-4)}
@media (max-width:700px){
  .statbars .bar{grid-template-columns:1fr auto;gap:8px 14px}
  .statbars .bar .track{grid-column:1/-1;height:32px}
}

/* The three numerals that carry the programme: crawl depth, sites, notes. */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);margin:44px 0 10px}
.statrow>div{background:var(--bg);padding:34px 26px 34px 0}
.statrow>div:not(:first-child){padding-left:26px}
.statrow .n{font-size:clamp(46px,7vw,84px);line-height:.95;letter-spacing:-.045em;
  color:var(--ink);font-weight:500;margin:0 0 10px;max-width:none}
.statrow .n span{font-size:.42em;letter-spacing:-.01em;color:var(--ink-4);
  margin-left:.25em;vertical-align:.3em}
.statrow p{font-size:14px;color:var(--ink-2);line-height:1.45;margin:0;
  max-width:26ch}
@media (max-width:860px){
  .statrow{grid-template-columns:1fr}
  .statrow>div{padding:26px 0}
  .statrow>div:not(:first-child){padding-left:0}
}

/* One profile -> eight surfaces. The hub is the argument: the reason no two
   surfaces can contradict each other is that there is only one of them. */
.hub{display:grid;grid-template-columns:minmax(200px,30%) 1fr;gap:clamp(24px,4vw,56px);
  align-items:center;margin:44px 0 10px}
.hub .core{border:1px solid rgba(143,220,232,.4);border-radius:16px;
  background:var(--ac-soft);padding:26px 22px;text-align:center}
.hub .core b{display:block;font-size:20px;font-weight:500;color:var(--ink);
  letter-spacing:-.02em}
.hub .core span{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-top:8px}
.hub .spokes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hair)}
.hub .spokes div{background:var(--bg);padding:13px 16px;font-size:13.5px;
  color:var(--ink-2);line-height:1.35}
@media (max-width:760px){
  .hub{grid-template-columns:1fr}
  .hub .spokes{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- cards --- */
/* The 2026-08-01 pass. Three things that were hairline grids or numbered
   lists became cards: the prices, the five steps, and the free resources.
   The hairline grid reads as one continuous surface — right for statistics,
   wrong for things a reader chooses between. A card is a choice. */

.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:44px 0 10px}
.pricecard{background:var(--panel);border:1px solid var(--hair-2);
  border-radius:18px;padding:30px 28px 26px;display:flex;flex-direction:column;
  transition:transform .2s ease,border-color .2s ease}
.pricecard:hover{transform:translateY(-3px);border-color:var(--hair-3)}
.pricecard .eyebrow{margin-bottom:12px}
.pricecard .price-big{font-size:clamp(24px,2.6vw,32px);margin:0 0 10px}
.pricecard .tiny{margin:0}
/* the middle tier carries the accent — one emphasised choice, not three */
.pricecard.featured{border-color:rgba(143,220,232,.5);
  background:linear-gradient(180deg,rgba(143,220,232,.09),var(--panel) 70%)}
.pricecard.featured:hover{border-color:var(--ac)}

.stepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:16px;margin:44px 0 10px;padding:0;list-style:none;max-width:none}
.stepcard{background:var(--panel);border:1px solid var(--hair-2);
  border-radius:16px;padding:24px 22px;margin:0}
.stepcard .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--ac);display:block;margin:0 0 14px}
.stepcard b{display:block;font-size:15.5px;font-weight:500;
  letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.stepcard p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0}

.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:44px 0 10px}
a.rescard{display:block;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:18px;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease}
a.rescard:hover{transform:translateY(-3px);border-color:var(--hair-3);
  color:inherit}
/* The art band. Inline SVG, palette-only, aria-hidden: decorative by the
   site's own rule, so it must never carry a number or a claim. Swappable for
   generated imagery card by card without touching the body markup. */
.rescard .cardart{margin:0;height:118px;background:var(--panel-2);
  border-bottom:1px solid var(--hair);line-height:0;overflow:hidden}
.rescard .cardart svg{width:100%;height:100%;display:block}
.rescard .cardart img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.92}
a.rescard:hover .cardart img{opacity:1}
.rescard .cardbody{padding:20px 22px 24px}
.rescard h3{margin:0 0 8px;font-size:17px}
.rescard .tiny{margin:0}
a.rescard:hover h3{color:var(--ac)}
@media (max-width:860px){
  .pricegrid,.cardgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pricecard,.pricecard:hover,a.rescard,a.rescard:hover{transition:none;
    transform:none}
}

/* 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