/* The site's own pages — today, the FAQ — in the make page's clothes:
   the same two themes, the same pink, the same header and menu. */
:root {
  --page: #000; --surface: #0f0f11; --surface-high: #1c1c1f; --text: #f5f5f7; --muted: #86868b;
  --bdr: rgba(255, 255, 255, .09); --bdr-strong: rgba(255, 255, 255, .2);
  --accent: #ff2d87; --ink: #f5f5f7; --on-ink: #000;
  --glass: rgba(0, 0, 0, .62); --shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --swoosh-a: rgba(255, 45, 135, .55); --swoosh-b: rgba(255, 140, 200, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
:root[data-theme="light"] {
  --page: #fff; --surface: #f5f5f7; --surface-high: #ebebef; --text: #1d1d1f; --muted: #6e6e73;
  --bdr: rgba(0, 0, 0, .08); --bdr-strong: rgba(0, 0, 0, .18);
  --accent: #ff1f7f; --ink: #1d1d1f; --on-ink: #fff;
  --glass: rgba(255, 255, 255, .72); --shadow: 0 30px 80px -34px rgba(60, 10, 40, .28);
  --swoosh-a: rgba(255, 45, 135, .38); --swoosh-b: rgba(255, 170, 215, .45);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { background: var(--page); color: var(--text); min-height: 100dvh; overflow-x: hidden; font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; transition: background .4s, color .4s; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* The backdrop: two soft blobs and the pink swooshes, drawn once. */
.swoosh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.swoosh .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .9; }
.swoosh .b1 { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -18vw; top: -22vw; background: radial-gradient(circle at 40% 40%, var(--swoosh-a), transparent 65%); }
.swoosh .b2 { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -16vw; top: 30vh; background: radial-gradient(circle, var(--swoosh-b), transparent 65%); animation: drift 18s ease-in-out infinite alternate; }
.swoosh svg { position: absolute; left: 50%; top: 0; width: max(1600px, 130vw); height: 900px; transform: translateX(-50%); opacity: calc(.9 - var(--sy, 0) * .0016); }
.swoosh path { fill: none; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 2.6s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drift { to { translate: -6vw 8vh; } }
main, footer { position: relative; z-index: 1; }

/* Header: a menu button, the name, the theme. */
header.top { position: relative; z-index: 90; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; max-width: 1100px; height: 64px; margin: 0 auto; padding: 0 12px; }
.mark { justify-self: center; font-size: clamp(21px, 5.6vw, 28px); font-weight: 900; letter-spacing: -.045em; text-transform: uppercase; line-height: 1; background: linear-gradient(100deg, #ff7ab8, var(--accent) 45%, #ff9a6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.burger, .theme { position: relative; width: 44px; height: 44px; border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; border-radius: 50%; transition: background .25s; }
.burger:hover, .theme:hover { background: var(--surface); }
.burger i { position: absolute; left: 11px; width: 22px; height: 2.6px; border-radius: 2px; background: currentColor; transition: transform .5s cubic-bezier(.7, 0, .2, 1), top .5s cubic-bezier(.7, 0, .2, 1); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.theme { justify-self: end; display: grid; place-items: center; }
.theme svg { width: 22px; height: 22px; }
.theme .sun, :root[data-theme="light"] .theme .moon { display: none; }
:root[data-theme="light"] .theme .sun { display: block; }

/* The menu: the page gives way to the links. */
.navsheet { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: space-between; padding: calc(96px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom)); background: var(--page); overflow-y: auto; opacity: 0; transition: opacity .35s ease; }
.navsheet::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 15% 10%, rgba(255, 45, 135, .14), transparent 70%), radial-gradient(50% 40% at 90% 90%, rgba(255, 154, 107, .12), transparent 70%); pointer-events: none; }
.navsheet.open { opacity: 1; }
.navsheet[hidden] { display: none; }
.navbig { position: relative; display: grid; gap: clamp(14px, 2.6vh, 24px); max-width: 1040px; width: 100%; margin: 0 auto; }
.navbig a { font-size: clamp(32px, 8.5vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; width: fit-content; opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .6s var(--ease), transform .7s var(--ease), color .25s; transition-delay: calc(var(--i) * 55ms + 80ms); }
.navbig a:hover { color: var(--accent); }
.navbig a.cur { background: linear-gradient(100deg, #ff7ab8, var(--accent) 50%, #ff9a6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.navbig a.out { color: var(--muted); }
.navbig a.out:hover { color: var(--accent); }
.navbig a[hidden] { display: none; }
.navsheet.open .navbig a { opacity: 1; transform: none; }
.navfoot { position: relative; display: grid; gap: 16px; max-width: 1040px; width: 100%; margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--bdr); font-size: 15px; color: var(--muted); opacity: 0; transition: opacity .6s .35s; }
.navsheet.open .navfoot { opacity: 1; }
.navfoot .mail { color: var(--text); font-weight: 600; }
.navfoot .fl { display: flex; gap: 26px; flex-wrap: wrap; font-weight: 600; }
.navfoot a:hover { color: var(--accent); }
.navfoot p { font-size: 13px; }
body.nav-open { overflow: hidden; }

/* Type. */
.hero { text-align: center; padding: clamp(40px, 10vh, 120px) 20px clamp(40px, 8vh, 90px); }
.eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: rgba(255, 45, 135, .1); border: 1px solid rgba(255, 45, 135, .25); }
h1 { font-size: clamp(42px, 7.4vw, 92px); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin: 20px auto 20px; max-width: 13ch; text-wrap: balance; }
h1 em, h2 em { font-style: normal; background: linear-gradient(100deg, #ff7ab8, var(--accent) 45%, #ff9a6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.lede { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; letter-spacing: -.01em; max-width: 40ch; margin: 0 auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Buttons. */
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #ff6fb5, var(--accent)); box-shadow: 0 14px 34px -14px var(--accent); transition: transform .3s var(--ease), box-shadow .3s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px var(--accent); }
.cta svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.cta:hover svg { transform: translateX(3px); }
.ghost { display: inline-flex; align-items: center; height: 54px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 600; border: 1px solid var(--bdr-strong); background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: border-color .25s; }
.ghost:hover { border-color: var(--accent); }

/* Anything that comes into view rises into place, once. */
.rv { opacity: 0; transform: translate3d(0, 36px, 0) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* The last word on every page. */
.closer { text-align: center; padding: clamp(80px, 14vh, 160px) 20px; }
.closer h2 { max-width: 16ch; margin: 0 auto; }
footer { max-width: 1100px; margin: 0 auto; padding: 28px 20px 40px; border-top: 1px solid var(--bdr); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 14px; color: var(--muted); }
footer .grow { flex: 1; }
footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .swoosh path { stroke-dashoffset: 0; }
}