/* Tweakly waitlist. Sizes follow the Figma mockup 1:1 (1 Figma unit = 1 CSS px). */

@font-face {
  font-family: 'Instrument Sans';
  src: url(fonts/instrument-sans.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url(fonts/geist.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(fonts/plus-jakarta-sans.woff2) format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.73);
  --placeholder: rgba(0, 0, 0, 0.62);
  --line: rgba(0, 0, 0, 0.76);
  --leaf: #1f6f54;
  --brick: #9f3a22;
  --sun: 251, 207, 0;
  /* Scale of the background drawing (columns and crab), smaller on phones */
  --s: 1;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.112px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* One screen, no scroll: the app preview is cut by the bottom of the window, like on the mockup.
   Only a window too short for the form scrolls, just enough to reach it. */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overflow: clip;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
}

/* ---------- Background: dotted columns and the crab ---------- */

.dots {
  position: absolute;
  left: 0;
  top: calc(-45px * var(--s));
  width: 100%;
  height: calc(540px * var(--s));
  display: block;
  pointer-events: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 33px;
  margin: 20px 3px 0 0;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
}
.tag svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: rgb(114, 253, 78);
}

.wordmark {
  height: 44px;
  margin: 166px 0 0;
  font-family: 'Plus Jakarta Sans', 'Geist', Arial, sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 0;
  text-shadow: 0 3px 2.5px rgba(0, 0, 0, 0.2);
}

h1 {
  max-width: 724px;
  margin: 44.4px 0 0;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 73.8px;
  letter-spacing: -2.55px;
}

.accent {
  background-image: linear-gradient(90deg, rgb(40, 222, 111) 10%, rgb(28, 185, 91) 64%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lead {
  margin: 2.8px 0 0;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.03px;
}

.note {
  margin: 42px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.09px;
}

/* ---------- Sign-up form ---------- */

.signup {
  position: relative;
  width: 723px;
  max-width: 100%;
  margin-top: 27px;
}

.signup-row {
  display: flex;
  gap: 10px;
}
.signup-row[hidden] {
  display: none;
}

.field {
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0 13px 2px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  letter-spacing: -0.112px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.field::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.field:hover {
  border-color: #000;
}
.field:focus-visible {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.22);
}
.field[aria-invalid='true'] {
  border-color: var(--brick);
}
.field[aria-invalid='true']:focus-visible {
  box-shadow: 0 0 0 3px rgba(159, 58, 34, 0.18);
}
.field-name {
  flex: 0 0 200px;
  width: 200px;
}
.field-email {
  flex: 0 0 260.5px;
  width: 260.5px;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Main button, after trendtrack.io: on hover the label rolls up (its copy waits just below),
   the arrow slides out to the right while a second one comes in from the left, the background
   tightens by 2 px. */
.cta {
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin: 0;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: 18px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 22.4px;
  letter-spacing: -0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.signup-row .cta {
  flex: 0 0 241px;
  width: 241px;
  margin-left: 1.5px;
}
.cta-wide {
  width: 100%;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #d6be02 29%, #d7ad20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 8px rgba(255, 255, 255, 0.44),
    0 16px 32px rgba(var(--sun), 0.1),
    0 8px 16px rgba(var(--sun), 0.1),
    0 4px 8px rgba(var(--sun), 0.1),
    0 0 10px rgba(var(--sun), 0.1),
    0 0 50px rgba(var(--sun), 0.14);
  transition:
    inset 450ms var(--ease),
    scale 450ms var(--ease);
}
.cta:active .cta-bg {
  scale: 0.95;
}
.cta-label {
  flex: 1;
  height: 22.4px;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 22.4px 0 currentColor;
}
.cta-roll {
  display: inline-block;
  transition: transform 450ms var(--ease);
}
.cta-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
}
.cta-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  transition: transform 450ms var(--ease);
}
.cta-arrow + .cta-arrow {
  transform: translateX(calc(-100% - 10px));
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover .cta-bg {
    inset: 2px;
  }
  .cta:hover .cta-roll {
    transform: translateY(-100%);
  }
  .cta:hover .cta-arrow {
    transform: translateX(calc(100% + 10px));
  }
  .cta:hover .cta-arrow + .cta-arrow {
    transform: translateX(0);
  }
}
.cta-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
[aria-busy='true'] .cta {
  cursor: progress;
}
[aria-busy='true'] .cta-arrow {
  display: none;
}
[aria-busy='true'] .cta-spinner {
  display: block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.signup-error {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--brick);
  font-size: 15px;
  line-height: 20px;
  animation: rise 250ms ease-out both;
}
.signup-error[hidden] {
  display: none;
}
.signup-error svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.signup-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid rgba(31, 111, 84, 0.35);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  line-height: 24px;
  animation: rise 400ms ease-out both;
}
.signup-done[hidden] {
  display: none;
}
.signup-done svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--leaf);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- App preview ---------- */

