/* ---------- Why Noticeboard is different ---------- */

/* White, deliberately continuous with the hero above it: the hero's own
   gradient fades to white, so a hard band break here would cut across the
   fade. The first real band change on the page is .features below. */
.why {
  background: var(--white);
  padding: 5.5rem 1.25rem;
}

/* Two cards across, not four: these are four claims with a sentence each, and
   a four-across row on a 72rem container would narrow every line to the point
   where the card reads as a label rather than an argument. */
.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* The gold icon tile is what separates the four differentiators from the
   eight capability cards below them. Same card, different accent -- so the
   second grid reads as "more of the product" rather than "same as the first". */
.feature-card--gold .feature-card__icon {
  background: var(--gold-100);
  color: var(--gold-600);
}

.feature-card--gold:hover {
  border-color: var(--gold-500);
}

/* ---------- Common questions ---------- */

/* White, directly under .why and above .features (blue-50). It carries no top
   padding of its own, so it reads as the tail of the differentiator band --
   four claims, then the objections they raise -- rather than as a new band. */
.faq {
  background: var(--white);
  padding: 0 1.25rem 5.5rem;
}

.faq__list {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
  margin: 0 auto;
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 0 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.faq__item[open] {
  border-color: var(--blue-100);
}

/* The summary is the clickable row. list-style + the webkit pseudo-element
   remove the browser's own triangle so the chevron below is the only marker. */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.25rem;
  border-right: 2px solid var(--slate-500);
  border-bottom: 2px solid var(--slate-500);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out),
    margin-top var(--dur-fast) var(--ease-out);
}

/* A half turn: the chevron points down when closed and up when open. */
.faq__item[open] .faq__q::after {
  margin-top: 0.35rem;
  transform: rotate(225deg);
}

.faq__a {
  padding-bottom: 1.25rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate-600);
}

/* ---------- Features ---------- */

.features {
  background: var(--blue-50);
  padding: 5.5rem 1.25rem;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-700);
  margin-bottom: 1.25rem;
}

.feature-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-card__title {
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.feature-card__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate-600);
}

/* ---------- For parents ---------- */

/* White, between .features (blue-50) and .how (slate-50): one band per section
   in the top half, and --blue-50 sits right beside --slate-50 by value, so the
   two must never be adjacent or the boundary vanishes. */
.for-parents {
  background: var(--white);
  padding: 5.5rem 1.25rem;
}

.for-parents__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

.for-parents__copy .section-sub {
  margin-left: 0;
}

.for-parents__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.for-parents__item {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--blue-700);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

.for-parents__item p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-600);
}

.for-parents__term {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.for-parents__promise {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--blue-700);
  border-top: 1px solid var(--slate-200);
  padding-top: 1.5rem;
  max-width: 60ch;
}

/* ---------- How it works ---------- */

.how {
  background: var(--slate-50);
  padding: 5.5rem 1.25rem;
}

.how__steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  counter-reset: none;
}

.how__step {
  position: relative;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.how__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue-700);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

.how__title {
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.how__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate-600);
}

.how__note {
  max-width: 46rem;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--blue-700);
}

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

.app-preview {
  background: var(--white);
  padding: 5.5rem 1.25rem;
}

.app-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* A grid item's automatic minimum size is "auto", i.e. its min-content width --
   and a figure's min-content here is the browser bar's URL text, which is
   `white-space: nowrap`. On a 375px screen that pinned the whole column to
   ~396px and pushed the page into horizontal scroll; every caption and every
   screenshot was clipped at the right edge. min-width: 0 lets the 1fr track
   shrink to the viewport, which is what lets .shot__url ellipsize and the
   screenshot scale down as intended. */
.app-preview__grid > * {
  min-width: 0;
}

/* Device frames around the real screenshots.
   Each figure is a browser window (or a phone, for a portrait shot): a chrome
   bar, then the image itself. The chrome is what makes the difference between
   this site's navy+gold KovaPrime brand and the app's own palette read as
   intentional rather than as a mismatch. */

.shot {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.shot__frame {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
}

.shot__dots {
  display: inline-flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.shot__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--slate-300);
}

