/* =============================================================================
   agent7-app.css
   -----------------------------------------------------------------------------
   The handful of styles the live site needs that the static mockup did not:
   flash messages, server-side form errors, the "Sign in" link in the header,
   and the long-form legal pages.

   agent7.css is kept byte-for-byte identical to the mockup export so it can be
   replaced wholesale whenever the design is updated. Everything added for the
   PHP build lives here instead, using the same custom properties.
   ========================================================================== */

/* ---- Sign in link in the header --------------------------------------- */
.hdr .signin {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.hdr .signin:hover {
  color: var(--g);
  background: var(--mint);
}

/* ---- Flash messages ---------------------------------------------------- */
.flash {
  position: fixed;
  top: calc(90px + env(safe-area-inset-top, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  z-index: 80;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flash div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: var(--sh);
  background: #fff;
}

.flash .ok {
  color: #0b6b38;
  border: 1px solid #bfe6cd;
  background: var(--mint);
}

.flash .bad {
  color: var(--r2);
  border: 1px solid #f6c9cb;
  background: var(--rose);
}

.flash .i {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
}

/* ---- Server-side validation on the demo form -------------------------- */
.form .err {
  color: var(--r);
  font-family: var(--body);
  font-size: 13.5px;
  margin-top: 6px;
  display: block;
}

.form input.bad,
.form select.bad,
.form textarea.bad {
  border-color: var(--r);
  background: #fffafa;
}

/* ---- Legal pages (privacy, terms) ------------------------------------- */
.legal {
  max-width: 820px;
}

.legal .upd {
  font-size: 15px;
  color: var(--ink3);
  margin-top: 10px;
}

.legal h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-top: 44px;
}

.legal h3 {
  font-size: 19px;
  margin-top: 28px;
}

.legal p,
.legal li {
  color: var(--ink2);
  font-size: 16.5px;
}

.legal p {
  margin-top: 14px;
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 22px;
}

.legal li {
  margin-top: 8px;
}

.legal a {
  color: var(--g);
  font-weight: 700;
}

.legal .box {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--rad);
  background: var(--soft);
  border: 1px solid var(--line);
}

.legal .box p:first-child {
  margin-top: 0;
}

/* ---- Pricing: a plan with no capability rows still needs the gap ------- */
.plan ul:empty {
  display: none;
}

/* ---- Printing the legal pages ----------------------------------------- */
@media print {

  .hdr,
  .ftr,
  .ctab,
  .wa-float,
  .flash {
    display: none !important;
  }

  .band {
    padding-block: 0;
  }
}