/*
 * Palette reused from the Raiseboard landing (components/new-landing/ui.css + hero.css), unchanged:
 * five greens base #06130F, shadow #0A2E21, deep #0F5A3C, core #17C97E, bright #4ADE80; headline #F4F7F6;
 * warm white 250 246 238; hero background rgb(0 13 9); hero glow colours as in hero.css.
 */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations'), url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Headline serif. Closest free match to Tiempos Headline Light (a paid font). To use a licensed font, put its file in /fonts and change this one line. */
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  /* Interface font: the platform's own (San Francisco on Apple devices), per Apple's guidance to default to the system font. */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --base: #06130f;
  --shadow: #0a2e21;
  --deep: #0f5a3c;
  --core: #17c97e;
  --bright: #4ade80;
  --head: #f4f7f6;
  --warm: 250 246 238;
  --bg: rgb(0 13 9);
  --bar: #0a2e21; /* the colour the browser's top and bottom bars take (see theme-color in index.html); the page edges fade into it */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* critically damped feel: settles without bounce */
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.4); /* the mirror of ease-out, for exits */
}

*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  background: var(--bar); /* the bars' colour: so a bar tinted from the page background matches, and nothing ever shows white */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the page itself never scrolls or bounces: the stage below fills exactly the visible area */
  overscroll-behavior: none;
  background: var(--bar);
  color: var(--head);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:where(h1, h2, p) { margin: 0; }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; }

/* ---------- Silk light (WebGL, silk.js). The aurora divs below are the fallback if WebGL is unavailable. ---------- */
.silk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1800ms ease-out; background: var(--bg); }
.silk.on { opacity: 1; }
.gl .aurora { display: none; }

/* ---------- Aurora (fallback): soft radial glows from the landing's greens, drifting slowly (transform only) ---------- */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: var(--bg); }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.a1 { /* big deep-green wash across the top */
  width: 150vmax; height: 80vmax; left: -25vmax; top: -48vmax;
  background: radial-gradient(closest-side, rgb(12 114 73 / 0.85), rgb(12 114 73 / 0.5) 40%, rgb(12 114 73 / 0.12) 75%, transparent);
  animation: drift1 26s ease-in-out infinite alternate;
}
.a2 { /* bright mint glow, left */
  width: 90vmax; height: 90vmax; left: -48vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgb(31 255 170 / 0.24), rgb(31 255 170 / 0.1) 50%, transparent);
  animation: drift2 21s ease-in-out infinite alternate;
}
.a3 { /* core-green ribbon, lower right */
  width: 130vmax; height: 40vmax; right: -50vmax; bottom: -16vmax;
  background: radial-gradient(closest-side, rgb(23 255 158 / 0.26), rgb(23 255 158 / 0.1) 55%, transparent);
  transform: rotate(-12deg);
  animation: drift3 30s ease-in-out infinite alternate;
}
.a4 { /* low teal haze */
  width: 100vmax; height: 36vmax; left: -10vmax; bottom: -22vmax;
  background: radial-gradient(closest-side, rgb(42 255 189 / 0.14), transparent);
  animation: drift2 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { from { transform: translate3d(-4vmax, 0, 0) scale(1); } to { transform: translate3d(6vmax, 5vmax, 0) scale(1.1); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 8vmax, 0) scale(1.15); } }
@keyframes drift3 { from { transform: translate3d(0, 0, 0) rotate(-12deg); } to { transform: translate3d(-16vmax, -6vmax, 0) rotate(-6deg); } }
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; } /* image set by app.js at the screen's real pixel density */

/*
 * Seamless edges on phones. Safari, Instagram and other in-app browsers paint their own bars above and below the page.
 * The top bar takes the theme-color and the bottom bar is frosted glass over whatever is at the page's bottom edge, so a
 * page whose edges are a different colour looks sliced. These two fixed fades bring both edges to the same deep green
 * as the bars, so page and bars read as one surface. Only on touch screens: a desktop has no such bars.
 */
.edge { display: none; }
@media (pointer: coarse) {
  .edge { display: block; position: fixed; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .edge-top {
    top: 0;
    height: calc(env(safe-area-inset-top, 0px) + 120px);
    background: linear-gradient(to bottom, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%);
  }
  .edge-bottom {
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 140px);
    background: linear-gradient(to top, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%);
  }
}

