html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------------
   Homepage: "In it together."
   Everything below is homepage-only. The signup section (#content) and
   the privacy / 404 pages keep their existing styles unchanged.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-900-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700-italic.woff2") format("woff2");
}

.home {
  --home-navy: #0b1330;
  --home-blue: #245be7;
  --home-red: #e3232d;
  --home-muted: #4d556a;
  --home-strip: #f8f9fd;
  --home-b: clamp(0.8125rem, 1.05vw, 0.945rem);
  --home-divider: #d6d9df;
  box-sizing: border-box;
  background: #fff;
  color: var(--home-navy);
  font-family: "Lato", "Segoe UI", system-ui, sans-serif;
}

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

.home-top {
  display: grid;
  grid-template-columns: 35fr 65fr;
  /* The photograph column is 65% of the width; this is its natural height
     (3:2), so on desktop the whole photograph is shown. If the copy needs
     more room the row grows and the photo is cropped proportionally. */
  min-height: calc(min(100vw, 1920px) * 0.65 / 1.5);
}

.home-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(0.8rem, 1.26vw, 1.134rem);
  padding: 1.4em 2.2em 0.75em 2.2em;
  background: #fff;
}

.home-wordmark {
  margin: 0;
  font-size: 1.7em;
  font-weight: 900;
  font-kerning: normal;
  letter-spacing: 0.2em;
  line-height: 1;
  text-rendering: geometricPrecision;
}

.home h1 {
  margin: 1.1em 0 0;
  color: var(--home-blue);
  font-size: 2.6em;
  font-weight: 900;
  letter-spacing: -0.012em;
  line-height: 1.08;
  text-align: left;
}

.home-rule {
  display: block;
  width: 3.8em;
  height: 0.28em;
  margin-top: 0.5em;
  background: var(--home-red);
}

.home-story {
  max-width: 23em;
  margin-top: 1.2em;
  --home-ink-soft: #1f2a4a;
}

.home-story h2,
.home-story p {
  margin: 0;
}

.home-story h2 {
  color: var(--home-ink-soft);
  font-size: 1.06em;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.3;
}

.home-story p {
  margin-top: 0.55em;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.58;
  text-wrap: pretty;
}

.home-story .home-lead {
  margin-top: 1.15em;
  font-size: 1.02em;
}

.home-story .home-question {
  margin-top: 0.3em;
  color: var(--home-blue);
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.3;
}

.home-crime {
  color: #6a2bb0;
  font-weight: 700;
}

.home-question em {
  font-style: italic;
}

.home-question span {
  display: block;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.9em;
  min-height: 2.5em;
  margin-top: 0.85em;
  padding: 0 1.45em 0 1.6em;
  border-radius: 999px;
  background: var(--home-red);
  color: #fff;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.home-cta svg {
  display: block;
  flex: none;
  width: 1.2em;
  height: auto;
}

.home-cta:hover {
  background: #c71f28;
}

.home-cta:focus-visible {
  outline: 3px solid var(--home-blue);
  outline-offset: 3px;
}

.home-cta-note {
  margin: 0.75em 0 0;
  color: var(--home-muted);
  font-size: 0.86em;
  font-weight: 400;
  line-height: 1.4;
}

.home-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.home-photo img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.home-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--home-strip);
  font-size: var(--home-b);
}

.home-features li {
  position: relative;
  padding: 1.1em 1.1em 0.95em;
  text-align: center;
}

.home-features li + li::before {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 0;
  width: 1px;
  background: var(--home-divider);
}

.home-icon {
  display: block;
  width: 2.5em;
  height: 2.5em;
  margin: 0 auto 0.5em;
  color: var(--home-blue);
}

.home-features h2,
.home-features p {
  margin: 0;
}

