/* ═══════════════════════════════════════════════════════════════════════════
   RELAY AI — design system
   One stylesheet, every page. The old site inlined ~85KB of CSS into each of
   five locale files, which is why any change had to be made five times and why
   the pages drifted apart. This is the single source of truth.

   Type:    Geist — Vercel's grotesque, free on Google Fonts, in the same
            lineage as OpenAI's Söhne and Anthropic's Styrene (both licensed).
            The companies that sell AI well don't reach for a display face; they
            use one neutral grotesque and get presence from WEIGHT and TIGHT
            TRACKING at large sizes. Space Grotesk was the generic-startup tell;
            a serif was over-correcting.
   Space:   an 8px-rooted scale. Sections breathe (was 108px, now 160-200px).
   Motion:  expo-out easing. Slower, fewer, more deliberate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* surface */
  --ink:#07080E;
  --ink-2:#0C0E18;
  --surface:rgba(255,255,255,.032);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);

  /* text */
  --fg:#F4F6FB;
  --fg-mut:#98A1B8;
  --fg-faint:#636B80;

  /* brand */
  --accent:#5C7CFA;
  --accent-2:#9A6BFF;
  --mint:#39E0A1;
  --grad:linear-gradient(100deg,var(--accent),var(--accent-2));

  /* type — one family, contrast comes from weight + tracking + scale */
  --f-display:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --f-ui:'Geist','Inter',system-ui,-apple-system,sans-serif;

  /* fluid scale. Slightly smaller than the serif build: a grotesque at 6.6rem
     is shouting, where a serif at that size was elegant. */
  --t-hero:clamp(2.9rem,6.2vw,5.4rem);
  --t-h2:clamp(2rem,3.9vw,3.2rem);
  --t-h3:clamp(1.25rem,1.7vw,1.5rem);
  --t-lead:clamp(1.05rem,1.35vw,1.25rem);
  --t-body:1.0625rem;
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* space — 8px root */
  --nav-h:72px;   /* single source of truth: .nav__row height + anchor offsets */
  /* s1–s4 are component spacing (gaps, padding inside a card). They stay fixed —
     a 16px gap is a 16px gap on any screen. */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  /* s5–s8 are layout rhythm, and they scale with the viewport because the type
     already does (--t-hero is a clamp). Fixed 144px section padding meant a 13"
     laptop and a 27" monitor got identical air: the headline grew with the window
     and the space around it didn't, so the page read tight at one size and empty
     at the other. Same clamp shape as the type keeps them in proportion. */
  --s5:clamp(2.5rem, 3.2vw, 4rem);    /*  40 →  64 */
  --s6:clamp(3.25rem, 5vw, 6rem);     /*  52 →  96 */
  --s7:clamp(4rem, 7vw, 7rem);        /*  64 → 112 */
  --s8:clamp(5.5rem, 10vw, 10rem);    /*  88 → 160 */

  /* motion */
  --e:cubic-bezier(.16,1,.3,1);          /* expo-out: fast start, long settle */
  --e-io:cubic-bezier(.65,0,.35,1);
  --d1:.28s; --d2:.6s; --d3:1.05s;

  --r:14px; --r-lg:24px; --r-full:999px;
  --wrap:1200px;
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* clip, never hidden: `hidden` makes this a scroll container and silently
     breaks every position:sticky descendant. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
/* The nav is position:fixed, so it isn't in flow and an anchored section scrolls
   underneath it — /solutions/#pricing landed with its heading half-hidden.
   Every jump target needs to stop this far short of the top. */
:target,section[id],[id].anchor{scroll-margin-top:calc(var(--nav-h) + var(--s3))}
body{
  font-family:var(--f-ui);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--fg);
  background:var(--ink);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── ambient ────────────────────────────────────────────────────────────── */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% -10%,rgba(90,110,255,.14),transparent 62%),
    radial-gradient(760px 560px at 4% 10%,rgba(154,107,255,.10),transparent 60%),
    var(--ink);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
@media(min-width:768px){.wrap{padding-inline:var(--s4)}}
section{padding-block:var(--s7)}
/* Vertical rhythm comes from ONE side — the bottom of whatever came before — so
   adjacent blocks can't each contribute a helping and double the gap. They were:
   under the hero on /solutions/ the space was hero-bottom + section-top = ~154px,
   while /trust/ (which happened to carry a hand-written padding-top:0) got ~41px
   for the identical relationship. Same page, same design, different air, because
   the rhythm was being maintained by hand per page instead of by the stylesheet.
   This also makes the 12 inline `padding-top:0` overrides redundant rather than
   load-bearing — a section is now spaced correctly wherever you drop it. */
.hero + section,
section + section{padding-top:0}
@media(max-width:768px){section{padding-block:var(--s6)}}
.stack>*+*{margin-top:var(--s3)}

