/* LawnRing Outreach page (outreach.html). Builds on home.css tokens and components.
   Ported from dialmove.com/outreach (including the dialmove-marketing#15 fix:
   .ao-form[hidden] must beat .ao-form { display: flex }). */

/* Hero illustration: who we reach + a sample email --------------------- */
.ao-map__frame { align-items: stretch; }
.ao-map__sources { display: flex; flex-direction: column; gap: 16px; padding: clamp(4px, 1vw, 12px); }
.ao-map__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ao-map__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 20px + 1vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-forest);
}
.ao-map__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ao-map__chips li {
  padding: 7px 13px;
  border: 1px solid rgba(244, 250, 244, 0.22);
  border-radius: 999px;
  background: rgba(244, 250, 244, 0.04);
  font-size: 14px;
  color: var(--on-forest);
}

.ao-email {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 14px + 1vw, 26px);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
}
.ao-email__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.ao-email__meta { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ao-email__meta span { display: inline-block; min-width: 4.2em; color: var(--ink-3); }
.ao-email__body { color: var(--ink); }
.ao-email__foot {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}

/* Why: a single statement in an editorial frame ------------------------- */
.proof {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: clamp(44px, 33.6px + 2.667vw, 72px);
  border-block: 1px solid var(--line);
}
.proof__label { letter-spacing: 0.14em; }
.proof__body { display: flex; flex-direction: column; gap: clamp(20px, 16px + 1vw, 32px); }
.proof__statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.highlight {
  background: linear-gradient(transparent 62%, rgba(252, 211, 77, 0.55) 62%, rgba(252, 211, 77, 0.55) 92%, transparent 92%);
}
.proof__caption { font-size: clamp(14px, 13.6px + 0.095vw, 15px); color: var(--ink-3); }
@media (min-width: 1024px) {
  .proof {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .proof__label { grid-column: span 3; align-self: start; font-size: 13px; }
  .proof__body { grid-column: 4 / -1; }
}

/* Rules list ------------------------------------------------------------- */
.ao-rules {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 32px + 2vw, 64px);
}
.ao-rule {
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.ao-rule__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3-step);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ao-rule p {
  margin-top: 10px;
  max-width: 34em;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (min-width: 1024px) {
  .ao-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 3.9vw, 56px); }
}

/* Receptionist add-on ---------------------------------------------------- */
.ao-addon {
  display: grid;
  gap: 20px;
  padding: clamp(28px, 20px + 2vw, 48px);
  border-radius: var(--radius-panel);
  background: var(--green-wash);
}
.ao-addon__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 22px + 1.6vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ao-addon__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ao-addon__body p { max-width: 36em; line-height: 1.6; color: var(--ink-2); }
.ao-addon__body .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
@media (min-width: 1024px) {
  .ao-addon { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; column-gap: 48px; }
}

/* Area check panel ------------------------------------------------------- */
.ao-check {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 24px 28px;
}
.ao-check__intro { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) {
  .ao-check { padding: 56px 48px 44px; }
}
@media (min-width: 1024px) {
  .ao-check {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(400px, 6fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
    padding: clamp(56px, 5.77vw - 3px, 80px) clamp(48px, 6vw, 80px);
  }
  .ao-check__intro { gap: 22px; position: sticky; top: 120px; }
}

/* Form ------------------------------------------------------------------- */
.ao-form { display: flex; flex-direction: column; gap: 18px; }
.ao-form[hidden] { display: none; } /* display:flex above would otherwise override [hidden] */
.ao-row { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .ao-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ao-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ao-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.ao-optional { font-weight: 400; color: var(--ink-3); }
.ao-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--line-ui);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}
.ao-input::placeholder { color: var(--ink-3); opacity: 1; }
.ao-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-wash); }
.ao-input[aria-invalid="true"] { border-color: #a1360f; }
.ao-error { font-size: 14px; line-height: 1.4; color: #a1360f; }
.ao-error:empty { display: none; }
.ao-status { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ao-status:empty { display: none; }
.ao-status.is-error { color: #a1360f; }
.ao-form [data-area-submit][disabled] { opacity: 0.7; cursor: progress; }

/* Honeypot: off screen for people, still in the form for bots. */
.ao-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ao-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border-radius: 16px;
  background: var(--bg);
}
.ao-success:focus { outline: none; }
.ao-success[hidden] { display: none; }
.ao-success__icon { width: 40px; height: 40px; }
.ao-success__icon .icon { width: 20px; height: 20px; }
.ao-success__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 21px + 0.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ao-success p { line-height: 1.6; color: var(--ink-2); }