/* MonsterLink — landing page */

.nav {
  display: flex; align-items: center; gap: 16px;
  padding: 16px clamp(16px, 5vw, 48px);
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 247, 240, .9); backdrop-filter: blur(12px);
}
.nav .spacer { flex: 1; }
.nav-login { font-weight: 700; text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.nav-login:hover { background: var(--paper-2); }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 4vw, 60px); align-items: center;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 5vw, 48px) clamp(40px, 6vw, 80px);
  max-width: 1260px; margin: 0 auto;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  padding: 7px 15px; font-weight: 800; font-size: 13px; box-shadow: 3px 3px 0 var(--slime);
  margin-bottom: 20px;
}
.hero > div > h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em;
}
.hero > div > h1 .squig { position: relative; white-space: nowrap; }
.hero > div > h1 .squig::after {
  pointer-events: none;
  content: ''; position: absolute; left: 2%; right: 2%; bottom: 4px; height: 14px;
  background: var(--slime); z-index: -1; border-radius: 4px; transform: rotate(-1deg);
}
.hero .sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); margin: 18px 0 26px; max-width: 54ch; }

.claim { display: flex; gap: 10px; max-width: 480px; }
.claim .userinput { flex: 1; background: #fff; border-width: 2px; border-color: var(--ink); border-radius: 999px; }
.claim .userinput .prefix { border-right: 0; background: transparent; padding-right: 2px; color: var(--ink); }
.claim .userinput input { padding: 14px 14px 14px 2px; font-weight: 600; }
.claim .btn-slime { flex: none; }
.claim-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* Phone composition */
.hero-phones { position: relative; height: 640px; display: flex; justify-content: center; }
.hero-phones .phone { position: absolute; transition: transform .5s cubic-bezier(.2, .8, .25, 1.15), box-shadow .5s ease, opacity .3s ease; }
.hero-phones .phone-a { transform: rotate(-5deg); left: 4%; top: 26px; z-index: 2; animation: floaty 7s ease-in-out infinite; }
.hero-phones .phone-b { transform: rotate(6deg) scale(.9); right: 2%; top: 76px; z-index: 1; opacity: .96; animation: floaty 8s 1.2s ease-in-out infinite; }
/* Hovering the back phone brings it forward past the front one */
.hero-phones .phone-b:hover {
  transform: rotate(1.5deg) scale(1.04) translate(-26px, -10px);
  z-index: 3; opacity: 1;
  box-shadow: 0 42px 90px rgba(25, 22, 33, .34);
}
.hero-phones:has(.phone-b:hover) .phone-a { transform: rotate(-8deg) scale(.94) translateX(-14px); }
@keyframes floaty { 50% { translate: 0 -12px; } }

/* Block chip strip */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 0 18px 8px; max-width: 900px; margin: 0 auto; }
.chips span {
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 7px; align-items: center;
}