/* Takes whatever height is left under the form, possibly none: the preview is cut there. */
.showcase {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 0 16px;
}

/* One yellow shape (a band at the bottom + a halo around the preview), blurred as a whole:
   where the two meet the yellow does not get darker, like on the mockup. */
.glow {
  --w: min(925px, 100cqw - 32px);
  position: absolute;
  inset: 0;
  container-type: inline-size;
  opacity: 0.55;
  filter: blur(23.5px);
  pointer-events: none;
}
.glow-band {
  position: absolute;
  top: 128px;
  left: -80px;
  right: -80px;
  bottom: -80px;
  background: linear-gradient(to bottom, rgba(var(--sun), 0) 0, rgb(var(--sun)) 145px);
}
.glow-halo {
  position: absolute;
  top: 19px;
  left: 50%;
  width: calc(var(--w) + 94px);
  height: calc(var(--w) * 0.62486 + 94px);
  border-radius: 61px;
  background: rgb(var(--sun));
  transform: translateX(-50%);
}

.preview {
  position: relative;
  flex: none;
  width: 925px;
  max-width: 100%;
  margin: 44px 0 0;
  border-radius: 14px;
}
.preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ---------- Popup after the form: two questions (Tweakly palette) ---------- */

.survey {
  --t-bg: #eef2ea;
  --t-card: #f8faf5;
  --t-text: #10231b;
  --t-muted: #4b5f54;
  --t-shell: #cfe3d6;
  --t-line: #c5d0c2;
  width: min(480px, calc(100vw - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--t-line);
  border-radius: 24px;
  background: var(--t-card);
  box-shadow: 0 28px 70px rgba(16, 35, 27, 0.16), 0 2px 6px rgba(16, 35, 27, 0.05);
  color: var(--t-text);
}
.survey::backdrop {
  background: rgba(16, 35, 27, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.survey[open] {
  animation: survey-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.survey[open]::backdrop {
  animation: fade-in 300ms ease-out both;
}
.survey.is-closing {
  animation: survey-out 180ms ease-in both;
}
.survey.is-closing::backdrop {
  animation: fade-out 180ms ease-in both;
}
@keyframes survey-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes survey-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}

.survey-form {
  position: relative;
  padding: 30px 32px 24px;
}
.survey-step[hidden] {
  display: none;
}

.survey-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--t-muted);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.survey-close svg {
  width: 20px;
  height: 20px;
}
.survey-close:hover {
  background: var(--t-bg);
  color: var(--t-text);
}

.survey-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The mascot drawings are not transparent: they sit in a rounded tile. */
.survey-mascot {
  display: block;
  width: 88px;
  height: 88px;
  border: 1px solid var(--t-line);
  border-radius: 24px;
  background: #e9f2e5;
}
.survey-title {
  margin: 16px 0 0;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.9px;
}
.survey-title:focus {
  outline: none;
}
.survey-lead {
  margin: 6px 0 0;
  color: var(--t-muted);
  font-size: 16px;
  line-height: 22px;
}

/* Choice lists */
.pick {
  position: relative;
  margin-top: 22px;
  text-align: left;
}
.pick + .pick {
  margin-top: 18px;
}
.pick-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.pick-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: #fff;
  color: var(--t-text);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.pick-button:hover {
  border-color: #9fb4a6;
}
.pick-button:focus-visible,
.pick-button[aria-expanded='true'] {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.18);
}
.pick[data-invalid] .pick-button {
  border-color: var(--brick);
}
.pick-current {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--t-bg);
  color: var(--leaf);
}
.pick-current:empty::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-line);
}
.pick-current svg,
.pick-icon svg {
  width: 20px;
  height: 20px;
}
.pick-value {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.pick-value.is-placeholder {
  color: var(--t-muted);
  font-weight: 400;
}
.pick-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--t-muted);
  transition: transform 200ms ease-out;
}
.pick-button[aria-expanded='true'] .pick-chevron {
  transform: rotate(180deg);
}

