/* ==========================================================================
   Welcome pop-up — the site's own modal language, in the brand's own colours.
   A plum masthead carries the welcome and the offer; a paper half carries the
   ask, using the same fields and olive button as every other form on the site.

   The card sizes itself from its OWN width (container queries), never the
   viewport, so the owner dashboard can render this exact markup at phone width
   inside a preview and get a pixel-faithful picture of what a visitor sees.
   ========================================================================== */

/* ---- the dialog: centring and backdrop only; the card carries the design -- */
.neighbor-promotion {
  /* the site's global `* { margin: 0 }` reset kills the UA's `margin: auto`,
     which is what centres a modal <dialog> — put it back */
  margin: auto;
  width: 100%;
  max-width: min(27rem, calc(100vw - 1.75rem));
  max-height: calc(100vh - 1.75rem);
  max-height: calc(100dvh - 1.75rem);
  padding: 0; border: 0; background: transparent;
  color: var(--ink-2, #5d5348);
  overflow: visible;
}
.neighbor-promotion:not([open]) { display: none; }
.neighbor-promotion[open] { display: flex; }
.neighbor-promotion::backdrop {
  background: rgba(46, 18, 54, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.neighbor-promotion [hidden] { display: none !important; }

/* ---- the card -------------------------------------------------------- */
/* The card answers to the width of its frame — the dialog on the site, the
   stage in the owner dashboard — and never to the viewport, so the preview is
   a true picture of the pop-up at that width. */
.neighbor-promotion,
.neighbor-promotion-frame { container: neighbor-promotion / inline-size; }
.neighbor-promotion-frame { display: flex; min-width: 0; }
/* The dashboard's copy is a picture of the pop-up: its controls are switched
   off so they cannot be used, and must not look switched off. */
.neighbor-promotion-frame .neighbor-promotion__submit:disabled,
.neighbor-promotion-frame .neighbor-promotion__field input:disabled {
  opacity: 1; cursor: default;
}

.neighbor-promotion__card {
  position: relative;
  flex: 1; min-width: 0; min-height: 0;
  display: flex;
  background: var(--paper, #fff);
  border-radius: var(--r-xl, 2rem);
  box-shadow: var(--shadow-lg, 0 2px 6px rgba(46,18,54,.06), 0 60px 90px -50px rgba(46,18,54,.38));
  overflow: hidden;
  font-family: var(--font-body);
  text-align: left;
}
/* One scroll area on a phone: a long welcome scrolls away rather than crowding
   the form out, and the sticky action below stays in reach the whole way. The
   close button sits outside it, so it never scrolls off. */
.neighbor-promotion__scroll {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}

/* ---- masthead -------------------------------------------------------- */
.neighbor-promotion__head {
  position: relative; isolation: isolate; flex: none;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.45rem 1.4rem 1.55rem;
  background: var(--purple, #482152);
  color: #f3e7f4;
  overflow: hidden;
}
/* a warm light from the corner keeps the plum from reading as a flat slab */
.neighbor-promotion__head::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(225, 255, 169, .17), transparent 58%),
    radial-gradient(90% 95% at 0% 100%, rgba(194, 37, 92, .16), transparent 64%);
}
/* the site's arch — the shape its photography is cut to — drawn faintly
   into the corner so the masthead carries the brand, not just the colour */
.neighbor-promotion__head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -2.6rem; right: -3.25rem; width: 10.5rem; height: 12.5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-arch, 999px 999px 1.375rem 1.375rem);
}

.neighbor-promotion__close {
  position: absolute; z-index: 3; top: .8rem; right: .8rem;
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0;
  background: rgba(255, 255, 255, .1); color: #fff7ed;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.neighbor-promotion__close svg { width: 1.05rem; height: 1.05rem; }
button.neighbor-promotion__close:hover { background: #fff7ed; border-color: #fff7ed; color: var(--purple, #482152); }

.neighbor-promotion__eyebrow {
  display: flex; align-items: flex-start; gap: .55rem;
  padding-right: 2.4rem;
  font-size: .6rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime, #e1ffa9);
}
.neighbor-promotion__eyebrow::before {
  content: ""; flex: none; width: 1.25rem; height: 1px; margin-top: .72em; background: currentColor; opacity: .7;
}

.neighbor-promotion__card h2 {
  margin: .62rem 0 0;
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: 1.68rem; font-weight: 600; line-height: 1.12; letter-spacing: -.022em;
  color: #fff2e3; text-wrap: pretty; overflow-wrap: break-word;
}
.neighbor-promotion__message {
  margin-top: .55rem;
  font-size: .875rem; line-height: 1.6; color: #e3d3e5;
  overflow-wrap: break-word;
}
.neighbor-promotion__message:empty { display: none; }

/* the offer reads as a stub torn off the card — the one lime moment up here */
.neighbor-promotion__offer {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; margin-top: 1.05rem; padding: .6rem .8rem;
  background: var(--lime, #e1ffa9); color: var(--purple-deep, #2e1236);
  border-radius: .85rem;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .7);
}
.neighbor-promotion__offer .icon { flex: none; width: 1.3rem; height: 1.3rem; stroke-width: 1.9; opacity: .85; }
.neighbor-promotion__offer strong {
  font-size: .92rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
}
.neighbor-promotion__offer strong:empty::before { content: "Your offer appears here"; opacity: .45; }

.neighbor-promotion__dates {
  margin-top: .6rem;
  font-size: .715rem; line-height: 1.5; color: rgba(255, 255, 255, .6);
}
.neighbor-promotion__signature {
  display: none;
  margin-top: auto; padding-top: 1.75rem;
  font-family: var(--font-display); font-variation-settings: var(--vf-soft);
  font-size: .92rem; font-style: italic; color: rgba(255, 255, 255, .58);
}

/* ---- the ask, on paper ----------------------------------------------- */
.neighbor-promotion__body {
  flex: 1; min-height: 0; min-width: 0;
  padding: 1.3rem 1.4rem 0;
  background: var(--paper, #fff);
}
.neighbor-promotion__form { display: grid; gap: .85rem; }
.neighbor-promotion__field { display: grid; gap: .38rem; min-width: 0; }
.neighbor-promotion__field label {
  font-size: .845rem; font-weight: 650; color: var(--purple, #482152);
}
.neighbor-promotion__field input {
  width: 100%; min-width: 0; padding: .78rem .95rem;
  background: var(--canvas, #fcfaf6); color: var(--ink, #211b16);
  border: 1px solid var(--line-strong, rgba(89,107,47,.28)); border-radius: var(--r-md, 1rem);
  /* 16px keeps iOS from zooming the page when a field takes focus */
  font: inherit; font-size: 1rem; line-height: 1.45;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.neighbor-promotion__field input:focus {
  background: var(--paper, #fff); border-color: var(--olive, #596b2f);
  box-shadow: 0 0 0 3px rgba(89, 107, 47, .12);
}
.neighbor-promotion__field input[aria-invalid="true"] {
  border-color: var(--berry, #c2255c); box-shadow: 0 0 0 3px rgba(194, 37, 92, .1);
}
.neighbor-promotion__field input:disabled { opacity: 1; }
.neighbor-promotion__contact-note {
  margin-top: -.2rem;
  font-size: .78rem; line-height: 1.55; color: var(--ink-3, #6f665a);
}
.neighbor-promotion__error {
  padding: .7rem .85rem;
  background: #fdf2f6; color: #8d1340;
  border: 1px solid rgba(194, 37, 92, .18); border-left: 3px solid var(--berry, #c2255c);
  border-radius: var(--r-sm, .625rem);
  font-size: .82rem; line-height: 1.55;
}

/* the primary action stays put instead of scrolling out of reach */
.neighbor-promotion__foot {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; gap: .6rem;
  margin-top: .1rem; padding: .35rem 0 1.25rem;
  background: var(--paper, #fff);
  box-shadow: 0 -9px 10px -12px rgba(46, 18, 54, .22);
}
.neighbor-promotion__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 3.25rem; padding: .85rem 1.4rem;
  background: var(--olive, #596b2f); color: #fff;
  border: 1px solid var(--olive, #596b2f); border-radius: var(--r-pill, 999px);
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.3; text-align: center; cursor: pointer;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(46,18,54,.04));
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.neighbor-promotion__submit .icon { flex: none; width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.neighbor-promotion__submit:hover:not(:disabled) {
  background: var(--olive-deep, #3c4a1e); border-color: var(--olive-deep, #3c4a1e);
  transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 8px 20px -14px rgba(46,18,54,.18));
}
.neighbor-promotion__submit:hover:not(:disabled) .icon { transform: translateX(3px); }
.neighbor-promotion__submit:active:not(:disabled) { transform: translateY(0); }
.neighbor-promotion__submit:disabled { opacity: .72; cursor: wait; }
.neighbor-promotion__submit--line {
  background: transparent; color: var(--purple, #482152);
  border-color: var(--line-strong, rgba(89,107,47,.28)); box-shadow: none;
}
.neighbor-promotion__submit--line:hover:not(:disabled) {
  background: transparent; color: var(--olive, #596b2f); border-color: var(--olive, #596b2f);
}
.neighbor-promotion__privacy {
  font-size: .715rem; line-height: 1.6; color: var(--ink-3, #6f665a);
}

/* ---- signed up ------------------------------------------------------- */
.neighbor-promotion__success {
  display: grid; justify-items: start; gap: .7rem;
  padding-bottom: 1.5rem;
}
.neighbor-promotion__success-mark {
  width: 2.6rem; aspect-ratio: 283 / 361; margin-bottom: .15rem;
  background-color: var(--olive, #596b2f); opacity: .9;
  -webkit-mask: url("/img/logo-mark.svg") no-repeat center / contain;
          mask: url("/img/logo-mark.svg") no-repeat center / contain;
}
.neighbor-promotion__success h3 {
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  color: var(--purple, #482152);
}
.neighbor-promotion__success p {
  font-size: .9rem; line-height: 1.65; color: var(--ink-2, #5d5348);
}
.neighbor-promotion__success .neighbor-promotion__submit { margin-top: .5rem; }

/* ---- wide card: the masthead becomes a panel beside the form ---------- */
@container neighbor-promotion (min-width: 33rem) {
  .neighbor-promotion__scroll { display: grid; grid-template-columns: .93fr 1.07fr; align-items: stretch; overflow: hidden; }
  .neighbor-promotion__body { overflow-y: auto; overscroll-behavior: contain; }
  /* over paper now, so it borrows the site modal's own close button */
  .neighbor-promotion__close {
    background: var(--canvas, #fcfaf6); color: var(--ink-2, #5d5348);
    border-color: var(--line, rgba(89,107,47,.16));
  }
  button.neighbor-promotion__close:hover { background: var(--purple, #482152); border-color: var(--purple, #482152); color: #fff; }
  .neighbor-promotion__head { padding: 2.15rem 1.9rem 1.9rem; }
  /* the taller panel has room for the dome itself, rising from the foot */
  .neighbor-promotion__head::after { top: auto; bottom: -8.5rem; right: -3.75rem; width: 14rem; height: 17rem; }
  .neighbor-promotion__close { top: 1.05rem; right: 1.05rem; }
  .neighbor-promotion__eyebrow { padding-right: 0; font-size: .68rem; }
  .neighbor-promotion__card h2 { margin-top: .8rem; font-size: 2.1rem; }
  .neighbor-promotion__message { margin-top: .75rem; font-size: .92rem; }
  .neighbor-promotion__offer { margin-top: 1.4rem; padding: .75rem .95rem; }
  .neighbor-promotion__offer strong { font-size: 1rem; }
  .neighbor-promotion__signature { display: block; }
  .neighbor-promotion__body { padding: 2.15rem 1.9rem 0; }
  .neighbor-promotion__form { gap: .95rem; }
  .neighbor-promotion__foot { padding-bottom: 1.9rem; }
  .neighbor-promotion__success { padding-bottom: 2rem; }
  .neighbor-promotion__success h3 { font-size: 1.7rem; }
}

/* the dialog only grows once the viewport can hold the wide card */
@media (min-width: 46rem) {
  .neighbor-promotion {
    max-width: min(44rem, calc(100vw - 3rem));
    max-height: min(calc(100dvh - 3rem), 41rem);
  }
}

/* ---- motion: the site's own modal entrance --------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes neighbor-promotion-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  @keyframes neighbor-promotion-fade { from { opacity: 0; } }
  .neighbor-promotion[open] .neighbor-promotion__card { animation: neighbor-promotion-in .42s var(--ease-out) both; }
  .neighbor-promotion[open]::backdrop { animation: neighbor-promotion-fade .3s ease both; }
}