/* NSM site: loud early-2000s messenger energy.
   Electric blue, bubblegum pink, highlighter yellow; hard outlines and hard
   shadows like stickers on a school planner. Archivo (ultra-wide) shouts;
   Verdana, the web font of the MSN era, does the talking. */

:root {
  --blue: #0038ff;
  --navy: #1d2470; /* from the app icon */
  --pink: #ff3ec9;
  --yellow: #ffe53b;
  --white: #ffffff;
  --online: #2bd65a;
  --away: #ffaa1f;

  --display: 'Archivo', 'Arial Black', Impact, sans-serif;
  --text: Verdana, Tahoma, 'Segoe UI', sans-serif;

  --edge: 3px solid var(--navy);
  --hard: 8px 8px 0 var(--navy);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
img { display: block; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Shouting type */
.shout,
.section-h,
.plat h3,
.buddies .name,
.foot__big,
.logo {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* --- Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  padding-bottom: 90px;
}
.bar {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 24px; }
.logo img { border-radius: 9px; border: 2px solid var(--white); }
.bar__links { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.bar__links a { text-decoration: none; }
.bar__links a:hover { text-decoration: underline; }
.pill {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  padding: 8px 16px;
  border: var(--edge);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--navy);
}
.pill:hover { text-decoration: none !important; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); }

.hero__body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.shout {
  margin: 0;
  font-size: clamp(76px, 17vw, 250px);
  line-height: 0.82;
  color: var(--white);
  text-shadow: 6px 6px 0 var(--pink);
  transform-origin: 20% 60%;
}
.hero__side { max-width: 30em; position: relative; z-index: 2; }
.hero__lead { margin: 0 0 24px; font-size: 18px; }
.hero__fine { margin: 14px 0 0; font-size: 13px; opacity: 0.9; }
.hero__fine a { color: var(--yellow); }

.big-btn {
  display: inline-block;
  padding: 18px 30px;
  background: var(--pink);
  color: var(--white);
  font-family: var(--display);
  font-variation-settings: 'wdth' 110;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--edge);
  border-radius: 14px;
  box-shadow: var(--hard);
  transition: transform 0.08s, box-shadow 0.08s;
}
.big-btn:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--navy); }
.big-btn:active { transform: translate(6px, 6px); box-shadow: 2px 2px 0 var(--navy); }

/* The conversation window, sticker-style */
.convo {
  margin: 0;
  position: absolute;
  right: max(24px, calc((100vw - 1160px) / 2 + 24px));
  bottom: 70px;
  width: 340px;
  background: var(--white);
  color: var(--navy);
  border: var(--edge);
  border-radius: 12px;
  box-shadow: var(--hard);
  transform: rotate(-3deg);
  z-index: 1;
}
.convo__bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
}
.convo__log { padding: 12px 14px 4px; font-size: 14px; max-height: 210px; overflow-y: auto; }
.convo__log p { margin: 0 0 10px; }
.them { color: var(--pink); }
.convo__nudge { color: #6b7194; font-style: italic; }
.convo__nudge--me { color: var(--blue); }
.convo__btn {
  display: block;
  margin: 4px 14px 14px auto;
  padding: 8px 16px;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  background: var(--yellow);
  border: var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--navy);
  cursor: pointer;
}
.convo__btn:active { transform: translate(3px, 3px); box-shadow: none; }

/* The nudge */
@keyframes nudge {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-14px, 6px); }
  20% { transform: translate(12px, -8px); }
  30% { transform: translate(-12px, -4px); }
  40% { transform: translate(14px, 8px); }
  50% { transform: translate(-8px, 6px); }
  60% { transform: translate(10px, -6px); }
  70% { transform: translate(-6px, 4px); }
  80% { transform: translate(6px, -2px); }
  90% { transform: translate(-2px, 2px); }
}
.is-nudged { animation: nudge 0.55s linear; }

/* --- Buddy list of features ---------------------------------------------------- */
.list { padding: 96px 0 90px; }
.section-h { margin: 0; font-size: clamp(44px, 8vw, 104px); line-height: 0.9; }
.list .section-h { color: var(--blue); }
.legend { margin: 18px 0 34px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend .dot:not(:first-child) { margin-left: 14px; }

.buddies { list-style: none; margin: 0; padding: 0; border-top: var(--edge); }
.buddies li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: var(--edge);
}
.buddies .name { font-size: clamp(22px, 3.2vw, 38px); line-height: 1; }
.buddies .pm { font-style: italic; color: #4b5286; }
.buddies .soon .name { color: #8a8fb6; }
.buddies li:hover .name { color: var(--pink); }

.dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--navy);
  flex: none;
}
.legend .dot { width: 14px; height: 14px; border-width: 2px; }
.dot--on { background: var(--online); }
.dot--away { background: var(--away); }

