/* OBOX site: the page. A white page with colour coming from the hosts' own brands; .dark sections for the night itself.
   Tokens come from the product: PerfectlyNineties for display, the system face for reading, Panchang only for the
   wordmark, the pearl blues, one live green. */
@font-face { font-family: "PerfectlyNineties"; src: url("../fonts/PerfectlyNineties-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PerfectlyNineties"; src: url("../fonts/PerfectlyNineties-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Panchang"; src: url("../fonts/Panchang-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --bg: #fafaf8;
  --bg-2: #f1f2ef;
  --surface: #ffffff;
  --surface-2: #f4f5f2;
  --surface-3: #e9ebe7;
  --line: rgba(11, 12, 14, .08);
  --line-2: rgba(11, 12, 14, .15);
  --text: #0b0c0e;
  --text-2: rgba(11, 12, 14, .64);
  --text-3: rgba(11, 12, 14, .44);
  --pearl: #eef2f8;
  --pearl-shade: #a9c4e6;
  --halo: #3a7cff;
  --blue: #3a7cff;
  --blue-deep: #2a5fe0;
  --teal: #1a9c8b;
  --live: #34d399;
  --live-ink: #0f9a63;
  --risk: #e5484d;
  --shadow-lg: 0 50px 100px -40px rgba(16, 24, 48, .32), 0 24px 48px -28px rgba(16, 24, 48, .22);
  --serif: "PerfectlyNineties", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mark: "Panchang", var(--sans);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --max: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
}
.dark {
  --bg: #050607; --bg-2: #0a0c0f; --surface: #111317; --surface-2: #16181d; --surface-3: #1d2026;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --text: #f3f5f8; --text-2: rgba(243, 245, 248, .68); --text-3: rgba(243, 245, 248, .44);
  --halo: #9cc8ff; --blue: #60b0ff; --teal: #2ac4b2; --live-ink: #34d399;
  --shadow-lg: 0 60px 120px -40px rgba(0, 0, 0, .9);
  background: var(--bg); color: var(--text); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(58, 124, 255, .22); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: .96; margin: 0; text-wrap: balance; }
.display em { font-style: italic; }
.d-xl { font-size: clamp(54px, 7.4vw, 118px); }
.d-l { font-size: clamp(44px, 6vw, 96px); }
.d-m { font-size: clamp(36px, 4.4vw, 68px); line-height: 1; }
.d-s { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.06; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 36em; text-wrap: pretty; margin: 0; }
.label { font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- small parts ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 70%, transparent); font: 500 13px/1 var(--sans); color: var(--text-2); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); flex: none; display: inline-block; }
.dot.blue { background: var(--blue); box-shadow: 0 0 0 3px rgba(58, 124, 255, .18); }
.dot.live { animation: livepulse 2.4s var(--ease) infinite; }
@keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, .06); } }
.soon { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font: 600 10.5px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); background: rgba(58, 124, 255, .1); border: 1px solid rgba(58, 124, 255, .25); vertical-align: middle; }
.dark .soon { color: #9cc8ff; background: rgba(96, 176, 255, .12); border-color: rgba(96, 176, 255, .28); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 99px;
  font: 500 16px/1 var(--sans); transition: background-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { box-shadow: 0 10px 24px -10px rgba(11, 12, 14, .5); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.btn-ghost:hover { border-color: var(--text-3); }
.btn-white { background: #fff; color: #0b0c0e; }
.btn-glass { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn .arr { transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arr { transform: translateX(3px); } }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }

.glass { background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 30px 60px -30px rgba(16, 24, 48, .35), 0 0 0 1px rgba(11, 12, 14, .04); color: #0b0c0e; }
.dark .glass, .glass.dk { background: rgba(22, 24, 29, .62); border: 1px solid rgba(255, 255, 255, .1); color: #f3f5f8;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(11, 12, 14, .02); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(250, 250, 248, .78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); }
.nav .wrap { height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-tile { width: 30px; height: 30px; border-radius: 8px; background: var(--text); display: grid; place-items: center; color: var(--bg); }
.brand-tile svg { width: 17px; height: 17px; }
/* the OBOX glyph always fills the box it is put in (inline, it sat on the text baseline and fell out of its tile) */
svg.gl { display: block; width: 100%; height: 100%; }
.wordmark { font: 600 14px/1 var(--mark); letter-spacing: .3em; margin-right: -.3em; }
.nav-links { display: flex; gap: 26px; margin-left: 18px; }
.nav-links a { font-size: 15px; color: var(--text-2); transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 960px) { .nav-links { display: none; } }
@media (max-width: 560px) { .nav-cta .btn-ghost { display: none; } .nav .wrap { gap: 12px; } }

/* ---------- sections ---------- */
section { position: relative; }
.sec { padding: clamp(96px, 11vw, 168px) 0; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 980px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker .label { color: var(--text-2); }

/* ---------- reveal motion ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .22em; margin-bottom: -.22em; }
.split em .w { padding-right: .09em; margin-right: -.09em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0s)); }
.split.in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .split .w > span { transition: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}