.pick-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--t-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 35, 27, 0.14);
  animation: menu-in 160ms ease-out both;
}
.pick-menu[hidden] {
  display: none;
}
/* Not enough room under the list: it opens upwards, over its label */
.pick-menu.is-up {
  top: auto;
  bottom: calc(100% - 22px);
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.pick-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.pick-option:hover,
.pick-option:focus {
  outline: none;
  background: rgba(207, 227, 214, 0.55);
}
.pick-option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--leaf);
}
.pick-option[aria-selected='true'] {
  background: var(--t-shell);
}
.pick-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--t-bg);
  color: var(--leaf);
}
.pick-option[aria-selected='true'] .pick-icon {
  background: #fff;
}
.pick-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.pick-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.pick-desc {
  margin-top: 1px;
  color: var(--t-muted);
  font-size: 13px;
  line-height: 18px;
}
.pick-check {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--leaf);
  opacity: 0;
}
.pick-option[aria-selected='true'] .pick-check {
  opacity: 1;
}

.pick-other {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: #fff;
  color: var(--t-text);
  font: inherit;
  font-size: 16px;
  animation: rise 220ms ease-out both;
}
.pick-other[hidden] {
  display: none;
}
.pick-other::placeholder {
  color: var(--t-muted);
  opacity: 1;
}
.pick-other:focus-visible {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.18);
}

.survey-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--brick);
  font-size: 14px;
  line-height: 20px;
  animation: rise 220ms ease-out both;
}
.survey-error[hidden] {
  display: none;
}
.survey-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.survey .cta-wide {
  margin-top: 22px;
}
.survey-legal {
  margin: 12px 0 0;
  color: var(--t-muted);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.survey-ok {
  display: block;
  min-width: 160px;
  height: 48px;
  margin: 24px auto 2px;
  padding: 0 22px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: #fff;
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.survey-ok:hover {
  border-color: #9fb4a6;
  background: var(--t-bg);
}
[data-step='done'] .survey-mascot {
  animation: rise 400ms ease-out both;
}

@media (max-width: 560px) {
  .survey-form {
    padding: 24px 20px 20px;
  }
  .survey-mascot {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }
  .survey-title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Short windows and phones: the popup scrolls and the lists open inside it */
@media (max-height: 700px), (max-width: 560px) {
  .survey {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pick-menu,
  .pick-menu.is-up {
    position: static;
    margin-top: 6px;
    box-shadow: none;
  }
}

/* ---------- Phones and small tablets ---------- */

.wide-only {
  display: inline;
}

@media (max-width: 780px) {
  :root {
    --s: 0.82;
  }
  .wordmark {
    /* Centred on the crab, which scales from the top of the page */
    margin-top: calc(219px * var(--s) - 53px);
    height: calc(44px * var(--s));
    font-size: calc(35px * var(--s));
    line-height: calc(44px * var(--s));
  }
  h1 {
    margin-top: 32px;
    font-size: 44px;
    line-height: 1.18;
    letter-spacing: -1.8px;
  }
  .lead {
    margin-top: 12px;
  }
  .signup {
    width: 100%;
    max-width: 460px;
  }
  .signup-row {
    flex-wrap: wrap;
  }
  .field-name,
  .field-email {
    flex: 1 1 100%;
    width: 100%;
  }
  .signup-row .cta {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
  .signup-error {
    position: static;
    margin-top: 12px;
  }
  .note {
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  :root {
    --s: 0.7;
  }
  .tag {
    margin-top: 16px;
  }
  .wordmark {
    margin-top: calc(219px * var(--s) - 49px);
  }
  h1 {
    margin-top: 26px;
    font-size: 36px;
    letter-spacing: -1.4px;
  }
  .lead {
    font-size: 17px;
    line-height: 24px;
  }
  .wide-only {
    display: none;
  }
  .note {
    font-size: 16px;
    line-height: 22px;
  }
  .preview {
    margin-top: 36px;
  }
  .preview,
  .preview img {
    border-radius: 10px;
  }
  .glow {
    filter: blur(16px);
  }
  .glow-band {
    top: 76px;
  }
  .glow-halo {
    top: 18px;
    width: calc(var(--w) + 56px);
    height: calc(var(--w) * 0.62486 + 56px);
    border-radius: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .cta-spinner {
    animation: spin 1.4s linear infinite !important;
  }
}