/* ---------- Page ---------- */
.stage {
  position: fixed; /* fills exactly what is visible, whatever the browser says "100vh" is (in-app browsers get this wrong) */
  inset: 0;
  z-index: 2;
  overflow-y: auto; /* only matters on very short screens; the document itself never scrolls */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* sits a touch above the middle, where the eye expects it, and clear of the notch and home bar */
  padding: max(28px, env(safe-area-inset-top)) 20px max(72px, calc(env(safe-area-inset-bottom) + 52px));
  text-align: center;
  transition: transform 420ms var(--ease-out);
}
/* While the panel is open the page eases back, like a sheet in iOS: the task is in front, the page is behind. */
body.panel-open .stage { transform: scale(0.97); }
.chip {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em; /* small text: tracked out */
  text-transform: uppercase;
  color: rgb(var(--warm) / 0.72);
}
.name {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(2.125rem, 9vw, 2.875rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--head);
}
.headline {
  margin-top: 28px;
  max-width: 11.5em;
  font-family: var(--serif);
  font-size: clamp(2.875rem, 15.5vw, 6rem);
  line-height: 1.03;
  font-weight: 300;
  letter-spacing: -0.028em; /* large display text: tracked in */
  text-wrap: balance;
  color: var(--head);
}
.play { position: relative; margin-top: 44px; }

/* The entrance */
.chip, .name, .headline, .play { animation: rise 800ms var(--ease-out) both; }
.name { animation-delay: 80ms; }
.headline { animation-delay: 160ms; }
.play { animation-delay: 280ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- The button: a translucent glass capsule. Feedback is instant on press, never waiting for release. ---------- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 2.5rem;
  border: 1px solid rgb(120 255 190 / 0.5);
  border-top-color: rgb(220 255 235 / 0.85); /* bright top edge: light catching the material */
  border-radius: 999px;
  background:
    linear-gradient(rgb(90 230 170 / 0.2), rgb(90 230 170 / 0.2)),
    linear-gradient(180deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.1));
  color: #fff;
  font: 600 1.1875rem/1 var(--sans);
  letter-spacing: 0; /* body-size text: neutral tracking */
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* a soft green halo ties the button to the light behind it, and is what makes it the first thing the eye lands on */
  box-shadow: 0 0 22px rgb(74 222 128 / 0.55), 0 0 70px rgb(23 201 126 / 0.45), 0 14px 36px -10px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.5);
  transition: transform 100ms ease-out, background-color 160ms ease-out, box-shadow 200ms ease-out;
}
.pill:hover { background-color: rgb(255 255 255 / 0.08); box-shadow: 0 0 26px rgb(74 222 128 / 0.65), 0 0 84px rgb(23 201 126 / 0.5), 0 14px 36px -10px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.55); }
.pill:active { transform: scale(0.97); }
.pill:focus-visible { outline-offset: 5px; }

/* ---------- Signup panel (glass) ---------- */
.panel {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 28px 24px 24px;
  border: 1px solid rgb(220 255 238 / 0.3);
  border-radius: 22px;
  color: var(--head);
  background:
    linear-gradient(170deg, rgb(230 255 240 / 0.14) 0%, rgb(230 255 240 / 0.04) 30%, rgb(230 255 240 / 0) 60%),
    linear-gradient(rgb(90 230 170 / 0.06), rgb(90 230 170 / 0.06)),
    linear-gradient(rgb(6 19 15 / 0.78), rgb(6 19 15 / 0.78)); /* a darker scrim than the landing's .27 so text stays readable */
  border-top-color: rgb(255 255 255 / 0.45); /* bright top edge */
  box-shadow: 0 0 14px rgb(23 201 126 / 0.4), inset 0 0 9px rgb(23 201 126 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.25), 0 30px 60px -20px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  overflow: auto;
  transform-origin: var(--ox, 50%) var(--oy, 50%); /* grows out of the button that opened it, and returns to it */
}
/*
 * The panel materialises (scale and blur arrive together) and leaves by the same path, a little quicker.
 * These are transitions, not keyframes, so they always start from what is on screen and can be reversed mid-flight.
 */
.panel {
  opacity: 0;
  transform: scale(0.86);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: opacity 260ms var(--ease-in), transform 260ms var(--ease-in), backdrop-filter 260ms var(--ease-in), -webkit-backdrop-filter 260ms var(--ease-in);
}
.panel.shown {
  opacity: 1;
  transform: none;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition-duration: 420ms;
  transition-timing-function: var(--ease-out);
}
.panel::backdrop {
  background: rgb(0 13 9 / 0.62);
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 260ms var(--ease-in);
}
/* On phones the dimming layer's centre darkens the page to focus on the panel, but its top and bottom edges fade to the bar
   colour (the same fades as .edge), so the page still meets the browser bars with no seam while the panel is open. */