.home-features h2 {
  color: var(--home-navy);
  font-size: 0.9em;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-features li p {
  margin-top: 0.45em;
  color: var(--home-muted);
  font-size: 0.92em;
  font-weight: 400;
  line-height: 1.4;
}

.home-features li .home-soon {
  margin-top: 0.45em;
  color: #c71f28;
  font-size: 0.82em;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* Text never goes below its 1440px size. It only grows on screens that are both wide and tall
   enough, so the hero plus the five-feature strip always fit when the window allows. */
@supports (height: 100svh) {
  .home {
    --home-b: clamp(0.8125rem, min(1.05vw, max(2.02svh, 0.945rem)), 1.05rem);
  }

  .home-copy {
    font-size: clamp(0.8rem, min(1.26vw, max(2.42svh, 1.134rem)), 1.3rem);
  }

  .home-top {
    min-height: min(
      calc(min(100vw, 1920px) * 0.65 / 1.5),
      max(
        calc(100svh - 10.5 * var(--home-b) - 4px),
        calc(min(100vw, 1920px) * 0.65 / 1.5 * 0.66)
      )
    );
  }
}

/* Short desktop windows (for example a maximised Chrome window on a 4K screen at 300% scaling,
   which leaves about 585 CSS px of page height). Same type sizes, same wording, same photograph;
   only the empty space between the elements is tightened so the whole feature strip stays visible. */
@media (min-width: 900px) and (max-height: 760px) {
  .home-copy {
    padding-top: 0.9em;
    padding-bottom: 0.4em;
  }

  .home h1 {
    margin-top: 0.4em;
  }

  .home-story {
    margin-top: 0.85em;
  }

  .home-story p {
    margin-top: 0.4em;
    line-height: 1.46;
  }

  .home-story .home-lead {
    margin-top: 0.85em;
  }

  .home-cta-note {
    margin-top: 0.6em;
  }

  .home-features li {
    padding: 0.75em 1.1em 0.6em;
  }
}

@supports (height: 100svh) {
  @media (min-width: 900px) and (max-height: 760px) {
    /* the strip is shorter in this mode, so the hero fills the window down to it */
    .home-top {
      min-height: min(
        calc(min(100vw, 1920px) * 0.65 / 1.5),
        max(
          calc(100svh - 9.9 * var(--home-b) - 8px),
          calc(min(100vw, 1920px) * 0.65 / 1.5 * 0.66)
        )
      );
    }
  }
}

/* Short desktop windows: hero plus feature strip are exactly one window tall, so the strip sits
   flush with the bottom edge (no sliver of the black signup section). The block is never taller than
   the photograph's natural height plus the strip, so the photograph only ever loses sky. */
@supports (height: 100svh) {
  @media (min-width: 900px) {
    .home {
      display: flex;
      flex-direction: column;
      min-height: min(
        100svh,
        calc(min(100vw, 1920px) * 0.65 / 1.5 + 9.7 * var(--home-b))
      );
    }

    .home-top {
      flex: 1 0 auto;
    }
  }
}

@media (max-width: 1249px) and (min-width: 900px) {
  .home-features h2 {
    min-height: 2.5em;
  }
}

@media (max-width: 899px) {
  .home-top {
    display: block;
    min-height: 0;
  }

  .home-copy {
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    padding: 1.7em max(1.5rem, calc((100% - 34rem) / 2)) 1.9em;
  }

  .home-wordmark {
    font-size: 1.45em;
  }

  .home h1 {
    margin-top: 1.25em;
  }

  .home-story {
    max-width: none;
  }

  .home-cta {
    align-self: stretch;
    justify-content: space-between;
    min-height: 2.9em;
    font-size: 1.15em;
  }

  .home-photo {
    aspect-ratio: 1024 / 682;
  }

  .home-photo img {
    position: static;
  }

  .home-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.9375rem;
  }

  .home-features li {
    padding: 1.4em 1em 1.3em;
  }

  .home-features li::before {
    display: none;
  }

  .home-features li:nth-child(2n) {
    border-left: 1px solid var(--home-divider);
  }

  .home-features li:nth-child(n + 3) {
    border-top: 1px solid var(--home-divider);
  }

  .home-features li:last-child {
    grid-column: 1 / -1;
    border-left: 0;
  }
}

@media (max-width: 359px) {
  .home-features {
    grid-template-columns: 1fr;
  }

  .home-features li:nth-child(2n) {
    border-left: 0;
  }

  .home-features li + li {
    border-top: 1px solid var(--home-divider);
  }
}
#content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(calc(32rem + 3rem), 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  scroll-margin-top: 0;
  padding-top: calc(4.5rem + 50px);
  padding-bottom: 2rem;
}

/* Second section: the signup copy and form stay first and full size; the app phone is a quiet,
   smaller companion beside them on desktop and below the form on mobile. */
.signup-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.signup-phone {
  width: min(13rem, 56vw);
  margin: 2rem auto 0;
}

.signup-phone img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  #content {
    display: grid;
    grid-template-columns: minmax(0, 32rem) clamp(10.5rem, 17vw, 15rem);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: min(70rem, 100%);
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* The phone sits 80px higher than the centred position (less on narrow desktops, so the footer never
     crowds the form). The negative top margin also shortens the row by the same amount, so no empty
     space is left under the phone. The copy block (about 302px tall) is moved back by half of what the
     row lost, so the headline and form stay exactly where they were. */
  #content {
    --lift: min(
      80px,
      calc((clamp(10.5rem, 17vw, 15rem) * 2032 / 954 - 302px) / 2 + clamp(2rem, 5vw, 3.5rem) - 40px)
    );
  }

  .signup-phone {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: calc(-1 * var(--lift)) 0 0;
  }

  .signup-copy {
    position: relative;
    top: calc(var(--lift) / 2);
  }

  /* How far the phone's bottom edge sits below the form block's bottom edge (negative when above it). */
  #content {
    --over: calc((clamp(10.5rem, 17vw, 15rem) * 2032 / 954 - 302px - 2 * var(--lift)) / 2);
  }

  #content .footer {
    grid-column: 1 / -1;
  }
}