/* ── type ───────────────────────────────────────────────────────────────── */
/* Presence from weight + negative tracking, the way Linear/Vercel/OpenAI do it.
   Tracking tightens as size grows — optically correct, and the reason big
   grotesque headlines read as designed rather than just large. */
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.04}
h1{font-size:var(--t-hero);letter-spacing:-.038em;line-height:.98}
h2{font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.05}
h3{font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.25}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* kept so existing markup doesn't break — now a weight shift, not an italic */
.serif-i{font-style:normal;font-weight:500;opacity:.95}
.eyebrow{
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
}
.lead{font-size:var(--t-lead);color:var(--fg-mut);max-width:56ch;line-height:1.55}
.mut{color:var(--fg-mut)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-ui);font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  padding:.875rem 1.5rem;border-radius:var(--r-full);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform var(--d1) var(--e),
    box-shadow var(--d1) var(--e),background var(--d1) var(--e),border-color var(--d1) var(--e);
}
.btn svg{transition:transform var(--d1) var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn--grad{background:var(--grad);color:#fff}
.btn--grad:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(120,120,255,.6)}
.btn--solid{background:var(--fg);color:var(--ink)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(120,150,255,.5)}
.btn--ghost{border-color:var(--line);background:var(--surface);color:var(--fg)}
.btn--ghost:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn[disabled]{opacity:.5;cursor:default;transform:none!important}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);backdrop-filter:blur(10px);
}
.card--hl{position:relative}
.card--hl::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(120,150,255,.55),transparent 44%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--d2) var(--e);pointer-events:none;
}
.card--hl:hover::before{opacity:1}

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background var(--d2) var(--e),
  border-color var(--d2) var(--e),backdrop-filter var(--d2) var(--e)}
.nav.is-solid{background:rgba(7,8,14,.72);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav__row{height:var(--nav-h);display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-ui);
  font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.brand .ai{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__links{display:flex;gap:var(--s3);margin-left:var(--s2)}
.nav__links a{
  font-size:.9375rem;color:var(--fg-mut);position:relative;padding-block:.25rem;
  transition:color var(--d1) var(--e);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d2) var(--e);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__sp{flex:1}
.nav .btn{padding:.6rem 1.15rem}
.langs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:3px}
.langs a{font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--fg-faint);
  padding:.3rem .55rem;border-radius:var(--r-full);transition:all var(--d1) var(--e)}
.langs a:hover{color:var(--fg)}
.langs a[aria-current="true"]{background:var(--surface-2);color:var(--fg)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--surface);
  border-radius:12px;place-items:center;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--fg);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;
  background:var(--fg);transition:transform var(--d2) var(--e)}
.burger span::before{top:-5px} .burger span::after{top:5px}
@media(max-width:900px){
  .nav__links{display:none}
  .burger{display:grid}
}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(7,8,14,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s4);
  opacity:0;visibility:hidden;transition:opacity var(--d2) var(--e),visibility var(--d2)}
.sheet.is-open{opacity:1;visibility:visible}
.sheet a{font-family:var(--f-display);font-size:2.2rem;color:var(--fg);
  transform:translateY(14px);opacity:0;transition:all var(--d2) var(--e)}
.sheet.is-open a{transform:none;opacity:1}
.sheet.is-open a:nth-child(1){transition-delay:.05s}
.sheet.is-open a:nth-child(2){transition-delay:.1s}
.sheet.is-open a:nth-child(3){transition-delay:.15s}
.sheet.is-open a:nth-child(4){transition-delay:.2s}
.sheet.is-open a:nth-child(5){transition-delay:.25s}
.sheet__x{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;
  border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;
  display:grid;place-items:center;font-size:1.4rem;line-height:1}

/* ── reveal ─────────────────────────────────────────────────────────────── */
/* relay.js adds `js` to <html> on its first line, which hides every .r element
   until JS reveals it (adds .in). That means ANY later script error left the
   whole page blank — content hidden, nothing to un-hide it. The animation below
   is a pure-CSS safety net: with zero JS help it fades every .r element in after
   2.5s, so the page can never stay blank because a script died. In normal
   operation JS adds .in within ~1.6s (well before 2.5s), which reveals instantly
   and cancels the animation — so this is invisible unless something has gone
   wrong. Belt to the reveal JS's own suspenders. */
.js .r{opacity:0;transform:translateY(18px);
  transition:opacity var(--d3) var(--e),transform var(--d3) var(--e);
  animation:r-failsafe .5s var(--e) 2.5s forwards}
.js .r.in{opacity:1;transform:none;animation:none}
@keyframes r-failsafe{to{opacity:1;transform:none}}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:var(--s5) var(--s4);color:var(--fg-faint);
  font-size:var(--t-sm)}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:var(--s4)}
@media(max-width:768px){.foot__grid{grid-template-columns:1fr;gap:var(--s3)}}
.foot h4{font-family:var(--f-ui);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:var(--s2);font-weight:500}
.foot a{display:block;color:var(--fg-mut);padding-block:.28rem;transition:color var(--d1) var(--e)}
.foot a:hover{color:var(--fg)}
.foot__base{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .r{opacity:1;transform:none}
}