/* heyorb.ai base: the brand's tokens (the app's Tokens.swift), one type family in seven
   sizes, the still night behind everything, the top bar, buttons and forms.
   Colour has jobs: night is the page, warm white is words and the main button, gold is
   only the Orb, your stars and one line of the headline. Nothing glows but the Orb. */
@font-face {
  font-family: "Wix Madefor Display";
  src: url("../fonts/wix-madefor-display-latin.woff2") format("woff2");
  font-weight: 400 800; 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: "Wix Madefor Display";
  src: url("../fonts/wix-madefor-display-latin-ext.woff2") format("woff2");
  font-weight: 400 800; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Wix Madefor Text";
  src: url("../fonts/wix-madefor-text-latin.woff2") format("woff2");
  font-weight: 400 800; 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: "Wix Madefor Text";
  src: url("../fonts/wix-madefor-text-latin-ext.woff2") format("woff2");
  font-weight: 400 800; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --sky-deep: #0C0A14; --sky-cloud: #161220; --sky-low: #262034;
  --ink: #F2F1ED; --ink-2: #A9AEBB; --ink-3: rgba(242, 241, 237, .5);
  --ember: #E8B564; --ember-hi: #F5D89A; --aurora: #8B7CF8; --rose: #FAA5BD;
  --line: rgba(255, 255, 255, .09); --line-hi: rgba(255, 255, 255, .18);
  --field: rgba(255, 255, 255, .055); --deep-ink: #15111F;
  --f-display: "Wix Madefor Display", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --f-text: "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* seven sizes, small to large */
  --t-fine: 13px; --t-small: 15px; --t-body: 17px;
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-big: clamp(23px, 2.5vw, 32px);
  --t-head: clamp(34px, 4.6vw, 56px);
  --t-hero: clamp(38px, 5.6vw, 92px);
  /* three tempos and two curves: a touch, the interface, a scene; --ease for what fades,
     --spring for what lands (it passes its place by a hair and settles), --pop for stars */
  --touch: .2s; --ui: .5s; --scene: 1s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --bar: 64px;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) {
  :root { --gl: max(40px, env(safe-area-inset-left, 0px)); --gr: max(40px, env(safe-area-inset-right, 0px)); }
}
/* Real springs where the browser can draw them (a damped spring, sampled). */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.033, 0.119, 0.235, 0.366, 0.5, 0.626, 0.74, 0.838, 0.918, 0.979, 1.025, 1.056, 1.074, 1.082, 1.083, 1.078, 1.07, 1.06, 1.048, 1.037, 1.027, 1.018, 1.011, 1.005, 1, 0.997, 0.995, 0.993, 0.993, 1);
    --pop: linear(0, 0.056, 0.195, 0.378, 0.574, 0.759, 0.915, 1.036, 1.118, 1.164, 1.179, 1.171, 1.148, 1.115, 1.08, 1.047, 1.018, 0.996, 0.98, 0.971, 0.968, 0.969, 0.973, 0.979, 0.985, 0.991, 0.996, 1, 1.003, 1.005, 1);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--sky-deep); color: var(--ink); font: 400 var(--t-body)/1.55 var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(242, 241, 237, .35); text-underline-offset: 3px; transition: text-decoration-color var(--touch); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
button { font: inherit; color: inherit; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }

/* ---------- the night behind every section. It stands still: only scrolling moves it. */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(110% 70% at 16% 6%, color-mix(in srgb, var(--sky-cloud) 80%, transparent), transparent 62%),
    radial-gradient(80% 60% at 88% 38%, color-mix(in srgb, var(--sky-cloud) 64%, transparent), transparent 66%),
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-deep) 42%, var(--sky-cloud) 82%, var(--sky-low) 118%); }
.sky-l { position: absolute; left: 0; right: 0; top: -40px; height: calc(100% + 720px); background-repeat: repeat; background-size: 640px 640px; will-change: transform; }

/* ---------- the top bar, attached to the edge of the screen */
.bar { position: fixed; z-index: 20; inset: 0 0 auto 0; height: calc(var(--bar) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color var(--ui) var(--ease), border-color var(--ui) var(--ease); }
.bar.solid { background: rgba(12, 10, 20, .78); border-bottom-color: var(--line); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.bar-in { height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; padding: 8px 0; text-decoration: none; }
.logo img, .logo svg { display: block; height: 26px; width: auto; overflow: visible; }
.logo-o, .logo-ring { transform-box: fill-box; transform-origin: center; }
.logo-ring { opacity: 0; }

/* ---------- buttons: the only pills on the page */
.btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--deep-ink); font: 700 16px/1 var(--f-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--touch), transform var(--ui) var(--spring), opacity var(--touch); }
.btn:hover { background: #fff; }
@media (hover: hover) { .btn:hover { transform: scale(1.035); } }
.btn:active { transform: scale(.96); transition-duration: var(--touch), .12s, var(--touch); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-hi); }
.btn-quiet:hover { background: rgba(255, 255, 255, .08); }
.btn-small { height: 40px; padding: 0 18px; font-size: 14.5px; }
.bar.solid .btn-quiet { background: var(--ink); color: var(--deep-ink); box-shadow: none; }
.bar.solid .btn-quiet:hover { background: #fff; }

/* ---------- forms */
.join { display: grid; gap: 12px; width: min(100%, 520px); }
.join-row { display: flex; gap: 8px; }
.field { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid var(--line-hi); border-radius: 14px; outline: 0; background: var(--field); color: var(--ink); font: 400 var(--t-body) var(--f-text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--touch), background-color var(--touch); }
.field::placeholder { color: var(--ink-3); }
.field:hover { border-color: rgba(255, 255, 255, .3); }
.field:focus { border-color: var(--ink); background: rgba(255, 255, 255, .08); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Wide screens: the email and its button are one capsule, the button inside the field.
   Narrow screens: the two stand one under the other, the field like dark glass. */
@media (min-width: 561px) {
  .join .join-row { gap: 0; padding: 5px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--field); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--touch), background-color var(--touch); }
  .join .join-row:hover { border-color: rgba(255, 255, 255, .3); }
  .join .join-row:focus-within { border-color: var(--ink); background: rgba(255, 255, 255, .08); }
  .join .join-row .field, .join .join-row .field:hover, .join .join-row .field:focus { height: 42px; padding: 0 12px 0 15px; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .join .join-row .btn { height: 42px; padding: 0 22px; }
}
/* the one line under a form: the privacy notice, which the law wants next to it */
.fine { margin: 0; font-size: var(--t-fine); color: var(--ink-2); }
.fine a { color: inherit; }
.note { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.note.ok { color: var(--ink); }
.note.err { color: var(--rose); }
.shake { animation: shake .42s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* "you joined": your star number and your invite link */
.joined { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 520px); }
.joined p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.joined .joined-rank { font: 700 var(--t-big)/1.1 var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
.joined-rank b { color: var(--ember-hi); font-weight: 700; }
.share { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 20px; border-radius: 999px; border: 1px solid var(--line-hi); background: var(--field); }
.share span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-small) var(--f-text); color: var(--ink); user-select: all; -webkit-user-select: all; }
.joined .preview-note { color: var(--ember-hi); }

@media (max-width: 560px) {
  .join-row { flex-direction: column; }
  .join-row .field { flex: none; width: 100%; border-color: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  .join-row .btn { width: 100%; }
  .logo img, .logo svg { height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shake { animation: none; }
  .bar, .btn, .field, a { transition: none; }
}