/* Security page (/security/). Loads after site.css.
   Phones first: everything inside max-width:734px only changes the phone layout. */

/* Hero + fine print text widths (were inline styles) */
.page-hero .lead {
  max-width: 740px;
}
#legal .lead {
  max-width: 720px;
}

/* Fine print follows the white compliance section: one hairline instead of a big empty gap */
#legal {
  padding-top: 0;
}
#legal > .w-bento {
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5vw, 72px);
}

@media (max-width: 734px) {
  /* Hero: short lead, buttons in the first screen */
  .page-hero .btn-row {
    margin-top: 28px;
  }

  /* AI: the phone-only screenshot of the Confirm step.
     The screenshot was retaken on Oct 19 with the app's NEW footer ("Changes and texts
     always need your Confirm. The assistant never deletes data."), so it stays visible.
     Only the empty white band above the AI's answer is trimmed.
     Window = image rows 96 to 1080 of 1080 (984 tall). If the shot is retaken again,
     re-check that the first line of the answer and the footer are both fully in view. */
  .sec-ai-shot {
    margin-bottom: 16px;
  }
  .sec-ai-shot .shot:not(.is-missing) {
    background: #fff;
    padding-top: 14px;
  }
  .sec-ai-shot img {
    aspect-ratio: 1080 / 984;
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* Fine-print note under Compliance: body size on phones (it's a real sentence, not a caption) */
  .note {
    font-size: 17px;
    line-height: 1.5;
  }

  /* Fine print: big tappable rows instead of a wrapped line of links */
  .legal-links {
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
  }
  .legal-links .more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    border-top: 1px solid var(--line);
  }
  .legal-links .more:last-child {
    border-bottom: 1px solid var(--line);
  }
}

/* Landscape phones: the compact hero (buttons in the first screen) is shared, in site.css */