@media (pointer: coarse) {
  .panel::backdrop {
    --edge-top: calc(env(safe-area-inset-top, 0px) + 120px);
    --edge-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
    background:
      linear-gradient(to bottom, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%) top / 100% var(--edge-top) no-repeat,
      linear-gradient(to top, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%) bottom / 100% var(--edge-bottom) no-repeat,
      rgb(0 13 9 / 0.62);
  }
}
.panel.shown::backdrop { opacity: 1; transition-duration: 420ms; transition-timing-function: var(--ease-out); }
@media (max-width: 520px) {
  .panel { margin: 12vh auto auto; } /* sits high so the on-screen keyboard doesn't cover it */
}
.panel-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgb(var(--warm) / 0.85);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.panel-x:active { transform: scale(0.94); }
.panel-x:hover { background: rgb(74 222 128 / 0.12); color: var(--head); }
.panel-title { padding-right: 36px; font-family: var(--serif); font-size: 2rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.field-label { display: block; margin-top: 20px; font-size: 0.9375rem; font-weight: 600; }
.field {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgb(220 255 238 / 0.4);
  border-radius: 14px;
  background: rgb(6 19 15 / 0.75);
  color: var(--head);
  font: 400 1.0625rem/1 var(--sans); /* 17px: 16px or more so iOS doesn't zoom */
}
.field::placeholder { color: rgb(var(--warm) / 0.5); }
.field:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; border-color: var(--bright); }
.field[aria-invalid='true'] { border-color: #ff8a8a; }
.note { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: rgb(var(--warm) / 0.78); }
.error { margin-top: 10px; font-size: 0.875rem; line-height: 1.45; font-weight: 600; color: #ffb3b3; }
.error[hidden] { display: none; }
.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin-top: 20px;
  border: 1px solid var(--bright);
  border-radius: 14px;
  background: var(--core);
  color: var(--base);
  font: 600 1.0625rem/1 var(--sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 14px rgb(23 201 126 / 0.55);
  transition: transform 100ms ease-out, box-shadow 160ms ease-out;
}
.submit:active { transform: scale(0.98); }
.submit:hover { box-shadow: 0 0 18px rgb(23 201 126 / 0.8); }
.submit[aria-disabled='true'] { opacity: 0.7; cursor: progress; }
.submit-quiet { background: transparent; color: var(--head); border-color: rgb(74 222 128 / 0.6); box-shadow: none; }
.done { padding: 8px 40px 0 0; outline: none; }
.done-message { font-family: var(--serif); font-size: 1.5625rem; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.done-sign { margin-top: 14px; font-family: var(--serif); font-size: 1.5rem; color: var(--bright); font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.noscript { margin-top: 24px; color: rgb(var(--warm) / 0.78); }

/* Short screens in landscape (phone on its side): top-align and shrink so everything stays reachable. Portrait stays centred
   however short the visible area is (in-app browsers with tall toolbars can leave very little height). */
@media (max-height: 520px) and (orientation: landscape) {
  .stage { justify-content: flex-start; padding-bottom: 60px; }
  .headline { font-size: clamp(1.875rem, 7vw, 3.25rem); }
}

/* In-app browsers (Instagram and similar) are slower and more fragile: drop the blur behind the button, which is the costliest effect there. */
.lite .pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(rgb(90 230 170 / 0.22), rgb(90 230 170 / 0.22)),
    linear-gradient(180deg, rgb(70 110 92 / 0.78), rgb(36 72 56 / 0.7));
}

/* Reduced motion: no drifting, no entrance, no scale or blur. The panel still cross-fades, so there is feedback, just a gentle one. */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .chip, .name, .headline, .play { animation: none !important; }
  .panel { transform: none; transition: opacity 160ms ease-out; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  .panel.shown { transition-duration: 200ms; transition-timing-function: ease-out; }
  .panel::backdrop { transition-duration: 160ms; transition-timing-function: ease-out; }
  .panel.shown::backdrop { transition-duration: 200ms; }
  .silk { transition: none; }
  body.panel-open .stage { transform: none; }
  .stage, .pill { transition: none; }
  .pill:active, .submit:active, .panel-x:active { transform: none; }
}

/* Reduced transparency: frostier, solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  .pill { background: rgb(22 62 46); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel { background: rgb(8 24 18); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(0 13 9 / 0.85); }
}
@media (prefers-reduced-transparency: reduce) and (pointer: coarse) {
  .panel::backdrop {
    background:
      linear-gradient(to bottom, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%) top / 100% var(--edge-top) no-repeat,
      linear-gradient(to top, var(--bar) 0%, rgb(10 46 33 / 0.86) 22%, rgb(10 46 33 / 0.55) 50%, rgb(10 46 33 / 0.22) 78%, rgb(10 46 33 / 0) 100%) bottom / 100% var(--edge-bottom) no-repeat,
      rgb(0 13 9 / 0.85);
  }
}

/* Increased contrast: near-solid surfaces with a defined edge. */
@media (prefers-contrast: more) {
  .pill { background: rgb(22 62 46); border-color: #fff; }
  .panel { background: rgb(6 19 15); border-color: #fff; }
  .field { border-color: #fff; }
  .note, .chip { color: var(--head); }
}