.panel {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 1.5rem;
}

h1, .lede, .signup-note, .result, .footer, .privacy-copy {
  margin: 0;
}

#content h1,
#content .lede,
#content .signup-note,
#content .footer {
  text-align: center;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* The second-section headline sits 25px higher. It is shifted visually only, so nothing else moves. */
#content h1 {
  position: relative;
  top: -25px;
}

h1 .accent {
  color: #245BE7;
}

.lede {
  margin-top: calc(1.15rem + 14px);
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 36rem;
}

form {
  margin-top: calc(1.15rem + 20px);
}

.privacy-copy a {
  color: #fff;
}

.signup-note {
  margin-bottom: calc(0.85rem + 10px);
  color: #d0d0d0;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  max-width: 32rem;
}

input {
  flex: 1 1 16rem;
  min-width: 0;
  box-sizing: border-box;
  height: 51px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 2px;
  padding: 0 0.9rem;
  font: inherit;
}

input:focus {
  outline: 2px solid #e3232d;
  outline-offset: 2px;
}

button {
  box-sizing: border-box;
  height: 51px;
  background: #e3232d;
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 0 1.1rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: #c71f28;
}

button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

button:disabled {
  cursor: default;
  opacity: 0.7;
}

.result {
  min-height: 1.4em;
  margin-top: 0.9rem;
  line-height: 1.4;
}

.footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.75rem;
  color: #c8c8c8;
}

.footer a, .back {
  color: #fff;
}

.footer a,
.footer a:hover,
.footer a:focus,
.footer a:focus-visible,
.footer a:active,
.footer a:visited {
  text-decoration: none;
}

.footer a:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

#content .footer {
  max-width: none;
  margin-top: 0.5rem;
  padding: 1.5rem 0 0;
}

/* On desktop the footer text sits about 60px under the email field and button. The empty status line under
   the button (0.9rem + 1.4em, kept so a message never moves the layout) and the part of the row that the
   phone adds below the form are taken off the footer's margin, so the visible gap is the same at every
   desktop width. The footer text is centred, well clear of the phone. */
@media (min-width: 900px) {
  #content .footer {
    margin-top: calc(-17px - var(--over));
  }
}

.page {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 1rem;
}

.page h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.privacy-copy p,
.privacy-copy li {
  line-height: 1.5;
  margin: 0 0 0.9rem;
}

.privacy-copy h2 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 1.8rem 0 0.7rem;
}

.privacy-copy ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}

.privacy-copy figure {
  margin: 0 0 1.2rem;
}

.privacy-copy figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.privacy-copy figcaption {
  margin-top: 0.4rem;
  color: #c8c8c8;
  font-size: 0.9rem;
  line-height: 1.4;
}

.missing {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 640px) {
  #content {
    padding-top: calc(3.25rem + 50px);
  }

  .panel {
    padding-top: 3.25rem;
  }

  .row {
    flex-direction: column;
  }

  input {
    flex: 0 1 auto;
    width: 100%;
  }

  input,
  button {
    min-height: 48px;
    height: 51px;
  }

  button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   Phone refinements (screens up to 640px wide only).
   Nothing here applies above 640px, so the approved desktop design and
   the tablet layout are untouched. Wording, colours, fonts and images
   are unchanged.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* WITNESS wordmark: 2.15rem (about 34.5px) on phones at every width, up from about 28-32px. Colour, weight,
     letter spacing (0.2em, scales with the size) and left alignment are unchanged. */
  .home-wordmark {
    font-size: 2.15rem;
  }

  /* Balanced line breaks so the feature descriptions and the signup headline never leave a
     lone word ("them.", "help.", "it.") on a line of its own. */
  .home-features li p,
  #content h1,
  #content .lede {
    text-wrap: balance;
  }

  /* Feature titles only avoid a lone last word (no re-balancing), so wide titles keep their
     current breaks. */
  .home-features h2 {
    text-wrap: pretty;
  }

  /* The signup headline is lifted 25px visually (see #content h1), which left a gap of about
     57px before the description on phones. The description moves up so the visible gap is
     about 36px; the headline itself stays where it is. */
  #content .lede {
    margin-top: calc(1.15rem - 7px);
  }

  /* App phone: wider (296px at a 390px screen, 15rem/240px before) and shown from the phone-proportioned
     mobile artwork (witness-phone-mobile.png, body ratio about 2.12:1; see index.html). Scales with the
     screen (76vw) and is capped at 296px; still centred. To revert, restore min(15rem, 66vw) and remove the
     <source> in index.html. */
  .signup-phone {
    width: min(18.5rem, 76vw);
  }
}