/*
 * ArbiStocks base.css (shell): tokens, @font-face, reset, the type scale and every shared component.
 * Values are typesafe.ai's own, read from reference/captures/*.styles.json and the Framer CSS in the
 * capture DOMs. Framer breakpoints: >= 1440 (desktop), 1200-1439 (desktop small), 810-1199 (tablet),
 * < 810 (phone). Markup for every component: docs/SHELL.md.
 */

/* ---------------------------------------------------------------- fonts */

@font-face { font-family: 'Die Grotesk C Regular'; src: url('/fonts/die-grotesk-c-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Die Grotesk C Medium'; src: url('/fonts/die-grotesk-c-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'LisaTerminal Paper 2X3Y Medium'; src: url('/fonts/lisaterminal-paper-2x3y-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
/* typesafe also names the pixel face without "Medium" in one window: same file */
@font-face { font-family: 'LisaTerminal Paper 2X3Y'; src: url('/fonts/lisaterminal-paper-2x3y-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-300-latin-ext.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Variable Regular'; src: url('/fonts/sf-pro-variable-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-700-latin-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fragment Mono'; src: url('/fonts/fragment-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* typesafe Framer tokens (names are ours, values are theirs) */
  --pink: #f386a1;            /* token fc29c52d: the field */
  --ink: #1e1e1e;             /* token f9dd19dd */
  --ink-86: rgba(30, 30, 30, 0.86); /* token 237d9693 (#1e1e1edb): body text */
  --paper: #fefefe;           /* token b7553c39 */
  --white: #ffffff;
  --black: #000000;
  --grey-1: #dedede;          /* token da5e5e0f: window body */
  --grey-2: #c4c4c4;          /* window frame band */
  --grey-3: rgba(133, 133, 133, 0.9); /* token 5d3602f5 */
  --teal-grey: #abbab9;       /* token 4e2a8bb4: blog band */
  --teal: #09aea1;            /* token 96554cf0: manifesto ground */
  --magenta: #d45bb6;         /* token c5350c56: team ground, tags, hovers */
  --green: #03aa5c;           /* token fb050f54 */
  --green-74: rgba(3, 170, 92, 0.74);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-16: rgba(255, 255, 255, 0.16);
  --sky: #d9efff;             /* hero sky, sampled from img/ts/hero-clouds.gif */

  --font-body: 'Die Grotesk C Regular', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Die Grotesk C Medium', 'Helvetica Neue', Arial, sans-serif;
  --font-pixel: 'LisaTerminal Paper 2X3Y Medium', 'JetBrains Mono', ui-monospace, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-glyph: 'SF Pro Variable Regular', -apple-system, 'Segoe UI Symbol', sans-serif;
  --font-inter: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-fragment: 'Fragment Mono', 'JetBrains Mono', monospace;

  --ease: cubic-bezier(0.12, 0.23, 0.5, 1);          /* typesafe link transitions */
  --ease-pop: cubic-bezier(0.34, 1.32, 0.64, 1);     /* ~ Framer spring bounce .2 / .4s */
  --dur-pop: 400ms;

  --page-pad: 30px;           /* horizontal page padding (10px under 810) */
  --container: 1240px;        /* typesafe content max width */
  --nav-h: 36px;
  --border: 1.2px;            /* typesafe window/frame border width */

  /* type scale (see .t-* below): phone values are set in the media blocks */
  --fs-display: 150px;        /* h1: 150 / 140 / 94 / 54, line-height 80% */
  --fs-h2: 64px;              /* 64 / 64 / 41 / 33, line-height 90% */
  --fs-cta: 64px;             /* big underlined CTA: 64 / 28 */
  --cta-bar: 4px;
  --fs-h3: 48px;
  --fs-h4: 30px;
  --fs-h5: 26px;              /* 26 / 22 */

  color-scheme: light;
}

@media (max-width: 1439px) { :root { --fs-display: 140px; } }
@media (max-width: 1199px) { :root { --fs-display: 94px; --fs-h2: 41px; --fs-cta: 28px; --cta-bar: 2px; --fs-h5: 22px; } }
@media (max-width: 809px)  { :root { --fs-display: 54px; --fs-h2: 33px; --page-pad: 10px; } }

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-86);
  font: 400 17px/1.2 var(--font-body);
  letter-spacing: 0.05em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body[data-ground='pink'] { background: var(--pink); }
body[data-ground='teal'] { background: var(--teal); }
body[data-ground='magenta'] { background: var(--magenta); }
body[data-ground='teal-grey'] { background: var(--teal-grey); }
body[data-ground='ink'] { background: var(--ink); color: var(--paper); }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, [aria-disabled='true'] { cursor: default; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--magenta); color: var(--paper); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); font: 500 18px/18px var(--font-display); padding: 9px 7px; }
.skip-link:focus { top: 44px; }

/* focus: one visible ring everywhere, magenta reads on pink, paper and ink grounds */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.ts-footer :focus-visible, .faq :focus-visible { outline-color: var(--pink); }

/* ---------------------------------------------------------------- layout primitives */

.ts-section { position: relative; width: 100%; padding-inline: var(--page-pad); }
.ts-container { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; }

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

.t-display {                    /* typesafe preset 1gz3e0j (h1) */
  font: 500 var(--fs-display)/0.8 var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
  text-transform: capitalize;
  text-wrap: balance;
}
.t-h2 {                         /* preset 1dwu49g */
  font: 500 var(--fs-h2)/0.9 var(--font-display);
  letter-spacing: 0;
  color: var(--ink-86);
  text-transform: capitalize;
}
.t-h3 { font: 500 var(--fs-h3)/0.9 var(--font-display); letter-spacing: 0; text-transform: capitalize; }          /* preset 6xiy3q */
.t-h4 { font: 500 var(--fs-h4)/0.9 var(--font-display); letter-spacing: 0.02em; text-transform: capitalize; }     /* preset 4xqhyo */
.t-h5 { font: 500 var(--fs-h5)/1.2 var(--font-display); letter-spacing: 0; }                                      /* preset j9nbbd */
.t-h6 { font: 500 22px/1.4 var(--font-display); letter-spacing: 0; }                                              /* preset 1f8n855 */
.t-lead { font: 400 22px/1.2 var(--font-body); letter-spacing: 0.05em; }                                         /* preset qu4l0f */
.t-body { font: 400 17px/1.2 var(--font-body); letter-spacing: 0.05em; }                                         /* preset ecyven */
.t-nav { font: 500 18px/1 var(--font-display); letter-spacing: 0.03em; text-transform: capitalize; }            /* preset 1owhkfx */
.t-mono { font: 300 13px/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: capitalize; }            /* preset 14out7e */
.t-mono-sm { font: 300 10px/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: capitalize; }         /* preset 1m5lpcg */
.t-mono-label { font: 300 12px/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: capitalize; }
.t-num { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.t-pixel { font: 500 18px/1 var(--font-pixel); letter-spacing: 0.01em; }
.t-pixel-20 { font: 500 20px/1 var(--font-pixel); letter-spacing: 0.01em; }
.t-pixel-28 { font: 500 28px/1 var(--font-pixel); letter-spacing: 0.01em; }
.t-legal-h { font: 700 16px/1 var(--font-inter); letter-spacing: -0.02em; }                                       /* preset 1y22f90 */
.t-caps { font: 500 16px/1.4 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }           /* preset 11e18nb */
.t-glyph { font-family: var(--font-glyph); font-weight: 400; }
.t-ink { color: var(--ink); }
.t-ink-86 { color: var(--ink-86); }
.t-paper { color: var(--paper); }
.t-pink { color: var(--pink); }

/* body links: typesafe preset md0wl4 (dark) and 19mqhjx (light) */
.t-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 5px;
  transition: color 0.5s var(--ease), text-decoration-thickness 0.5s var(--ease), text-underline-offset 0.5s var(--ease);
}
.t-link:hover { text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- nav (.ts-nav) */

.ts-nav { position: relative; z-index: 30; height: var(--nav-h); }
.ts-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ts-nav__row::-webkit-scrollbar { display: none; }
.ts-nav__group { display: flex; align-items: center; gap: 5px; flex: none; }
.ts-nav__box {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--nav-h);
  padding: 9px 7px;
  background: var(--paper);
  color: var(--ink-86);
  font: 500 18px/18px var(--font-display);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
a.ts-nav__box[href]:hover, button.ts-nav__box:not(:disabled):hover { background: var(--magenta); }
.ts-nav__box--dark { background: var(--ink); color: var(--white); }
.ts-nav__box--dark:not(:disabled):hover { background: var(--magenta); color: var(--white); }
.ts-nav__box[aria-current='page']:not(.ts-nav__brand) { background: var(--ink); color: var(--paper); }
.ts-nav__box[aria-current='page']:not(.ts-nav__brand):hover { background: var(--magenta); }
.ts-nav__brand { gap: 5px; }
.ts-nav__mark { width: auto; height: 17px; flex: none; }
.ts-nav__box[data-user-address] { font-family: var(--font-mono); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; }

/* SOON tag inside the blank buy / CA controls */
.ts-soon {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 4px 2px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  opacity: 0.8;                 /* takes the control's own colour, so it reads on paper, on ink and on hover */
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}

@media (max-width: 809px) {
  .ts-nav__row { justify-content: space-between; }
  /* typesafe hides its black button on phones; the app pages keep the wallet button */
  .ts-nav__box[data-shell='launch'] { display: none; }
}

/* ---------------------------------------------------------------- frame corners (.frame-corners) */

.frame-corners {
  position: relative;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M.6 10V.6H10' fill='none' stroke='%231e1e1e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M9.4 10V.6H0' fill='none' stroke='%231e1e1e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M.6 0v9.4H10' fill='none' stroke='%231e1e1e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M9.4 0v9.4H0' fill='none' stroke='%231e1e1e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
.frame-corners--light {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M.6 10V.6H10' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M9.4 10V.6H0' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M.6 0v9.4H10' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M9.4 0v9.4H0' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* top pair only / bottom pair only (typesafe often sets the two rows apart) */
.frame-corners--top { background-size: 10px 10px, 10px 10px, 0 0, 0 0; }
.frame-corners--bottom { background-size: 0 0, 0 0, 10px 10px, 10px 10px; }

/* ---------------------------------------------------------------- dotted pink texture (.dot-grid) */

.dot-grid {
  background-color: var(--pink);
  background-image: url('/img/ts/dot-grid.png');
  background-repeat: repeat;
  background-position: center;
  background-size: 1440px auto;     /* typesafe: 3840px art drawn at 1440px -> 5.6px pitch */
}
.dot-grid--framed { border: 1px solid var(--ink); }
.dot-grid--clear { background-color: transparent; }  /* dots only, over whatever ground */

/* ---------------------------------------------------------------- ascii edge ornaments (.ascii-sep) */

.ascii-sep { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--ink); }
.ascii-sep > span {
  display: block;
  padding: 10px 7px;
  font: 300 12px/12px var(--font-mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ascii-sep--light { color: var(--paper); }

/* ---------------------------------------------------------------- OS window (.os-window) */

.os-window { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.os-window__bar {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 5px 4px;
  background: var(--ink);
  color: var(--grey-1);
  font: 500 18px/1 var(--font-pixel);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}
.os-window__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.os-window__meta { flex: none; color: inherit; opacity: 0.8; }
.os-window__frame { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 3px 3px; background: var(--grey-2); flex: 1 1 auto; min-height: 0; }
.os-window__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 4px 8px;
  background: var(--grey-1);
  color: var(--ink);
  font: 500 20px/1 var(--font-pixel);
  letter-spacing: 0.01em;
}
/* typesafe draws every edge as a 1.2px inset border overlay (Framer data-border) */
.os-window__bar::after, .os-window__frame::after, .os-window__body::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border) solid var(--ink);
  pointer-events: none;
}
.os-window__body--white { background: var(--white); }
.os-window__body--paper { background: var(--paper); }
.os-window__body--flush { padding: 0; }
.os-window__body--mono { font: 400 13px/1.35 var(--font-mono); letter-spacing: 0; }

/* no grey frame band: title bar straight onto the body (typesafe Clock Tool / Glider) */
.os-window--bare .os-window__frame { padding: 0; background: transparent; }
.os-window--bare .os-window__frame::after { display: none; }
/* pink tool windows: pink title text, pink body */
.os-window--pink .os-window__bar { color: var(--pink); padding: 1px 4px 1px 4px; }
.os-window--pink .os-window__body { background: var(--pink); }
/* white body */
.os-window--white .os-window__body { background: var(--white); }
/* dark body (terminals) */
.os-window--dark .os-window__body { background: var(--ink); color: var(--paper); }
.os-window--dark .os-window__body::after { border-color: var(--grey-2); }
/* drop shadow for windows floating over art */
.os-window--float { box-shadow: 3px 3px 0 var(--ink); }
/* window pop-in (typesafe appear: scale 0 -> 1, spring bounce .2 / .4s): add data-reveal="pop" */

/* pixel chip inside windows (the big "RLHF" style label) */
.os-chip { display: inline-block; background: var(--ink); color: var(--paper); font: 500 28px/1 var(--font-pixel); letter-spacing: 0.01em; padding: 2px 4px 4px; }
/* small grey tag with the four-spoke glyph (typesafe "+ chat gpt") */
.os-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--grey-2); color: var(--ink); font: 500 16px/1 var(--font-pixel); padding: 2px 5px 4px; }
.os-tag::before { content: ''; width: 9px; height: 9px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0c.5 2 1 3.3 1.4 3.6C6.7 4 8 4.5 10 5c-2 .5-3.3 1-3.6 1.4C6 6.7 5.5 8 5 10c-.5-2-1-3.3-1.4-3.6C3.3 6 2 5.5 0 5c2-.5 3.3-1 3.6-1.4C4 3.3 4.5 2 5 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0c.5 2 1 3.3 1.4 3.6C6.7 4 8 4.5 10 5c-2 .5-3.3 1-3.6 1.4C6 6.7 5.5 8 5 10c-.5-2-1-3.3-1.4-3.6C3.3 6 2 5.5 0 5c2-.5 3.3-1 3.6-1.4C4 3.3 4.5 2 5 0z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------------------------------------------------------------- OS label (.os-label) */

.os-label {
  display: inline-block;
  padding: 2px 3px 5px 2px;
  background: var(--ink);
  color: var(--pink);
  font: 500 18px/18px var(--font-pixel);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.os-label--paper { color: var(--paper); }
.os-label--grey { color: var(--grey-1); }
.os-label--teal-grey { color: var(--teal-grey); }
/* the blog tag chip: magenta ground, black 28px text */
.os-label--tag { background: var(--magenta); color: var(--black); font-size: 28px; line-height: 28px; padding: 2px 3px 5px; }

/* ---------------------------------------------------------------- big underlined CTA link (.cta-link) */

.cta-link {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0;
  color: var(--ink);
  font: 500 var(--fs-cta)/0.9 var(--font-display);
  letter-spacing: 0;
  text-transform: capitalize;
  -webkit-text-stroke: 0.5px var(--ink-86);
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.cta-link::after { content: ''; display: block; height: var(--cta-bar); background: currentColor; transition: background-color 0.5s var(--ease); }
.cta-link:hover { color: var(--magenta); -webkit-text-stroke-color: var(--magenta); }
.cta-link--soft { color: var(--ink-86); }
.cta-link--light { color: var(--paper); -webkit-text-stroke-color: rgba(254, 254, 254, 0.86); }
/* the fast-forward arrow in front of "Open Roles" style links */
.cta-arrow { width: 56px; height: auto; color: var(--ink-86); flex: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--nav-h);
  padding: 9px 7px;
  background: var(--ink);
  color: var(--white);
  font: 500 18px/18px var(--font-display);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn:not(:disabled):not([aria-disabled='true']):hover { background: var(--magenta); color: var(--white); }
.btn--light { background: var(--paper); color: var(--ink-86); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--lg { height: 48px; padding: 13px 14px; font-size: 22px; line-height: 22px; }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { background: var(--grey-2); color: var(--grey-3); }

/* pixel button for use inside OS windows */
.os-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 9px 6px;
  background: var(--grey-1);
  color: var(--ink);
  font: 500 18px/1 var(--font-pixel);
  letter-spacing: 0.01em;
  border: var(--border) solid var(--ink);
  box-shadow: inset -2px -2px 0 var(--grey-2), inset 2px 2px 0 var(--white);
  white-space: nowrap;
}
.os-button:not(:disabled):hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.os-button:not(:disabled):active { box-shadow: inset 2px 2px 0 var(--grey-2); background: var(--grey-2); color: var(--ink); }
.os-button--dark { background: var(--ink); color: var(--paper); box-shadow: none; }
.os-button--dark:not(:disabled):hover { background: var(--magenta); }
.os-button:disabled { color: var(--grey-3); box-shadow: none; }

/* ---------------------------------------------------------------- FAQ (.faq) */

.faq { display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 670px; color: var(--paper); }
.faq__item { padding: 0 10px 20px; border-left: 1px dashed var(--paper); }
.faq__item[open] { border-left-style: solid; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font: 300 13px/15.6px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: var(--paper);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__icon {
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='.5' y='.5' width='19' height='19' stroke='%23FEFEFE'/%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23FEFEFE' stroke-width='1.25'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  transform: rotate(180deg);          /* closed: chevron up (typesafe) */
  transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__icon { transform: none; }   /* open: chevron down */
.faq__a { padding-top: 50px; font: 400 22px/26.4px var(--font-body); letter-spacing: 0.05em; color: var(--paper); }
.faq__a p + p { margin-top: 0.8em; }
.faq__a a { text-decoration: underline; text-decoration-thickness: 1.2px; text-underline-offset: 5px; }
@media (max-width: 1199px) { .faq { max-width: 74%; } }   /* typesafe: 713 of 964 at 1024 */
@media (max-width: 809px) { .faq { max-width: none; } }

/* ---------------------------------------------------------------- logo lockup (.lockup) */
/* planet + "ArbiStocks", sized by its own width (container query units). Default: black; --light: white. */

.lockup { display: block; container-type: inline-size; width: 100%; color: var(--ink); }
.lockup__inner { display: flex; align-items: center; justify-content: center; gap: 3cqw; height: 21.84cqw; }
.lockup__mark { height: 16.5cqw; width: auto; flex: none; }
.lockup__word { font: 500 16.4cqw/1 var(--font-display); letter-spacing: -0.035em; white-space: nowrap; transform: translateY(-0.02em); }
.lockup--light { color: var(--white); }

/* ---------------------------------------------------------------- footer (.ts-footer) */

.ts-footer { position: relative; background: var(--ink); color: var(--paper); padding: 50px var(--page-pad) 0; }
.ts-footer__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 220px;
  width: 100%;
  overflow: hidden;
  background-color: var(--ink);
}
.ts-footer__hash { width: 100%; height: 10px; flex: none; }
.ts-footer__cube { position: absolute; left: 50%; top: 50%; width: calc(min(58%, 719px) * 1.086); aspect-ratio: 781 / 727; transform: translate(-50%, -50%); pointer-events: none; }
.ts-footer__lockup { position: relative; z-index: 1; width: min(58%, 719px); }
.ts-footer__b64 {
  position: relative;
  z-index: 1;
  flex: none;
  height: 12px;
  font: 300 10px/12px var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--paper);
  white-space: nowrap;
}
.ts-footer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; }
.ts-footer__group { display: flex; align-items: center; gap: 5px; }
.ts-footer__item {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 10px 7px;
  background: var(--ink);
  color: var(--paper);
  font: 400 15px/15px var(--font-body);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
a.ts-footer__item:hover { color: var(--magenta); }
@media (max-width: 809px) {
  .ts-footer__bar { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 10px 12px; margin-top: 50px; }
  .ts-footer__group { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- toast */

.toast-region { position: fixed; left: 50%; bottom: 24px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  position: relative;
  padding: 6px 10px 8px;
  background: var(--ink);
  color: var(--grey-1);
  font: 500 18px/1.1 var(--font-pixel);
  letter-spacing: 0.01em;
  box-shadow: 3px 3px 0 var(--pink);
  pointer-events: auto;
  animation: toast-in var(--dur-pop) var(--ease-pop) both;
}
.toast::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--pink); vertical-align: 1px; }
.toast--error::before { background: var(--magenta); }
.toast.is-leaving { animation: toast-out 0.2s var(--ease) both; }
@keyframes toast-in { from { opacity: 0.001; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- reveal on scroll */
/* js/shell.js adds html.reveal-on, then toggles .is-in when an element is 50% visible (typesafe threshold .5) */

.reveal-on [data-reveal] { transition: opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease-pop); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0.001; }
.reveal-on [data-reveal='pop']:not(.is-in) { transform: scale(0); }
.reveal-on [data-reveal='rise']:not(.is-in) { transform: translateY(24px); }
.reveal-on [data-reveal='pop-sm']:not(.is-in) { transform: scale(0.6); }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}