@charset "UTF-8";
/* ========================================================================
   Superchat Atelier
   An authored editorial / industrial layer over the functional base system.
   The visual grammar comes from field manuals, instrument plates and marked
   proofs: rules, registration ticks, numbered modules and deliberately open
   surfaces. Brand colour is an annotation, not a default fill.
   ======================================================================== */

/* -- 01. Material and page identities ---------------------------------- */
:root {
  --paper: #f4f0e7;
  --paper-2: #eae4d8;
  --haze: #ebe8f1;
  --ink: #090a0d;
  --ink-soft: #101218;
  --ink-lift: #171920;
  --rule: rgba(9, 10, 13, .18);
  --rule-2: rgba(9, 10, 13, .08);
  --surface: rgba(9, 10, 13, .035);
  --page-accent: var(--violet);
  --page-accent-2: var(--ember);
  --atelier-shadow: 8px 8px 0 rgba(9, 10, 13, .09);
  --wrap: min(94vw, 1380px);
  --sec: clamp(3.75rem, 7vh, 6rem);
}

body[data-page="genie"] { --page-accent: #818cff; --page-accent-2: #b993ff; }
body[data-page="swayam"] { --page-accent: #f2621f; --page-accent-2: #d24088; }
body[data-page="technology"] { --page-accent: #4956ce; --page-accent-2: #7a2bf5; }
body[data-page="company"] { --page-accent: #c6379b; --page-accent-2: #f2621f; }
body[data-page="api"] { --page-accent: #9b72e8; --page-accent-2: #f08f78; }
body[data-page="contact"] { --page-accent: #f2621f; --page-accent-2: #c6379b; }
body[data-page="client"] { --page-accent: #232873; --page-accent-2: #c6379b; }

body {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, rgba(9, 10, 13, .012) 0 1px, transparent 1px 5px);
}

[data-tone="light"] {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, rgba(9, 10, 13, .012) 0 1px, transparent 1px 5px);
}
[data-tone="paper2"] { background: var(--paper-2); }
[data-tone="haze"] { background: #ebe8f1; }
[data-tone="lilac"] { background: #eee9f5; }
[data-tone="mint"] { background: #e6efe9; }
[data-tone="peach"] { background: #f4e9df; }
[data-tone="sky"] { background: #e7edf0; }
[data-tone="dark"] {
  --rule: rgba(255, 255, 255, .19);
  --rule-2: rgba(255, 255, 255, .08);
  --surface: rgba(255, 255, 255, .045);
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, transparent 0 11.9%, rgba(255, 255, 255, .035) 12%, transparent 12.1%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 6px);
}

/* -- 02. Editorial type and registration marks ------------------------- */
.eyebrow,
.figref,
.heroengine__kicker,
.heroengine__link,
.badge,
.chip,
.foot__h {
  font-family: var(--mono);
}

.hero__eyebrow,
.act__eyebrow,
.prod__eyebrow {
  display: grid;
  grid-template-columns: max-content minmax(3rem, 8rem);
  align-items: center;
  gap: .9rem;
}
.hero__eyebrow::after,
.act__eyebrow::after,
.prod__eyebrow::after {
  content: "";
  height: 1px;
  background: currentColor;
  opacity: .42;
}

/* Hero covers should open directly on the proposition. Page identity already
   lives in the navigation and the lower-right registration note. */
.hero .hero__eyebrow { display: none; }

.display,
.h1,
.h2 { font-weight: 660; }

.sec:not(.hero):not(.stand):not(.moment):not(.plate) > .wrap::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: var(--gut);
  width: 18px;
  height: 6px;
  border-top: 1px solid var(--fg-dim);
  border-left: 1px solid var(--fg-dim);
  opacity: .48;
  pointer-events: none;
}

/* -- 03. Navigation ----------------------------------------------------- */
.nav { height: 58px; }
.nav--stuck {
  background: rgba(9, 10, 13, .96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.nav--onlight.nav--stuck { background: rgba(244, 240, 231, .97); }
.nav__word { font-family: var(--mono); font-size: .84rem; letter-spacing: -.025em; }
.nav__list a,
.nav__login,
.nav__cta { font-family: var(--mono); font-size: .71rem; letter-spacing: .025em; }
.nav__list a[aria-current="page"]::after,
.nav__login[aria-current="page"]::after { height: 3px; background: var(--page-accent); }
.nav__cta {
  border-radius: 2px;
  padding: .52rem .78rem;
  box-shadow: 3px 3px 0 color-mix(in srgb, currentColor 20%, transparent);
}
.nav__cta::after { content: " →"; }
.sheet { background: #090a0d; }

/* -- 04. Actions -------------------------------------------------------- */
.btn {
  min-height: 3rem;
  padding: .82rem 1.15rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .055em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn::after { content: "→"; margin-left: .3rem; transition: transform .25s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn--grad {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 5px 5px 0 var(--page-accent);
}
[data-tone="light"] .btn--grad,
[data-tone="paper2"] .btn--grad,
[data-tone="haze"] .btn--grad,
[data-tone="lilac"] .btn--grad,
[data-tone="mint"] .btn--grad,
[data-tone="peach"] .btn--grad,
[data-tone="sky"] .btn--grad {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--grad:hover { box-shadow: 8px 8px 0 var(--page-accent); }
.btn--ghost { background: transparent; }
.arrowlink { font-family: var(--mono); font-size: .78rem; letter-spacing: .025em; text-transform: uppercase; }

/* -- 05. Hero as a marked cover sheet ---------------------------------- */
.hero {
  min-height: min(100svh, 56rem);
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, .04) 8.08%, transparent 8.16%),
    linear-gradient(0deg, transparent 0 12%, rgba(255, 255, 255, .035) 12.08%, transparent 12.16%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 74px 22px 22px;
  z-index: 1;
  border: solid rgba(255, 255, 255, .13);
  border-width: 1px 0 0 1px;
  pointer-events: none;
}
.hero::after {
  content: "SUPERCHAT / LOCAL INTELLIGENCE";
  position: absolute;
  z-index: 3;
  right: max(2rem, var(--gut));
  bottom: 1.6rem;
  color: rgba(255, 255, 255, .38);
  font: .61rem/1 var(--mono);
  letter-spacing: .15em;
}
body[data-page="home"] .hero::after { content: "ARCHITECTURE / 00—03"; }
body[data-page="technology"] .hero::after { content: "TECHNICAL NOTE / CPU-FIRST"; }
body[data-page="genie"] .hero::after { content: "ENGINE / 01 — ENTERPRISE"; }
body[data-page="swayam"] .hero::after { content: "ENGINE / 03 — PHYSICAL"; }
body[data-page="company"] .hero::after { content: "COMPANY RECORD / 2026"; }
body[data-page="api"] .hero::after { content: "DEVELOPER SURFACE / METERED"; }
.hero__glow {
  width: 46vw;
  height: 130%;
  aspect-ratio: auto;
  left: auto;
  right: -8vw;
  top: -15%;
  translate: 0;
  background:
    linear-gradient(132deg, transparent 0 39%, color-mix(in srgb, var(--page-accent) 23%, transparent) 39.2% 39.8%, transparent 40% 51%, color-mix(in srgb, var(--page-accent-2) 16%, transparent) 51.2% 51.7%, transparent 52%);
  animation: atelier-signal 18s ease-in-out infinite;
}
@keyframes atelier-signal {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .84; }
  50% { transform: translate3d(-2.4vw, 1.5vh, 0); opacity: 1; }
}
.hero .wrap { max-width: min(92vw, 1280px); }
.hero__h { letter-spacing: -.055em; }
body[data-page="genie"] .hero__h,
body[data-page="swayam"] .hero__h { font-size: clamp(3.6rem, 16vw, 7.4rem); }
.hero__sub { border-left: 2px solid var(--page-accent); padding-left: 1rem; }

.heroengine {
  gap: .55rem;
  padding: 1.5rem 1.35rem 1.4rem;
  border: solid rgba(255, 255, 255, .23);
  border-width: 1px 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .018);
  box-shadow: none;
}
.heroengine + .heroengine { border-top: 0; }
.heroengine::before { width: 2px; }
.heroengine:hover {
  transform: translateX(6px);
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
}
.heroengine__kicker::before { color: rgba(255, 255, 255, .34); }
.heroengine:nth-child(1) .heroengine__kicker::before { content: "01 / "; }
.heroengine:nth-child(2) .heroengine__kicker::before { content: "03 / "; }
.heroengine__link { color: #fff; }
.scrollcue { font-family: var(--mono); }

/* -- 06. Open modules instead of generic cards ------------------------- */
.card,
.person,
.door,
.work__item.is-boxed,
.price,
.benchboard,
.lab__item,
.maps__apis article,
.ratecard,
.form,
.moment__in,
.plate img,
.moment__img img { box-shadow: none; }

.cards,
.proof,
.people {
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cards { counter-reset: atelier-card; }
.card {
  counter-increment: atelier-card;
  position: relative;
  min-height: 15rem;
  padding: 3.2rem clamp(1.35rem, 2.4vw, 2.2rem) 1.8rem;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.card::before {
  content: "MODULE / " counter(atelier-card, decimal-leading-zero);
  position: absolute;
  top: 1.2rem;
  left: clamp(1.35rem, 2.4vw, 2.2rem);
  color: var(--fg-dim);
  font: .61rem/1 var(--mono);
  letter-spacing: .12em;
}
.card:hover {
  transform: none;
  padding-left: calc(clamp(1.35rem, 2.4vw, 2.2rem) + .45rem);
  border-color: var(--rule);
  background: color-mix(in srgb, var(--page-accent) 7%, transparent);
  box-shadow: none;
}
[data-tone="dark"] .card,
[data-tone="dark"] .card:hover { background-color: transparent; }
[data-tone="dark"] .card:hover { background-color: rgba(255, 255, 255, .045); }

.proof { counter-reset: atelier-proof; }
.proof__i {
  counter-increment: atelier-proof;
  position: relative;
  min-height: 10.5rem;
  padding: 3.4rem 1.4rem 1.5rem;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.proof__i::before {
  content: "0" counter(atelier-proof);
  position: absolute;
  top: 1.15rem;
  left: 1.4rem;
  color: var(--page-accent);
  font: .68rem/1 var(--mono);
}

.people { counter-reset: atelier-person; }
.person {
  counter-increment: atelier-person;
  position: relative;
  padding: 3.2rem clamp(1.4rem, 2.6vw, 2.3rem) 1.8rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.person::before {
  content: "OPERATOR / " counter(atelier-person, decimal-leading-zero);
  position: absolute;
  top: 1.2rem;
  color: var(--fg-dim);
  font: .61rem/1 var(--mono);
  letter-spacing: .1em;
}
.person:hover { transform: none; box-shadow: inset 4px 0 0 var(--page-accent); }

.doors { border: 1px solid var(--rule); }
.door { min-height: 18rem; padding-top: 3rem; box-shadow: none; }
.door__n { font-family: var(--mono); }

/* -- 07. Product plates ------------------------------------------------- */
main { counter-reset: atelier-product atelier-moment; }
.prod {
  counter-increment: atelier-product;
  position: relative;
  border-top: 1px solid var(--rule);
}
.prod::before {
  content: "PRODUCT PLATE / " counter(atelier-product, decimal-leading-zero);
  position: absolute;
  z-index: 3;
  top: 1.1rem;
  left: var(--gut);
  color: var(--fg-dim);
  font: .6rem/1 var(--mono);
  letter-spacing: .12em;
}
.prod__art {
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 10px 10px 0 rgba(35, 40, 115, .11);
}
.prod__art::before,
.prod__art::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.prod__art::before { top: 10px; left: 10px; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.prod__art::after { right: 10px; bottom: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }

/* The rounded specification ledger is intentional and retained. */
.prod__specs {
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(35, 40, 115, .018) 0 1px, transparent 1px 5px),
    rgba(255, 255, 255, .72);
  box-shadow: 0 5px 0 rgba(35, 40, 115, .08), 0 15px 34px rgba(35, 40, 115, .08);
}
.prod__specs div { font-family: var(--mono); font-size: clamp(.75rem, .85vw, .86rem); }
.prod__specs span:last-child { font-family: var(--sans); }

/* -- 08. Instruments, code and research -------------------------------- */
.benchboard,
.unplug__demo,
.code,
.mapdemo,
.mapagent,
.ratecard {
  border-radius: 2px;
}
.benchboard,
.unplug__demo {
  box-shadow: 9px 9px 0 rgba(9, 10, 13, .16);
}
.benchrow__results li,
.benchrow__score,
.benchrow__score.is-verified,
.benchhardware article,
.benchpending a { border-radius: 2px; }
/* .lab__state stays the pill superchat.css makes it. Squaring it off put a
   hard-cornered rectangle inside a soft-cornered card, which reads as a bug
   rather than as the sharp instrument language used on .benchboard - that one
   is square all the way through, so its inner chips can be square too. */
.lab__item { box-shadow: none; }
/* superchat.css hovers this to var(--ink-lift), which was right while the card
   was var(--ink). This file makes it white and never updated the hover, so
   pointing at a research card turned it black under dark text. The site's two
   other dark hovers are scoped to [data-tone="dark"]; this one never was. */
.lab__item:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--page-accent) 24%, transparent);
}
.code { border-left: 4px solid var(--page-accent);   padding-left: 1.25rem;
}
.ratecard { border-top: 3px solid var(--fg); }
.ratecard table { font-family: var(--mono); }
.ratecard tbody th b { font-family: var(--sans); }

.badge,
.chip {
  border-radius: 2px;
  box-shadow: 2px 2px 0 currentColor;
}
.badge::before { border-radius: 0; }

.flow__track { border-radius: 2px; }
.moment__in { box-shadow: none; }

/* -- 08b. Field records -------------------------------------------------
   Photography is evidence, not wallpaper. Each frame is compact, labelled
   like a documentary contact sheet and composed around the real place where
   the intelligence runs. */
.plate {
  width: min(calc(100% - (var(--gut) * 2)), 1320px);
  height: clamp(17rem, 34vw, 25rem);
  margin: clamp(1.75rem, 4vw, 3.5rem) auto;
  isolation: isolate;
  border: 1px solid rgba(9, 10, 13, .22);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 7px 0 rgba(9, 10, 13, .12), 0 28px 70px rgba(9, 10, 13, .14);
}
.plate picture { display: block; width: 100%; height: 100%; }
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.04);
  transform: scale(1.035);
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.plate.is-on img { filter: saturate(.96) contrast(1.03); transform: scale(1); }
.plate::before {
  content: "ILLUSTRATED / " attr(data-field);
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(9, 10, 13, .68);
  color: rgba(255, 255, 255, .82);
  font: .62rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.plate::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 7, 11, .84) 0%, rgba(6, 7, 11, .34) 42%, transparent 72%),
    linear-gradient(0deg, rgba(6, 7, 11, .72) 0%, transparent 48%);
  pointer-events: none;
}
.plate__cap {
  z-index: 2;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: none;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(.92rem, 1.25vw, 1.08rem);
}
.plate__cap span {
  max-width: 44ch;
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--page-accent);
}

.moment {
  min-height: clamp(28rem, 68svh, 40rem);
  counter-increment: atelier-moment;
}
.moment::before {
  content: "ILLUSTRATED FIELD NOTE / 0" counter(atelier-moment);
  position: absolute;
  z-index: 3;
  top: 1.35rem;
  left: var(--gut);
  color: rgba(255, 255, 255, .64);
  font: .62rem/1 var(--mono);
  letter-spacing: .13em;
}
.moment::after {
  background:
    linear-gradient(90deg, rgba(6, 7, 11, .94) 0%, rgba(6, 7, 11, .70) 42%, rgba(6, 7, 11, .08) 72%),
    linear-gradient(0deg, rgba(6, 7, 11, .72) 0%, transparent 58%);
}
.moment__in { color: #fff; }
.moment__time { color: rgba(255, 255, 255, .62); }
.moment__p { color: rgba(255, 255, 255, .74); }
.moment__tag { color: rgba(255, 255, 255, .52); }

/* The two pinned explanations remain cinematic, but no longer demand four
   full pages of scrolling before the reader can continue. */
.stage,
.stand { height: 210svh; }
.beat { min-height: 44svh; }

/* -- 09. Forms and deliberate input surfaces --------------------------- */
.form {
  position: relative;
  padding-top: 2rem;
  border-top: 3px solid var(--page-accent);
  box-shadow: none;
}
.form::before {
  content: "INPUT / SECURE CHANNEL";
  position: absolute;
  top: .55rem;
  left: 0;
  color: var(--fg-dim);
  font: .58rem/1 var(--mono);
  letter-spacing: .12em;
}
.field input,
.field textarea,
.field select {
  border-radius: 2px;
  border-color: var(--rule);
  background-color: transparent;
}
.form__alert { border-radius: 2px; }

/* -- 10. Calls to action and footer ------------------------------------ */
.demo__box {
  position: relative;
  border-radius: 2px;
  border-left: 4px solid var(--page-accent);
  background: transparent;
  box-shadow: var(--lift-2);
  padding-left: 1.5rem;
}
.demo__box:hover { transform: translateX(4px); box-shadow: 4px 4px 0 rgba(9, 10, 13, .1); }
.demo__go { border-radius: 2px; font-family: var(--mono); }

.endcta { position: relative; overflow: hidden; }
.endcta::before {
  content: "NO CLOUD REQUIRED";
  position: absolute;
  top: clamp(3rem, 8vh, 5rem);
  right: var(--gut);
  padding: .65rem .8rem;
  border: 1px solid var(--fg-dim);
  color: var(--fg-dim);
  font: .61rem/1 var(--mono);
  letter-spacing: .14em;
  transform: rotate(-2deg);
}
.foot { border-top: 3px solid var(--fg); }
.foot__grid { border-bottom: 1px solid var(--rule); padding-bottom: clamp(2rem, 4vh, 3rem); }
.foot__h::before { content: "— "; color: var(--page-accent); }

/* -- 11. Client area: a secure console, not a dashboard kit ------------- */
.client-page { background: var(--paper); }
.client-auth__story { position: relative; padding-left: clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--rule); }
.client-auth__story::before {
  content: "ACCESS RECORD / 01";
  position: absolute;
  left: -.1rem;
  bottom: 0;
  color: var(--fg-dim);
  font: .56rem/1 var(--mono);
  letter-spacing: .12em;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
.client-auth__card {
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: #f9f6ef;
  box-shadow: 10px 10px 0 #d9d1c4;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.client-auth__mark { border-radius: 2px; box-shadow: 4px 4px 0 var(--page-accent-2); }
.client-field input,
.client-field textarea,
.client-field select { border-radius: 2px; background: transparent; }
.client-primary,
.client-secondary,
.client-danger {
  border-radius: 2px;
  font-family: var(--mono);
  letter-spacing: .035em;
}
.client-primary { background: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--page-accent-2); }
.client-primary:hover { box-shadow: 6px 6px 0 var(--page-accent-2); }
.client-tabs {
  gap: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(244, 240, 231, .98);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.client-tabs button { border-right: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); }
.client-tabs button:last-child { border-right: 0; }
.client-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--page-accent-2); }
.client-metrics,
.client-products,
.client-splitcards { gap: clamp(.85rem, 1.5vw, 1.15rem); }
.client-metrics article,
.client-product,
.client-panelcard,
.client-assistant,
.client-conversation,
.client-inlineform,
.client-callout,
.client-empty {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
}
.client-product::before { width: 3rem; height: 3rem; inset: 0 0 auto auto; border-radius: 0; background: var(--page-accent); opacity: .09; }
.client-status,
.client-alert,
.client-codebox { border-radius: 2px; }

/* -- 12. Responsive composition ---------------------------------------- */
@media (max-width: 900px) {
  .hero::before { inset: 66px 14px 14px; }
  .hero__glow { width: 100%; right: 0; opacity: .72; }
  .prod::before { left: var(--gut); }
  .endcta::before { display: none; }
}

@media (max-width: 679px) {
  .hero::after { display: none; }
  .hero__engines { border-left: 1px solid rgba(255, 255, 255, .14); }
  .heroengine { padding-inline: 1rem; }
  .hero__eyebrow,
  .act__eyebrow,
  .prod__eyebrow {
    grid-template-columns: minmax(0, 1fr) minmax(1.5rem, 3rem);
    overflow-wrap: anywhere;
  }
  .sec:not(.hero):not(.stand):not(.moment):not(.plate) > .wrap::before { left: 1rem; }
  .card { min-height: 13rem; }
  .prod__art { box-shadow: 6px 6px 0 rgba(35, 40, 115, .11); }
  .plate {
    width: calc(100% - 2rem);
    height: clamp(17rem, 76vw, 22rem);
    margin-block: 1.5rem;
    border-radius: 13px;
    box-shadow: 0 5px 0 rgba(9, 10, 13, .12), 0 18px 42px rgba(9, 10, 13, .13);
  }
  .plate::before { top: .75rem; left: .75rem; max-width: calc(100% - 1.5rem); }
  .plate__cap { padding: 1.1rem; }
  .moment { min-height: 32rem; }
  .moment__img img { object-position: 62% center; }
  .stage,
  .stand { height: 200svh; }
  .beat { min-height: 38svh; }
  .client-auth__story { padding-left: 0; border-left: 0; }
  .client-auth__story::before { display: none; }
  .client-auth__card { box-shadow: 6px 6px 0 #d9d1c4; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; }
  .heroengine,
  .card,
  .demo__box { transition: none; }
}

/* ========================================================================
   15. Luminous system
   A light-first, accessibility-led refinement inspired by Apple's interface
   principles: system typography, generous type, quiet depth, large targets
   and a single family of softly rounded surfaces.
   ======================================================================== */
:root {
  --paper: #fbfbfd;
  --paper-2: #f4f3f8;
  --haze: #f3f0fa;
  --ink: #17151f;
  --ink-soft: #24212f;
  --ink-lift: #312d40;
  --fg: #17151f;
  --fg-mid: #555160;
  --fg-dim: #716c7c;
  --rule: rgba(29, 24, 43, .11);
  --rule-2: rgba(29, 24, 43, .065);
  --surface: rgba(255, 255, 255, .74);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --display: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display",
             "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", monospace;
  --t-body: clamp(1.09rem, 1.05vw, 1.18rem);
  --t-small: clamp(.98rem, 1vw, 1.05rem);
  --t-eyebrow: clamp(.86rem, .9vw, .94rem);
  --t-lead: clamp(1.22rem, 1.55vw, 1.5rem);
  --nav-h: 68px;
  --soft-radius: 24px;
  --soft-shadow: 0 2px 8px rgba(30, 24, 52, .05), 0 18px 48px rgba(30, 24, 52, .08);
  --soft-shadow-hover: 0 4px 12px rgba(30, 24, 52, .07), 0 26px 64px rgba(30, 24, 52, .12);
}

body {
  background:
    radial-gradient(circle at 88% 7%, rgba(129, 140, 255, .10), transparent 27rem),
    radial-gradient(circle at 8% 28%, rgba(210, 64, 136, .055), transparent 30rem),
    var(--paper);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.008em;
}

[data-tone="light"] { background: rgba(251, 251, 253, .94); }
[data-tone="paper2"] { background: #f5f4f8; }
[data-tone="haze"],
[data-tone="lilac"] { background: linear-gradient(145deg, #f7f5fc, #f0ecf9); }
[data-tone="mint"] { background: linear-gradient(145deg, #f6fbf8, #edf7f2); }
[data-tone="peach"] { background: linear-gradient(145deg, #fff9f5, #f8eee7); }
[data-tone="sky"] { background: linear-gradient(145deg, #f7fafc, #edf4f8); }

.display,
.h1,
.h2,
.h3,
.h4,
.heroengine strong,
.person h3,
.card h3 {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -.038em;
}
.display,
.h1,
.h2 { line-height: 1.02; }
.lead { line-height: 1.55; }
.small { line-height: 1.6; }

.eyebrow,
.figref,
.heroengine__kicker,
.heroengine__link,
.badge,
.chip,
.foot__h,
.nav__word,
.nav__list a,
.nav__login,
.nav__cta,
.btn,
.arrowlink,
.demo__go {
  font-family: var(--sans);
}
.eyebrow {
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: none;
}
.hero__eyebrow,
.act__eyebrow,
.prod__eyebrow { display: block; }
.hero__eyebrow::after,
.act__eyebrow::after,
.prod__eyebrow::after,
.sec:not(.hero):not(.stand):not(.moment):not(.plate) > .wrap::before,
.hero::before,
.hero::after,
.card::before,
.person::before,
.prod::before,
.proof__i::before,
.plate::before,
.moment::before,
.endcta::before { display: none; }
.heroengine__kicker::before { display: none; content: none; }

/* Navigation: larger labels, comfortable targets and a light material. */
.nav { height: var(--nav-h); color: var(--ink); }
.nav--stuck,
.nav--onlight.nav--stuck {
  background: rgba(251, 251, 253, .84);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  border-bottom: 1px solid rgba(29, 24, 43, .08);
  box-shadow: 0 8px 30px rgba(30, 24, 52, .055);
}
.nav__word { font-size: 1.08rem; font-weight: 650; letter-spacing: -.02em; }
.nav__list { gap: clamp(1.1rem, 2vw, 1.75rem); }
.nav__list a,
.nav__login,
.nav__cta {
  min-height: 48px;
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: -.01em;
}
.nav__list a,
.nav__login { opacity: .78; }
.nav__list a[aria-current="page"]::after,
.nav__login[aria-current="page"]::after {
  inset-block-end: 4px;
  height: 3px;
  border-radius: 999px;
  background: var(--page-accent);
}
.nav__cta {
  padding: .75rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(23, 21, 31, .16);
}
.nav__cta::after { content: ""; }
.nav__burger { width: 48px; height: 48px; border-radius: 999px; }
.sheet {
  background: rgba(251, 251, 253, .96);
  color: var(--ink);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}
.sheet__list { gap: 1.35rem; }
.sheet__list a { font-family: var(--display); font-size: clamp(2rem, 9vw, 3rem); }
@media (min-width: 860px) and (max-width: 1049px) {
  .nav__list,
  .nav__login,
  .nav__cta { display: none; }
  .nav__burger { display: grid; }
}

/* Light, spacious hero covers. */
.hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--page-accent) 17%, transparent), transparent 27rem),
    radial-gradient(circle at 98% 78%, color-mix(in srgb, var(--page-accent-2) 11%, transparent), transparent 24rem),
    linear-gradient(145deg, #ffffff 0%, #faf9fd 58%, #f3f0fa 100%);
  border-bottom: 1px solid var(--rule);
}
.hero__glow {
  width: min(58vw, 760px);
  height: 100%;
  right: -5vw;
  top: 0;
  opacity: .82;
  background:
    radial-gradient(circle at 54% 46%, color-mix(in srgb, var(--page-accent) 18%, transparent), transparent 38%),
    radial-gradient(circle at 72% 66%, color-mix(in srgb, var(--page-accent-2) 12%, transparent), transparent 34%);
  filter: blur(2px);
}
.hero__h { font-weight: 650; letter-spacing: -.05em; }
.hero__h .r:nth-child(2) { color: #756b91; }
.hero__sub {
  max-width: 48ch;
  padding-left: 0;
  border-left: 0;
  color: #555160;
}
.scrollcue { color: #716c7c; font-size: .9rem; }
.scrollcue i { background: linear-gradient(180deg, rgba(23, 21, 31, .42), transparent); }

.hero__engines { gap: 1rem; }
.heroengine {
  padding: clamp(1.45rem, 2.2vw, 1.9rem);
  gap: .7rem;
  border: 1px solid rgba(29, 24, 43, .10);
  border-radius: var(--soft-radius);
  background: rgba(255, 255, 255, .78);
  color: var(--ink);
  box-shadow: var(--soft-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.heroengine + .heroengine { border-top: 1px solid rgba(29, 24, 43, .10); }
.heroengine::before { width: 5px; border-radius: 0 999px 999px 0; }
.heroengine:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--page-accent) 25%, transparent);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--soft-shadow-hover);
}
.heroengine__kicker { color: #716c7c; font-size: .9rem; letter-spacing: .06em; }
.heroengine__kicker::before { color: #8d8798; }
.heroengine strong { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.heroengine__note { color: #5d5868; font-size: 1rem; line-height: 1.58; }
.heroengine__link { color: #5744c5; font-size: 1rem; font-weight: 600; }

/* One coherent rounded surface language.
   `.lab__grid` belongs here too. superchat.css builds both it and `.doors` as a
   hairline slab — `gap: 1px` over a grey background, so the 1px shows through
   as a divider between flush panels. That works while the panels are square and
   edge to edge. The moment this file gives the children a white fill, a border
   and a 24px radius, a 1px gap leaves rounded cards jammed together with the
   grey slab wedging out through every corner. `.doors` was converted and
   `.lab__grid` was not, which is the only reason the research cards did not
   look like the deployment cards. */
.cards,
.proof,
.people,
.doors,
.lab__grid {
  gap: clamp(1rem, 2vw, 1.35rem);
  border: 0;
  background: transparent;
}
.card,
.proof__i,
.person,
.door,
.work__item.is-boxed,
.price,
.lab__item,
.maps__apis article,
.ratecard,
.form,
.prod__specs,
.mapdemo,
.mapagent,
.demo__box,
.client-auth__card,
.client-panelcard,
.client-assistant,
.client-conversation,
.client-inlineform,
.client-callout,
.client-empty,
.client-product,
.client-metrics article {
  border: 1px solid rgba(29, 24, 43, .095);
  border-radius: var(--soft-radius);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--soft-shadow);
}
/* The --small variant of the inline form is a bare row that sits INSIDE one of
   those cards, which is why client.css strips its border, background and
   padding. Only the padding survived: this file loads last, so the rule above
   handed the border, fill and shadow straight back and left a boxed row with
   nothing between its content and its own edge — the "Key name / Create key"
   and "Add funds" rows on the client panels. A card inside a card needed
   neither. */
.client-inlineform--small {
  border: 0;
  background: none;
  box-shadow: none;
}
.card,
.proof__i,
.person,
.door {
  min-height: 0;
  padding: clamp(1.6rem, 2.7vw, 2.25rem);
}
/* Anything given the card treatment above needs the inset that goes with it.
   .price and .ratecard were laid out flush, before they became boxes, so they
   carried no padding of their own and their text sat hard against the border —
   the eyebrow, the rule and the caption all touching the edge. The others in
   that list already pad themselves; these two never did. */
.price {
  padding: clamp(1.6rem, 2.7vw, 2.25rem);
}
.ratecard {
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.75rem);
}
/* Inside a card the final row's rule reads as a stray line floating above the
   bottom edge. Flush against the old borderless layout it was the table's
   closing edge, which is why it was there. */
.ratecard tbody tr:last-child th,
.ratecard tbody tr:last-child td { border-bottom: 0; }
.card:hover,
.person:hover,
.door:hover,
.maps__apis article:hover {
  transform: translateY(-3px);
  padding-left: clamp(1.6rem, 2.7vw, 2.25rem);
  border-color: color-mix(in srgb, var(--page-accent) 24%, transparent);
  background: #fff;
  box-shadow: var(--soft-shadow-hover);
}
.proof__i { padding-top: clamp(1.6rem, 2.7vw, 2.25rem); }
.door { min-height: 15rem; }
.prod { border-top: 0; }
.prod__in { padding-block: clamp(3.5rem, 7vh, 6rem); }
.prod__art {
  border: 0;
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
}
.prod__art::before,
.prod__art::after { display: none; }
.prod__specs { border-radius: 22px; }
.prod__specs div { font-family: var(--sans); font-size: 1rem; }

.btn {
  min-height: 48px;
  padding: .82rem 1.35rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
.btn--grad,
[data-tone="light"] .btn--grad,
[data-tone="paper2"] .btn--grad,
[data-tone="haze"] .btn--grad,
[data-tone="lilac"] .btn--grad,
[data-tone="mint"] .btn--grad,
[data-tone="peach"] .btn--grad,
[data-tone="sky"] .btn--grad {
  border-color: transparent;
  background: linear-gradient(100deg, #6757d9, #b33e91 62%, #dc6030);
  color: #fff;
  box-shadow: 0 10px 28px rgba(103, 87, 217, .24);
}
.btn--grad:hover { box-shadow: 0 14px 36px rgba(103, 87, 217, .32); }
.btn--ghost { border-color: rgba(29, 24, 43, .18); color: var(--ink); }
.arrowlink { font-size: 1rem; letter-spacing: -.01em; text-transform: none; }

/* The two scroll stories become light canvases with dark, readable copy. */
.stage,
.stand {
  background: linear-gradient(145deg, #f7f5fc, #ede9f7);
  color: var(--ink);
}
.stage__panel { color: var(--ink); }
.stage__panel .lead,
.stand__text p { color: #5b5666; }
.stage__meter span,
.stand__text .eyebrow { color: #716c7c; }
.stand__copy { background: none; }
.stand__rail i { background: rgba(29, 24, 43, .16); }
.stand__rail i.is-on { background: #6757d9; }
.sc-dots circle { fill: rgba(35, 31, 52, .48); }
.sc-line { stroke: rgba(35, 31, 52, .24); }
.stand__scene svg text { fill: rgba(35, 31, 52, .46); }
.stand__scene circle[fill="rgba(255,255,255,.28)"] { fill: rgba(35, 31, 52, .3); }
.stand__scene rect[fill="rgba(255,255,255,.12)"] { fill: rgba(35, 31, 52, .12); }
.benchproof li { grid-template-columns: 1fr; }
.client-trust li { grid-template-columns: 1fr; }

/* Only one statement is readable at a time. The former cross-fade briefly
   placed two complete paragraphs on top of one another while scrolling. */
@media (prefers-reduced-motion: no-preference) {
  .js .stage__panel,
  .js .stand__text {
    visibility: hidden;
    opacity: 0;
    transform: none;
    transition: none;
  }
  .js .stage__panel.is-on,
  .js .stand__text.is-on {
    visibility: visible;
    opacity: 1;
  }
}

.beat { background: #fbfbfd; color: var(--ink); }
.beat p { font-family: var(--display); }
.lab {
  background:
    linear-gradient(rgba(36, 31, 52, .035) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(36, 31, 52, .035) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(145deg, #f6f4fa, #efecf6);
}
.lab__note { color: #716c7c; }

/* Photography stays cinematic without turning an entire chapter black. */
.plate { border-radius: 28px; box-shadow: var(--soft-shadow-hover); }
.plate::before {
  border-color: rgba(255, 255, 255, .58);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #2f2b39;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.plate__cap { font-size: 1.05rem; }
.moment::before {
  color: rgba(23, 21, 31, .58);
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.moment::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 42%, rgba(255, 255, 255, .08) 75%),
    linear-gradient(0deg, rgba(255, 255, 255, .72) 0%, transparent 58%);
}
.moment__in { color: var(--ink); }
.moment__time { color: #625d6d; }
.moment__p { color: #514c5c; }
.moment__tag { color: #6f6979; }

/* Forms, client surfaces and footer follow the same soft geometry. */
.form { padding: clamp(1.5rem, 3vw, 2.2rem); border-top: 0; }
.form::before { display: none; }
.field input,
.field textarea,
.field select,
.client-field input,
.client-field textarea,
.client-field select {
  min-height: 50px;
  border-radius: 14px;
  background: #fff;
  font-family: var(--sans);
  font-size: 1rem;
}
.endcta {
  background: linear-gradient(145deg, #f0ecfb, #faf8ff);
  color: var(--ink);
}
.foot {
  border-top: 1px solid var(--rule);
  background: #f7f6fa;
  color: var(--ink);
}
.foot__h { font-size: .95rem; letter-spacing: .02em; text-transform: none; }
.foot__col a,
.foot__mail,
.foot__tag { font-size: 1rem; }
.client-auth__story { padding-left: 0; border-left: 0; }
.client-auth__story::before { display: none; }
.client-auth__card { border-radius: 28px; box-shadow: var(--soft-shadow-hover); }
.client-auth__mark,
.client-primary,
.client-secondary,
.client-danger,
.client-tabs,
.client-status,
.client-alert,
.client-codebox { border-radius: 14px; }
.client-primary,
.client-secondary,
.client-danger,
.client-tabs button { font-family: var(--sans); font-size: 1rem; }

/* The client area is a working surface, so secondary information must remain
   comfortably readable instead of shrinking into dashboard microcopy. */
.client-trust b { font-size: 1rem; }
.client-trust p,
.client-muted,
.client-message,
.client-switch,
.client-alert,
.client-product p,
.client-assistant__meta,
.client-check,
.client-ledger__row,
.client-conversation p { font-size: .94rem; }
.client-field label,
.client-textbtn,
.client-metrics small,
.client-assistant__url,
.client-docrow,
.client-table,
.client-table button,
.client-footer { font-size: .9rem; }
.client-fine,
.client-product span,
.client-status,
.client-codebox code,
.client-codebox button,
.client-callout code,
.client-table th,
.client-table code,
.client-conversation time { font-size: .84rem; }
.client-docs h4,
.client-conversation h3 { font-size: 1rem; }

@media (max-width: 679px) {
  :root { --nav-h: 64px; }
  .hero { padding-top: calc(var(--nav-h) + 2.25rem); }
  .hero__glow { width: 105%; right: -45%; opacity: .62; }
  .heroengine { border-radius: 20px; }
  .card,
  .proof__i,
  .person,
  .door,
  .prod__specs,
  .form { border-radius: 20px; }
  .plate { border-radius: 20px; }
  .plate::before { font-size: .76rem; }
  .moment::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .62) 72%, transparent),
      linear-gradient(0deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 64%, transparent);
  }
}

@media (prefers-contrast: more) {
  :root { --fg-mid: #36323e; --fg-dim: #4f4a59; --rule: rgba(23, 21, 31, .24); }
  .card,
  .person,
  .door,
  .heroengine,
  .form { border-color: rgba(23, 21, 31, .28); }
}