/* A personal link-in-bio page. Plain black and white so it reads as the person, not the Unprompted brand; the only
   colour on the page is each business's own logo on its own button. System fonts: nothing to download, so it opens
   fast inside Instagram's and TikTok's browsers. Mobile first: 360 px wide is the floor. */
:root {
  --bg: #F4F4F2;
  --card: #FFFFFF;
  --ink: #111111;
  --muted: #5E5E5B;
  --line: #E2E2DE;
  --solid: #111111;
  --solid-ink: #FFFFFF;
  --solid-muted: #BDBDB8;
  --focus: #111111;
  --icon-tile: #111111;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0E0E;
    --card: #191919;
    --ink: #F2F2EF;
    --muted: #A3A39E;
    --line: #2C2C2B;
    --solid: #F2F2EF;
    --solid-ink: #111111;
    --solid-muted: #55554F;
    --focus: #F2F2EF;
    --icon-tile: #191919;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 36px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }

/* who this is */
.me { display: grid; justify-items: center; gap: 10px; text-align: center; }
.me img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: #5A5A58; }
.me h1 { margin-top: 4px; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.me p { color: var(--muted); font-size: 0.9375rem; max-width: 34ch; }
.me p span { display: block; text-wrap: balance; }

.eyebrow { margin: 32px 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* the free thing: the one solid button on the page */
.free { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: var(--solid); color: var(--solid-ink); }
.free div { flex: 1; min-width: 0; }
.free strong { display: block; font-size: 1.1875rem; font-weight: 800; line-height: 1.2; }
.free small { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--solid-muted); }
.free .go { flex: none; width: 20px; height: 20px; }

/* a row: logo tile, name, one plain line */
.card { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.card div { flex: 1; min-width: 0; }
.card strong { display: block; font-size: 1.0625rem; font-weight: 750; line-height: 1.25; }
.card small { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.card .go { flex: none; width: 18px; height: 18px; color: var(--muted); }
.tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; overflow: hidden; }
.tile img { width: 48px; height: 48px; }
.tile.dark { background: #0B0B0B; }
.tile.light { background: #FFFFFF; border: 1px solid var(--line); }
.tile.dark img.word { width: 38px; height: auto; }
.tile.light img { width: 40px; height: 40px; }
.stack { display: grid; gap: 10px; }

/* the show: one card with its two players under it */
.show { padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.show .head { display: flex; align-items: center; gap: 14px; }
.show .head div { min-width: 0; }
.show strong { display: block; font-size: 1.0625rem; font-weight: 750; }
.show small { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.players { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.players a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: 0.9375rem; }
.players img { width: 22px; height: 22px; flex: none; }

/* follow row */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
/* the platform icons are drawn for a dark ground (white Threads mark, white TikTok note), so their tiles stay dark */
.socials a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--icon-tile); border: 1px solid var(--icon-tile); }
.socials img { width: 24px; height: 24px; }

.free:active, .card:active, .players a:active, .socials a:active, .btn:active { transform: translateY(1px); }
@media (hover: hover) { .card:hover, .players a:hover, .socials a:hover, .show:hover { border-color: var(--muted); } }

/* ---------- subpages (/rulebook, /camera) ---------- */
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 0.9375rem; }
.back img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.doc h1 { margin-top: 18px; font-size: 2rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; }
.doc .lede { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); }
.doc h2 { margin: 30px 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.doc h3 { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.doc p + p { margin-top: 10px; }
.doc a.inline { text-decoration: underline; text-underline-offset: 3px; }

.rules { padding: 6px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.rules section { padding: 14px 0; }
.rules section + section { border-top: 1px solid var(--line); }
.rules h3 { font-size: 1.0625rem; }
.rules ul { margin-top: 8px; display: grid; gap: 8px; }
.rules li { position: relative; padding-left: 16px; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--solid); color: var(--solid-ink); font-weight: 750; font-size: 1rem; cursor: pointer; }
.btn.wide { width: 100%; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.copybar { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copybar .note { font-size: 0.875rem; color: var(--muted); }

.box { margin-top: 12px; padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.box p { color: var(--muted); font-size: 0.9375rem; }
.box h3 + p { margin-top: 6px; }
form.mail { margin-top: 14px; display: grid; gap: 10px; }
form.mail label { font-size: 0.875rem; font-weight: 700; }
form.mail input[type=email] { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 1rem; }
form.mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.mail .status { min-height: 1.4em; font-size: 0.9375rem; color: var(--ink); }

.steps { display: grid; gap: 10px; }
.steps li { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.steps .n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.steps p { color: var(--muted); font-size: 0.9375rem; }

.ask { margin-top: 12px; padding: 18px; border-radius: 14px; background: var(--solid); color: var(--solid-ink); }
.ask h3 { font-size: 1.25rem; }
.ask p { margin-top: 6px; color: var(--solid-muted); font-size: 0.9375rem; }
.ask .btn { margin-top: 14px; background: var(--solid-ink); color: var(--solid); }

.foot { margin-top: 36px; }