/* /get, the TikTok bio link. The invite page's night palette, type and
   button, without the map: it has to open instantly inside an in-app browser. */

@font-face {
  font-family: TLD;
  src: url('/assets/site/fonts/treadline-display.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0B0B0C;
  --ink-2: #151517;
  --text: #FFFFFF;
  --muted: #A9A9AE;
  --volt: #C5F52A;
  --display: TLD, 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  --back: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 1rem/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
[hidden] { display: none !important; }
.offscreen { position: absolute; left: -9999px; top: 0; }

.page {
  width: min(100% - 32px, 460px);
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
header { padding: max(16px, env(safe-area-inset-top)) 0 0; }
.has-hint header { padding-top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; border-radius: 8px; }
.brand span { font: 900 italic 22px/1 var(--display); padding-right: .1em; }

/* Points at TikTok's ⋯ menu, which sits above the page's top right. */
.escape-hint {
  position: fixed; z-index: 5; top: max(10px, env(safe-area-inset-top)); right: 12px; margin: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 14px; border-radius: 999px;
  background: var(--volt); color: var(--ink); font-size: .875rem; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
}
.escape-hint b { font-weight: 800; }
.escape-hint svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

main { padding-top: 40px; }
h1 {
  margin: 0 0 16px;
  font: 900 italic clamp(3.3rem, 17vw, 5.4rem)/.9 var(--display);
  text-transform: uppercase; letter-spacing: -.005em;
}
h1 .ln { display: block; }
h1 mark {
  position: relative; z-index: 0; display: block; width: fit-content; white-space: nowrap;
  background: none; color: var(--ink); padding: 0 .08em 0 .04em; margin-left: -.03em;
}
h1 mark::before {
  content: ''; position: absolute; z-index: -1; inset: .05em -.05em 0 -.04em;
  background: var(--volt); transform: skewX(-11deg);
}
.lede { margin: 0 0 22px; color: var(--muted); font-size: 1.0625rem; }

/* Apple's badge, unaltered; it keeps a quarter of its height clear all round. */
.appstore { display: inline-block; border-radius: 10px; transition: transform .2s var(--back); }
.appstore:active { transform: scale(.98); }
.appstore img { display: block; height: 54px; width: auto; }
/* Apple's badge asks for a quarter of its height clear round it. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* Android isn't out yet: a badge in Apple's black-badge style, not Google
   Play's, which may only point at a live listing. */
.android {
  display: flex; align-items: center; gap: 9px; margin: 0;
  height: 54px; padding: 0 16px 0 12px; border-radius: 9px;
  background: #000; border: 1px solid #A6A6A6; color: #fff; cursor: default;
}
/* Once the listing is live (get.js PLAY_STORE) the pill links to Play. */
a.android { cursor: pointer; text-decoration: none; transition: transform .2s var(--back); }
a.android:active { transform: scale(.98); }
.android svg { flex: none; }
.android span { display: flex; flex-direction: column; font-size: 1.3rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.android small { font-size: .5625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C8C8CC; }

/* ---- Inside TikTok ------------------------------------------------------ */

.inapp {
  margin: 24px 0 0; padding: 18px; border-radius: 18px;
  background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08);
}
.inapp h2 { margin: 0 0 6px; font: 900 italic 1.5rem/1.05 var(--display); padding-right: .1em; }
.inapp p { margin: 0 0 10px; color: var(--muted); font-size: .9375rem; }
.inapp ol { margin: 0 0 16px; padding-left: 1.3em; font-weight: 600; }
.inapp ol li { padding-block: 2px; }
.copy {
  width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid var(--volt); background: none; color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer;
}
.copy:active { background: rgba(197, 245, 42, .12); }
.copied { margin-top: 10px !important; color: var(--volt) !important; font-weight: 600; text-align: center; }
.inapp .search { margin: 14px 0 0; text-align: center; }
.inapp b, .search b { color: var(--text); }

/* ---- Why --------------------------------------------------------------- */

.why { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.why li { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.why img { flex: none; width: 58px; height: 58px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.why strong { display: block; color: var(--text); font: 900 italic 1.35rem/1.05 var(--display); margin-bottom: 3px; padding-right: .1em; }

footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: auto; padding: 30px 0 max(18px, env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--muted); }
footer a { padding-block: 10px; text-decoration: none; }
.credit { flex-basis: 100%; margin: 4px 0 0; font-size: .6875rem; line-height: 1.4; text-align: center; color: #6E6E73; }

@media (prefers-reduced-motion: reduce) {
  .appstore { transition: none; }
}