.shot__url {
  flex: 1;
  min-width: 0;
  font-size: 0.6875rem;
  color: var(--slate-500);
  background: var(--white);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The missing-file guard. A grey box sized by the image's own width/height
   attributes, with the expected path printed inside -- visible rather than a
   broken-image icon if a screenshot is ever renamed or lost. The <img> sits on
   top of it at z-index 1, so the notice is only ever seen when the image has
   nothing to paint. */
.shot__media {
  position: relative;
  background: var(--slate-100);
  min-height: 12rem;
}

.shot__missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--slate-500);
}

.shot__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.shot__caption {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 60ch;
}

/* ---------- Pricing ---------- */

.pricing {
  background: var(--slate-50);
  padding: 5.5rem 1.25rem 7rem;
}

.pricing__rates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

.rate {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.rate:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
}

.rate__level {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}

.rate__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 0.375rem;
}

.rate__basis {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin-top: 0.125rem;
}

.pricing__billing {
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.pricing-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-600);
  background: var(--green-100);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.6rem;
}

.pricing__minimums {
  max-width: 52ch;
  margin: 0.75rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate-500);
}

.pricing-example {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 46rem;
  margin: 2.5rem auto 0;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.pricing-example__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--gold-100);
  color: var(--gold-600);
}

.pricing-example__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.pricing-example__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate-600);
}

.pricing-example__text strong {
  color: var(--blue-700);
}

.pricing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* ---------- Built for the whole school day ---------- */

/* Shares .pricing's slate-50 band and carries no top padding of its own, so
   the two read as one closing argument -- what it costs, then who it is for.
   White would merge with .waitlist below it, and --blue-50 sits right beside
   --slate-50 by value, so neither of those is usable here. */
.audience {
  background: var(--slate-50);
  padding: 0 1.25rem 6rem;
}

/* Two cards, so the grid stops at 64rem rather than .features' 72rem: the
   cards hold a sentence each, and a wider row would leave them mostly empty. */
.audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* ---------- Waitlist ---------- */

/* White, and the only conversion point on the page. The card is a card rather
   than a full-bleed band because it has to sit beside the copy on wide
   screens: one column of argument, one column of form. */
.waitlist {
  background: var(--white);
  padding: 5.5rem 1.25rem;
}

.waitlist__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
  align-items: start;
}

.waitlist__points {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.waitlist__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slate-600);
}

.waitlist__points li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--gold-500);
}

.waitlist__card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

#waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* An author `display: flex` on the element beats the browser's own
   `[hidden] { display: none }`, so setting form.hidden in js/main.js would
   leave the form on screen underneath the success message. Same guard as
   .mobile-menu[hidden] in nav.css, and for the same reason. */
#waitlist-form[hidden] {
  display: none;
}

/* Flex children stretch, so without this the submit button spans the card's
   full width at every size. */
#waitlist-form .button {
  align-self: flex-start;
}

.waitlist__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-500);
}

.waitlist__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-200);
}

.waitlist__aside p {
  font-size: 0.9375rem;
  color: var(--slate-600);
}

/* ---------- Coming soon (coming-soon.html) ----------
   The gate page: one screen, one job. It reuses the waitlist section's own
   layout and card (the markup carries both classes) rather than restyling a
   second form, so the two pages cannot drift apart. Only the framing is
   added here: more top padding to clear the fixed nav, the hero's gradient so
   the two pages read as one site, and a headline scale above .section-title
   because on this page the headline is the page. */
.coming {
  position: relative;
  overflow: hidden;
  padding: 8rem 1.25rem 6rem;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
}

/* The drifting shapes are absolutely positioned against .coming, so the
   content has to be lifted above them. */
.coming .waitlist__inner {
  position: relative;
  z-index: 1;
}

.coming__title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.1;
  color: var(--ink);
}

/* The hero's shape positions assume the hero's layout. This page's copy
   column is taller and starts higher, so the dot would sit on the headline
   and the ring would crowd the nav button. Repositioned, not restyled: same
   shapes, same drift. */
.coming .hero__shape--ring {
  top: 20%;
  right: -5%;
}

.coming .hero__shape--dot {
  top: auto;
  bottom: 18%;
  left: 30%;
}

/* .section-sub carries auto left/right margins so it can sit centred under a
   .section-head on the home page. In a flex column those auto margins centre
   the box on the cross axis regardless of align-items, which would leave this
   page's subhead floating away from the headline it belongs to. */
