/* The Notify me page on acevoz.com (issue #1958), laid out as the
   "Teachers: notify me when it's ready" board on the acevoz.com canvas.

   The fonts and brand tokens come from static/css/site-brand.css, which
   templates/base.html loads on every main-site page (#3006). This file
   only maps them onto the page's own --nm-* names and lays the page out.
   Every rule stays under .notify-me, so nothing here reaches another
   page. The one value the tokens lack, marked "board", stays literal. */

.notify-me {
  --nm-page: var(--color-bg);
  --nm-card: var(--color-bg-alt);
  --nm-text: var(--color-text);
  --nm-text-secondary: var(--color-text-secondary);
  --nm-text-lede: var(--color-text-lede);
  --nm-border: var(--color-line);
  --nm-border-strong: var(--color-line-strong);
  --nm-button: var(--color-button);
  --nm-button-hover: var(--color-button-hover);
  --nm-highlight-bg: var(--color-accent-soft);
  --nm-highlight-text: #CC2F52;    /* board: the "soon" pink */
  --nm-highlight-line: var(--color-accent);
  --nm-pink-dark: var(--color-accent-strong);
  --nm-purple-light: var(--color-secondary-soft);
  --nm-link: var(--color-secondary-strong);
  --nm-orange-light: var(--color-warm-soft);
  --nm-orange-text: var(--color-warm-strong);
  --nm-card-shadow: var(--color-warm-bright);
  --nm-success-bg: var(--color-success-soft);
  --nm-success-text: var(--color-success-strong);
  --nm-error: var(--color-error-strong);
  --nm-focus-ring: var(--focus-ring);
  --nm-heading: var(--font-heading);
  --nm-body: var(--font-body);

  display: block;
  background: var(--nm-page);
  color: var(--nm-text);
  font-family: var(--nm-body);
}

.notify-me a { color: var(--nm-link); }

/* One column on a phone: headline, form, then the feature lines, so the
   form shows without scrolling. Two columns from 900px, the form
   spanning the right. */
.notify-me .nm-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "signup" "features" "about";
  gap: 24px;
}

@media (min-width: 900px) {
  .notify-me .nm-layout {
    padding: 64px 40px 96px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "intro    signup"
      "features signup"
      "about    signup";
    grid-template-rows: auto auto 1fr;
    column-gap: 48px;
    row-gap: 36px;
  }
}

.notify-me .nm-intro { grid-area: intro; }
.notify-me .nm-signup { grid-area: signup; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.notify-me .nm-features { grid-area: features; }
.notify-me .nm-about { grid-area: about; }

.notify-me .nm-eyebrow {
  display: inline-block;
  margin: 0;
  background: var(--nm-card);
  border: 1px solid var(--nm-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nm-text-lede);
}

.notify-me .nm-headline {
  font-family: var(--nm-heading);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
}

.notify-me .nm-highlight {
  display: inline-block;
  background: var(--nm-highlight-bg);
  color: var(--nm-highlight-text);
  border-radius: 16px;
  padding: 0 0.2em;
  border-bottom: 4px solid var(--nm-highlight-line);
}

.notify-me .nm-lede {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--nm-text-lede);
  margin: 14px 0 0;
  max-width: 560px;
}

.notify-me .nm-card {
  background: var(--nm-card);
  border: 2px solid var(--nm-text);
  border-radius: 28px;
  padding: clamp(20px, 3vw, 36px);
  /* Smaller offset on a phone, so the shadow fits the 16px gutter. */
  box-shadow: 6px 6px 0 var(--nm-card-shadow);
  margin-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 900px) {
  .notify-me .nm-lede { line-height: 1.6; margin-top: 18px; }
  .notify-me .nm-card { gap: 16px; box-shadow: 10px 10px 0 var(--nm-card-shadow); margin-right: 10px; }
}

.notify-me .nm-card-title {
  font-family: var(--nm-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  margin: 0;
}

.notify-me .nm-field { display: flex; flex-direction: column; gap: 6px; }
.notify-me .nm-field label { font-weight: 700; font-size: 14px; }
.notify-me .nm-optional { font-weight: 500; color: var(--nm-text-secondary); }

.notify-me .nm-field input {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--nm-border-strong);
  border-radius: 12px;
  background: var(--nm-card);
  color: var(--nm-text);
  width: 100%;
  box-sizing: border-box;
}

.notify-me .nm-field input:focus { outline: none; border-color: var(--nm-highlight-line); box-shadow: var(--nm-focus-ring); }
.notify-me .nm-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--nm-error); }

.notify-me .nm-button {
  background: var(--nm-button);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  min-height: 52px;
  cursor: pointer;
}

.notify-me .nm-button:hover { background: var(--nm-button-hover); }
.notify-me .nm-button:focus-visible { outline: none; box-shadow: var(--nm-focus-ring); }

.notify-me .nm-fineprint { font-size: 13px; line-height: 1.5; color: var(--nm-text-secondary); margin: 0; }

.notify-me .nm-success {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--nm-success-bg);
  border: 1px solid var(--nm-success-text);
  border-radius: 20px;
  padding: 16px 20px;
  color: var(--nm-success-text);
}

.notify-me .nm-success svg { flex: none; margin-top: 2px; }
.notify-me .nm-success p { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; }

.notify-me .nm-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.notify-me .nm-features li { display: flex; gap: 14px; align-items: flex-start; }
.notify-me .nm-features p { margin: 0; }

.notify-me .nm-number {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nm-heading);
  font-weight: 700;
  font-size: 14px;
}

.notify-me .nm-number-pink { background: var(--nm-highlight-bg); color: var(--nm-pink-dark); }
.notify-me .nm-number-purple { background: var(--nm-purple-light); color: var(--nm-link); }
.notify-me .nm-number-orange { background: var(--nm-orange-light); color: var(--nm-orange-text); }

.notify-me .nm-feature-title { font-weight: 700; font-size: 16px; }
.notify-me .nm-feature-text { font-size: 15px; line-height: 1.5; color: var(--nm-text-secondary); }

.notify-me .nm-about { margin: 0; font-size: 15px; color: var(--nm-text-secondary); }
.notify-me .nm-learner-link { margin: 0; font-size: 15px; line-height: 1.5; color: var(--nm-text-secondary); }
.notify-me .nm-learner-link a { font-weight: 700; }
.notify-me .nm-about a { font-weight: 700; }

/* The honeypot: out of sight for people, still in the form for bots. */
.notify-me .hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}