/* oiscroll.com: what the canvas boards don't say on their own. */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space_grotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F6F4EF; color: #1B1F2A; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #2F7D74; }
button { font-family: inherit; cursor: pointer; }

/* Desktop board above 900px, phone board below. Both stretch to the screen. */
.layout-m { display: none; }
@media (max-width: 900px) { .layout-d { display: none; } .layout-m { display: block; } }
.layout-d > div, .layout-m > div { width: 100% !important; }
.layout-d section, .layout-d footer { padding-left: max(80px, calc((100% - 1120px) / 2)) !important; padding-right: max(80px, calc((100% - 1120px) / 2)) !important; }
@media (max-width: 1100px) { .layout-d section, .layout-d footer { padding-left: 48px !important; padding-right: 48px !important; } }

/* Animations wait until their section scrolls into view. */
section:not(.in), section:not(.in) * { animation-play-state: paused !important; }

/* The mascot blinks; on desktop its eyes follow the cursor (site.js). */
.oi-eye { transform-box: fill-box; transform-origin: center; animation: oi-blink 6s infinite; }
@keyframes oi-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.oi-eyes { transition: transform .15s ease-out; }

/* Waiting list: over whatever you're looking at. */
.wl[hidden], .wl-done[hidden], .wl-form[hidden], .wl-error[hidden] { display: none !important; }
.wl > div:first-child { position: fixed !important; }
.wl [role=dialog] { position: fixed !important; top: 50% !important; transform: translate(-50%, -50%) !important; max-width: calc(100vw - 32px); max-height: 90vh; overflow: auto; }

/* Privacy and terms. */
.doc > div { width: 100% !important; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px) {
  .doc header, .doc article { padding-left: 20px !important; padding-right: 20px !important; }
  .doc h1 { font-size: 36px !important; }
  .doc nav { columns: 1 !important; }
  .doc table { display: block; overflow-x: auto; font-size: 14px !important; }
  .doc td, .doc th { min-width: 140px; }
}

/* Small pages: join, sign-in, delete account, 404. */
.small { max-width: 440px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.small h1 { margin: 8px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 32px; line-height: 1.15; }
.small p { margin: 0; font-size: 16px; line-height: 1.55; color: #3D4250; }
.wordmark { align-self: flex-start; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; color: #1B1F2A; text-decoration: none; letter-spacing: -1px; }
.wordmark span { color: #FF6B4A; }
.card { width: 100%; box-sizing: border-box; background: #FFFFFF; border-radius: 20px; padding: 18px; }
.code { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: 4px; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 54px; border-radius: 999px; background: #1B1F2A; color: #F6F4EF; font-size: 16px; font-weight: 700; text-decoration: none; border: 0; }
.btn.alt { background: transparent; color: #1B1F2A; border: 1.5px solid #E4DFD4; }
.fine { font-size: 13px !important; }
.list { text-align: left; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #3D4250; }
.wl-form, .wl-done { display: flex; flex-direction: column; gap: 14px; }
.wl-form > div:first-child { padding-right: 36px; }