/* One particle field runs the whole page. Red is only ever you. */
:root {
  --bg: #0b0a08;
  --bone: #f2ede1;
  --mute: #a39e91;
  --red: #ff4a1c;
  --gut: clamp(16px, 2.6vw, 36px);
}
* { box-sizing: border-box; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { color: var(--bone); background: var(--bg); font: 400 17px/1.35 'Instrument Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { color: var(--bg); background: var(--red); }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
#field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100lvh; pointer-events: none; }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#labels span { position: absolute; font-size: 14px; font-weight: 500; line-height: 1.1; white-space: nowrap; color: var(--bone); opacity: 0; transition: opacity 0.35s; }
#labels.on span { opacity: 1; }
#labels span.mute { color: var(--mute); }
#labels span.you { font-weight: 600; color: var(--red); }
#labels span.ping { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid var(--red); border-radius: 50%; animation: ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
@keyframes ping { from { transform: scale(0.25); opacity: 1; } 70%, to { transform: scale(1.5); opacity: 0; } }
#flood { position: fixed; inset: 0; z-index: 1; background: var(--red); clip-path: circle(0 at 50% 50%); pointer-events: none; }

.top { position: fixed; z-index: 5; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gut); pointer-events: none; background: linear-gradient(var(--bg) 62%, transparent); transition: color 0.3s; }
.top a { pointer-events: auto; }
.logo { font-size: 20px; font-weight: 600; font-stretch: 88%; letter-spacing: -0.025em; }
.logo i { display: inline-block; width: max(0.19em, 4px); height: max(0.19em, 4px); margin-left: max(0.045em, 1px); background: var(--red); border-radius: 50%; transition: background 0.3s; }
.top-nav { display: flex; gap: clamp(14px, 2vw, 26px); align-items: center; font-size: 15px; font-weight: 600; }
.menu { display: flex; gap: clamp(14px, 2vw, 26px); }
/* A red line draws in under a link on hover and slides away after. The current page keeps it. */
.menu a { position: relative; padding-block: 4px; font-weight: 500; pointer-events: auto; }
.menu a::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1); }
.menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.flooded .menu a::after { background: var(--bg); }
.menu-btn { display: none; pointer-events: auto; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.top-scan { padding: 7px 14px; font-size: 15px; font-weight: 600; color: var(--bg); background: var(--bone); border-radius: 999px; transition: opacity 0.3s; }
.flooded .top { color: var(--bg); background: none; }
.flooded .logo i { background: var(--bg); }
.flooded .top-scan { opacity: 0; pointer-events: none; }

main, .foot { position: relative; z-index: 2; }
.beat { position: relative; }
.in { display: flex; align-items: center; min-height: 100svh; padding: 76px var(--gut) var(--gut); }
.js .beat:not(.long) > .in { position: sticky; top: 0; height: 100svh; }
h1, h2 { font-weight: 500; font-stretch: 86%; }
h1 { font-size: min(15vw, 28svh); line-height: 0.86; letter-spacing: -0.045em; }
h2 { font-size: clamp(38px, 5vw, 92px); line-height: 0.94; letter-spacing: -0.035em; }
.fine { margin-top: 14px; font-size: 13px; line-height: 1.3; color: var(--mute); }

/* Steps in a beat sit on top of each other and swap. */
.stack { width: 100%; }
.step + .step { margin-top: 40px; }
.js .stack { display: grid; }
.js .step { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s 0.35s; }
.js .step.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.step.side { width: 40%; max-width: 640px; align-self: center; }

.center .in { align-items: center; }
.ask-big { max-width: 15em; margin-inline: auto; font-size: clamp(40px, 7.4vw, 136px); font-weight: 500; font-stretch: 86%; line-height: 0.94; letter-spacing: -0.04em; text-align: center; }
.low .in { align-items: flex-end; }
.js .low .stack { align-items: end; }
.low .step.side { align-self: end; padding-bottom: 12vh; }
.top-copy .in { align-items: flex-start; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead b { font-weight: 600; }
.lead { max-width: 28em; margin-top: 12px; font-size: clamp(19px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -0.015em; color: var(--bone); }
blockquote { margin-top: 20px; padding-left: 16px; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -0.012em; color: var(--mute); border-left: 2px solid var(--bone); }
mark { color: var(--bg); background: var(--red); }
.fix { margin-top: 16px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.22; color: var(--mute); }
.fix b { display: block; margin-bottom: 4px; font-size: 1.2em; font-weight: 500; line-height: 1.1; color: var(--bone); }

/* The write, approve, live list lights up as the dots get there. */
.flow li { transition: opacity 0.4s; }
.js [data-at="0"] .flow li:nth-child(n+2), .js [data-at="1"] .flow li:nth-child(3) { opacity: 0.3; }

.long .in { padding-block: 22vh; }
.side-long { width: 42%; max-width: 680px; }
.rows { margin-top: 20px; }
.rows li { padding-block: 11px; border-top: 1px solid #2c2a25; }
.rows b { display: block; font-size: clamp(18px, 1.5vw, 23px); font-weight: 500; line-height: 1.15; }
.rows span { display: block; margin-top: 2px; line-height: 1.25; color: var(--mute); }
.rows.num { counter-reset: n; }
.rows.num li { position: relative; padding-left: 1.5em; counter-increment: n; }
.rows.num li::before { content: counter(n); position: absolute; left: 0; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.15; }
.faq { margin-top: 20px; }
.faq dt { padding-top: 12px; font-size: clamp(18px, 1.5vw, 23px); font-weight: 500; line-height: 1.15; border-top: 1px solid #2c2a25; }
.faq dd { margin: 5px 0 14px; color: var(--mute); line-height: 1.25; }

.hero .in { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(14px, 3vw, 44px); align-items: end; margin-top: clamp(16px, 3vh, 34px); }
.hero-foot p { max-width: 32em; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.012em; }
form[data-scan] { display: flex; padding: 4px; background: var(--bone); border-radius: 999px; }
form[data-scan] input { flex: 1; min-width: 0; padding: 10px 16px; font: 500 17px 'Instrument Sans', Arial, sans-serif; color: var(--bg); background: none; border: 0; outline: 0; }
form[data-scan] button { padding: 10px 20px; font: 600 16px 'Instrument Sans', Arial, sans-serif; color: #fff; white-space: nowrap; background: var(--red); border: 0; border-radius: 999px; cursor: pointer; }

/* Compared with the alternatives */
.vs-block { width: 100%; }
.vs-block h2 { max-width: 15em; }
.vs-wrap { margin-top: clamp(32px, 4vw, 64px); }
.vs { width: 100%; table-layout: fixed; border-collapse: collapse; }
.vs th, .vs td { padding: 14px 16px; text-align: left; vertical-align: top; font-weight: 400; line-height: 1.25; }
.vs thead th { padding-block: 16px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; border-bottom: 1.5px solid var(--bone); }
.vs thead th.us { color: var(--bg); background: var(--bone); }
.vs tbody th { font-weight: 600; background: rgb(242 237 225 / 0.04); }
@media (max-width: 760px) {
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: 100%; }
  .vs tr { padding-block: 12px; }
  .vs tbody th { padding: 0 0 6px; font-size: 1.15em; }
  .vs td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; text-align: right; }
  .vs td::before { content: attr(data-who); flex: none; width: 42%; text-align: left; }
}

.vs tbody tr > * { border-top: 1px solid #2c2a25; }
.vs tbody td { color: var(--mute); }
.vs .us { color: var(--bone); font-weight: 600; background: rgb(242 237 225 / 0.07); }
@media (max-width: 760px) { .vs tbody tr > * { border: 0; background: none; } .vs tr { border-top: 1px solid #2c2a25; } }

/* The close: your dot grows until the whole screen is you. */
.end .in { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.end-copy { color: var(--bg); }
.js .end-copy { opacity: 0; visibility: hidden; transition: opacity 0.4s; }
.js .end-copy.on { opacity: 1; visibility: visible; }
.end-copy h2 { font-size: min(19vw, 38svh); line-height: 0.84; letter-spacing: -0.05em; }
.end-copy form { max-width: 720px; margin-top: clamp(16px, 3vh, 32px); }
.end-copy form button { background: var(--bg); }
html:not(.js) .end-copy, html.no-gl .end-copy { color: var(--bone); opacity: 1; visibility: visible; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav a:hover { text-decoration: underline; }
.foot { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; padding: 14px var(--gut); font-size: 13px; color: var(--bg); background: var(--red); }
html:not(.js) .foot, html.no-gl .foot { color: var(--mute); background: var(--bg); }

/* Phone: the page links fold into a menu under the bar. */
@media (max-width: 800px) {
  .menu-js .menu-btn { display: block; }
  .menu-js .menu { display: none; }
  .menu-js .menu-open { background: var(--bg); color: var(--bone); }
  .menu-js .menu-open .menu { position: absolute; top: 100%; right: 0; left: 0; display: flex; flex-direction: column; gap: 0; padding: 4px var(--gut) 20px; background: var(--bg); border-bottom: 1px solid #2c2a25; }
  .menu-js .menu-open .menu a { padding-block: 12px; font-size: 26px; font-weight: 500; font-stretch: 88%; letter-spacing: -0.02em; border-top: 1px solid #2c2a25; }
  .menu-js .menu-open .menu a::after { display: none; }
  .menu-js .menu-open .menu a[aria-current] { text-decoration: underline 2px var(--red); text-underline-offset: 7px; }
  .menu-js .menu-open .logo i { background: var(--red); }
  .menu-js .menu-open .top-scan { opacity: 1; pointer-events: auto; }
}

/* Phone: the field takes the top of the screen, words take the bottom. */
@media (max-width: 800px) {
  #labels span { font-size: 12px; }
  .in { align-items: flex-end; }
  .step.side, .side-long { width: 100%; max-width: none; }
  .low .step.side { padding-bottom: 0; }
  .top-copy .in { align-items: flex-end; }
  .js .stack { align-items: end; }
  .step.side { align-self: end; }
  h2 { font-size: clamp(32px, 9.4vw, 54px); }
  h1 { font-size: 19.5vw; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .ask-big { font-size: 11vw; margin-bottom: 30svh; }
  blockquote { margin-top: 12px; font-size: 16px; }
  .fix { margin-top: 10px; font-size: 15px; }
  .lead { font-size: 18px; }
  .rows li { padding-block: 8px; font-size: 15px; }
  .flow span { display: none; }
  .long .in { padding-block: 14vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #labels span, .js .step, .js .step.on, .js .end-copy, .flow li, .menu a::after { transition: none; }
  #labels span.ping { animation: none; opacity: 1; }
}