/* --- Downloads ---------------------------------------------------------------- */
.get { background: var(--yellow); padding: 90px 0 100px; border-top: var(--edge); border-bottom: var(--edge); }
.get .section-h { color: var(--navy); margin-bottom: 40px; }
.plats { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.plat {
  background: var(--white);
  border: var(--edge);
  border-radius: 18px;
  box-shadow: var(--hard);
  padding: 30px;
}
.plat--win { transform: rotate(-1deg); }
.plat--android { transform: rotate(1deg); }
.plat h3 { margin: 0 0 6px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; }
.plat--win h3 { color: var(--blue); }
.plat--android h3 { color: #17a24a; }
.plat__meta { margin: 0 0 22px; font-size: 14px; }
.dl {
  display: block;
  text-align: center;
  padding: 16px 20px;
  color: var(--white);
  background: var(--navy);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border: var(--edge);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--pink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.dl:hover { background: var(--pink); box-shadow: 5px 5px 0 var(--navy); }
.dl:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--navy); }
.dl-alt { display: block; margin: 12px 0 0; font-size: 13px; text-align: center; }
.steps { margin: 22px 0 0; padding: 18px 0 0 22px; border-top: 2px dashed #c6c9e6; font-size: 14px; }
.steps li { margin-bottom: 6px; }
.sums { margin: 40px 0 0; font-size: 13px; }

/* --- Footer -------------------------------------------------------------------- */
.foot { background: var(--navy); color: var(--white); padding: 70px 0 50px; font-size: 13px; }
.foot__big { margin: 0 0 18px; font-size: clamp(38px, 7vw, 88px); line-height: 0.9; color: var(--yellow); }

/* --- Privacy page ----------------------------------------------------------------- */
.hero--slim { padding-bottom: 50px; }
.hero--slim .shout { font-size: clamp(60px, 12vw, 150px); }
.doc { max-width: 760px; padding: 60px 24px 80px; }
.doc h2 { font-family: var(--display); font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: 24px; margin: 36px 0 10px; color: var(--blue); }
.doc p, .doc li { font-size: 15px; }

/* --- Smaller screens --------------------------------------------------------------- */
@media (max-width: 1020px) {
  .convo { position: relative; right: auto; bottom: auto; margin: 50px 24px 0 auto; max-width: calc(100% - 48px); }
  .hero { padding-bottom: 60px; }
}
@media (max-width: 760px) {
  .plats { grid-template-columns: 1fr; }
  .plat--win, .plat--android { transform: none; }
  .buddies li { grid-template-columns: 22px 1fr; }
  .buddies .pm { grid-column: 2; margin-top: -10px; font-size: 14px; }
  .convo { margin: 44px auto 0; transform: rotate(-2deg); }
  .big-btn { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-nudged { animation: none; }
  .big-btn, .dl, .pill { transition: none; }
}

/* --- Phones: same energy, less squeeze ------------------------------------------- */
@media (max-width: 560px) {
  :root { --hard: 5px 5px 0 var(--navy); }
  .wrap, .bar, .hero__body { padding-left: 18px; padding-right: 18px; }
  .bar { padding-top: 14px; padding-bottom: 14px; }
  .bar__links { gap: 14px; }
  .logo { font-size: 20px; }
  .logo img { width: 32px; height: 32px; }
  .pill { padding: 6px 13px; box-shadow: 3px 3px 0 var(--navy); }

  /* Narrower letterforms so big words fit the screen instead of wrapping. */
  .shout,
  .section-h,
  .plat h3,
  .buddies .name,
  .foot__big { font-variation-settings: 'wdth' 100; }
  .hero__body { grid-template-columns: minmax(0, 1fr); }
  .shout { font-size: clamp(60px, 21vw, 110px); text-shadow: 4px 4px 0 var(--pink); }
  .hero__lead { font-size: 16px; }
  .big-btn { font-size: 16px; padding: 16px 18px; white-space: nowrap; font-variation-settings: 'wdth' 100; }

  .convo { width: auto; margin: 40px 6px 0; max-width: none; }

  .list { padding: 64px 0 60px; }
  .section-h { font-size: clamp(38px, 12vw, 56px); }
  .buddies li { gap: 4px 12px; padding: 14px 2px; }
  .buddies .name { font-size: 22px; }
  .buddies .pm { margin-top: 2px; }

  .get { padding: 64px 0 70px; }
  .get .section-h { margin-bottom: 28px; }
  .plats { gap: 26px; }
  .plat { padding: 22px 18px; border-radius: 14px; margin-right: 5px; }
  .plat h3 { font-size: 36px; }
  .dl { font-size: 16px; padding: 14px 12px; box-shadow: 4px 4px 0 var(--pink); }

  .foot { padding: 50px 0 40px; }
}

/* --- Support + delete-account pages ---------------------------------------------- */
.tip { margin: 0 0 10px; padding: 6px 28px 24px; background: var(--yellow); border: var(--edge); border-radius: 16px; box-shadow: var(--hard); }
.tip h2 { margin-top: 22px; }
.tip__btn { display: inline-block; margin-top: 6px; padding-left: 28px; padding-right: 28px; }
.tip__fine { margin: 10px 0 0; font-size: 13px; }
.del { display: grid; gap: 14px; max-width: 420px; margin: 18px 0 0; }
.del label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.del input[type="email"], .del input[type="password"] {
  font: inherit; font-weight: 400; padding: 10px 12px; color: var(--navy);
  border: var(--edge); border-radius: 10px; background: var(--white);
}
.del .del__check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.del__check input { width: 20px; height: 20px; accent-color: var(--pink); }
.del__go { margin-top: 4px; }
.del__go:disabled { opacity: 0.6; cursor: wait; }
.del__status { margin: 0; min-height: 1.6em; font-size: 14px; font-weight: 700; color: var(--blue); }
.del__status--bad { color: #c4262e; }
.del__fine { margin: 0; font-size: 13px; }
.del__done { margin: 18px 0 0; padding: 4px 24px 10px; background: var(--yellow); border: var(--edge); border-radius: 16px; box-shadow: var(--hard); }
.del__done-big { font-family: var(--display); font-weight: 900; font-size: 26px; margin: 14px 0 4px; }
@media (max-width: 560px) {
  .tip, .del__done { padding-left: 18px; padding-right: 18px; box-shadow: var(--hard); }
}
.plat__note { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; background: #fff6b8; border: 2px dashed var(--navy); border-radius: 10px; }