/* Bento */
.section { padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 48px); max-width: 1160px; margin: 0 auto; }
.section-h {
  font-family: var(--font-display); font-weight: 800; text-align: center;
  font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.02em; margin-bottom: 8px;
}
.section-sub { text-align: center; color: var(--muted); margin-bottom: 36px; }
.pricing .section-sub { max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 12px; }
.pricing .pricing-beta { font-size: 14px; opacity: 0.66; margin-bottom: 0; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bcard {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 22px; box-shadow: 5px 5px 0 rgba(25, 22, 33, .1);
  transition: transform .18s, box-shadow .18s;
}
.bcard:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--slime); }
.bcard h3 { font-family: var(--font-display); font-size: 19px; margin: 14px 0 6px; letter-spacing: -0.01em; }
.bcard p { color: var(--muted); font-size: 14.5px; }
.bart { height: 84px; display: flex; align-items: center; gap: 8px; }
.bart-icons { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; color: var(--ink); }
.bart-icons svg { display: block; }
.bart-bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; }
.bart-bars i { width: 17px; border-radius: 6px 6px 2px 2px; background: var(--slime); border: 2px solid var(--ink); display: block; }
.bart-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.bart-swatches i { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--ink); display: block; }
.bart-pill { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 13px; }
.bart-form { flex: 1; display: flex; gap: 8px; }
.bart-form i { display: block; flex: 1; height: 40px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
.bart-form b { display: grid; place-items: center; padding: 0 16px; height: 40px; background: var(--ink); color: var(--slime); border-radius: 12px; font-size: 13px; }
.bart-phone { width: 46px; height: 74px; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(160deg, var(--slime), #fff); }

/* Device panel: the same page on a laptop and a phone. The laptop screen
   renders a full 1180px-wide page host (so the container query fires and the
   desktop rail appears) and scales it down to fit the frame. The phone sits
   in front, straddling the laptop's right edge. */
.devices-row { position: relative; width: min(950px, 100%); margin: 0 auto; min-height: 680px; }
.mac {
  width: min(700px, 100%);
  border: 3px solid var(--ink); border-radius: 16px; overflow: hidden;
  background: var(--ink); box-shadow: 0 26px 60px rgba(25, 22, 33, .22);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.mac-bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #262232; }
.mac-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); flex: none; }
.mac-bar em {
  flex: 1; text-align: center; font-style: normal; font-size: 11.5px;
  color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden;
}
.mac-screen { height: 580px; overflow: hidden; background: var(--paper); }
.mac-scale { width: 1180px; transform: scale(var(--mac-scale, .59)); transform-origin: 0 0; }
.devices .phone {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 2; box-shadow: 0 30px 70px rgba(25, 22, 33, .3);
}

@media (max-width: 900px) {
  .devices-row { min-height: 0; }
  .mac { position: static; transform: none; width: 100%; }
  .mac-screen { height: 300px; }
  .devices .phone { display: none; }
}

/* Showcase carousel: horizontal row of phones, each screen scrolls on its own */
.showcase { padding: clamp(40px, 6vw, 80px) 0; }
.showcase .section-h,
.showcase .section-sub { padding: 0 clamp(16px, 5vw, 48px); }
.showcase .section-sub { margin-bottom: 26px; }
.showcase-wrap { position: relative; }
.showcase-track {
  display: flex; gap: 22px;
  overflow-x: auto;
  padding: 12px clamp(16px, 5vw, 48px) 26px;
  scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track .phone {
  flex: 0 0 auto;
  width: 264px; height: 548px;
  border-radius: 38px;
}
.showcase-track .phone-screen { border-radius: 31px; }
/* edge fades hint that the row keeps going */
.showcase-wrap::before,
.showcase-wrap::after {
  pointer-events: none;
  content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 3; pointer-events: none;
}
.showcase-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.showcase-wrap::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.showcase-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; z-index: 5; cursor: pointer;
  background: #fff; border: 2px solid var(--ink); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.showcase-arrow:hover { box-shadow: 0 5px 0 var(--ink); }
.showcase-arrow:active { transform: translateY(-50%) translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.showcase-arrow.prev { left: 12px; }
.showcase-arrow.next { right: 12px; }
@media (max-width: 760px) { .showcase-arrow, .showcase-wrap::before, .showcase-wrap::after { display: none; } }

/* Steps */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.how div { text-align: center; padding: 10px 16px; }
.how div::before {
  pointer-events: none;
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px;
  background: var(--slime); border: 2.5px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
}
.how h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 5px; }
.how p { color: var(--muted); font-size: 14.5px; }

/* CTA band */
.cta {
  margin: 0 clamp(10px, 3vw, 32px) 32px; padding: clamp(40px, 6vw, 70px) 24px;
  background: var(--ink); border-radius: 32px; text-align: center; color: var(--paper);
  position: relative; overflow: hidden;
}
.cta::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 45% 55% 52% 48% / 55% 44% 56% 45%;
  background: rgba(200, 240, 76, .14); top: -220px; right: -140px;
  /* It sat directly over the username field. On an iPhone SE none of 561
     sampled points reached the input and four real taps left focus on body,
     so the second claim box was simply dead. It also covered the top 27px of
     the Claim it button. Decoration must never take a tap. */
  pointer-events: none;
}
.cta h2 { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -0.02em; margin-bottom: 22px; }
.cta .claim { margin: 0 auto; }
.cta .userinput { border-color: transparent; }
.cta .claim-note { color: rgba(250, 247, 240, .65); }

/* Footer */
.foot { padding: 26px clamp(16px, 5vw, 48px) 44px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
.foot a { font-weight: 700; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-phones { height: auto; position: static; flex-wrap: wrap; gap: 18px; margin-top: 10px; }
  .hero-phones .phone { position: static; height: 560px; width: 290px; }
  .hero-phones .phone-b { display: none; }
  .bento { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; gap: 26px; }
  .claim { flex-direction: column; }
}

/* Phones. At 375px the nav's children measured 290px of content inside 375px of
   viewport once gaps and padding were counted, so both controls were wrapping:
   "Log in" came out 59px wide and 68px tall, "Get started" 86x61. Nothing here
   changes the design above 480px. */
@media (max-width: 480px) {
  .nav { gap: 8px; padding: 12px 14px; }
  .nav .logo-word { font-size: 17px; }
  .nav .logo { gap: 7px; }
  .nav .logo-mark { width: 26px; height: 26px; }
  /* The whole cause: these were allowed to shrink under their own text. */
  .nav-login, .nav .btn { white-space: nowrap; flex: none; }
  .nav-login { padding: 10px 10px; }
  .nav .btn-sm { padding: 8px 13px; }
}

/* The hero and laptop mockups are decoration. They had overflow-y:auto with
   618px of hidden content, so a finger anywhere on one scrolled the prop and
   left the page still. Measured: a 200px drag moved the mockup 239px and the
   document 0px; the same drag 8px to its left moved the document 241px. */
.hero-phones .phone-screen,
.devices .phone-screen,
.devices .mac-screen {
  overflow: hidden;
  touch-action: pan-y;
}