.coming .section-sub {
  margin: 1rem 0 0;
  max-width: 32ch;
}

/* The one outbound link on the page. It sits inside .waitlist__note, which is
   muted body copy, so it needs its own colour to read as a link. */
.coming .waitlist__note a {
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 3px;
}

.coming .waitlist__note a:hover {
  color: var(--blue-600);
  text-decoration-color: currentColor;
}

/* ---------- CTA ---------- */

.cta {
  background: var(--white);
  padding: 5.5rem 1.25rem 7rem;
}

.cta__card {
  max-width: 56rem;
  margin: 0 auto;
  background: var(--blue-700);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta__title {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  color: var(--white);
}

.cta__body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 1rem auto 0;
  max-width: 42ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* The fourth action in the CTA row is a text link, not a button -- same
   hierarchy argument as .hero__link: three buttons is already the most this
   row can carry before none of them wins. */
.cta__link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.cta__link:hover {
  text-decoration-color: currentColor;
}

@media (min-width: 720px) {
  .why,
  .faq,
  .features,
  .for-parents,
  .how,
  .app-preview,
  .pricing,
  .audience,
  .waitlist,
  .cta {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .for-parents__inner {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
    align-items: start;
  }

  .how__steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing__rates {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta__card {
    padding: 4rem 3.5rem;
  }
}

@media (min-width: 900px) {
  .waitlist__inner {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 3.5rem;
  }

  /* A plain 2x2: four shots pair up with no orphan, so there is no lead shot
     and no .shot--lead rule. (There used to be one, for a full-width sign-in
     screen that is deliberately no longer shown -- see the comment on the grid
     in index.html.) */
  .app-preview__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem 2rem;
  }
}

/* ---------- Terms & Conditions (standalone page) ---------- */

.terms {
  background: var(--white);
  /* Extra top padding so the content clears the fixed site nav */
  padding: 7.5rem 1.25rem 5.5rem;
}

.terms__body {
  max-width: 48rem;
  margin: 0 auto;
}

.terms__notice {
  border: 1px solid var(--gold-500);
  background: var(--gold-100);
  color: var(--gold-600);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* scroll-margin-top so an anchored heading (terms.html#privacy, linked from the
   cookie notice) lands below the fixed nav instead of underneath it. Applied to
   every heading rather than only the one with an id today, so adding another
   anchor later needs no CSS change. */
.terms__h {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
  scroll-margin-top: 6rem;
}

.terms__body p:not(.terms__notice) {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--slate-600);
}

/* ---------- 404 (standalone page) ---------- */

.not-found {
  background: var(--white);
  /* Extra top padding so the content clears the fixed site nav */
  padding: 9rem 1.25rem 6rem;
  text-align: center;
}

.not-found__inner {
  max-width: 40rem;
  margin: 0 auto;
}

.not-found__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue-700);
}

.not-found__title {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  color: var(--ink);
  margin: 0.5rem 0 1rem;
}

.not-found__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0 auto 2rem;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* ---------- Interest form (standalone page) ---------- */

.interest {
  background: var(--blue-50);
  /* Extra top padding so the content clears the fixed site nav */
  padding: 7.5rem 1.25rem 5.5rem;
}

.interest__card {
  max-width: 40rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

#interest-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.interest__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-500);
}

/* The submit button is a flex child of the form, so it stretches to the full
   column width unless it is told not to. */
#interest-form .button {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .waitlist {
    padding: 4.5rem 1.25rem;
  }

  /* The gate page still has to clear the fixed nav on a phone, where the nav
     is tallest relative to the viewport. */
  .coming {
    padding: 6.5rem 1.25rem 4rem;
  }

  /* On a phone the two remaining shapes land on the headline or behind the
     form card, where they read as a smudge rather than as depth. The page
     loses nothing by being clean at this width. */
  .coming .hero__shape {
    display: none;
  }

  .waitlist__card {
    padding: 1.25rem;
  }

  #waitlist-form .button {
    align-self: stretch;
  }

  .interest {
    padding: 6.5rem 1.25rem 4rem;
  }

  .interest__card {
    padding: 1.25rem;
  }

  #interest-form .button {
    align-self: stretch;
  }
}