/* ACE Visualizer Pro — Quiet Authority brand. Cream / Ink / Bronze / Stone. Fraunces + Inter. */

:root {
  --avp-cream: #F2EDE4;
  --avp-cream-deep: #E8E1D4;
  --avp-ink: #1A1714;
  --avp-ink-soft: #3A332C;
  --avp-bronze: #9B7B4A;
  --avp-stone: #7A7164;
  --avp-hairline: rgba(26,23,20,.10);
}

/* Full-page mode (?avp_niche=X) — vertically + horizontally center the entire flow,
   with subtle blurred niche-image backdrop for visual depth (so it does not feel flat). */
html, body.avp-fullpage {
  margin: 0;
  padding: 0;
  background: var(--avp-ink);
  min-height: 100vh;
}
body.avp-fullpage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}
body.avp-fullpage::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/wp-content/uploads/ace-site/avp-card-kitchen-A.webp');
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.55) saturate(0.85);
  opacity: 0.5;
  z-index: 0;
  transform: scale(1.08);
}
body.avp-fullpage[data-niche="kitchen"]::before  { background-image: url('/wp-content/uploads/ace-site/avp-card-kitchen-A.webp'); }
body.avp-fullpage[data-niche="bathroom"]::before { background-image: url('/wp-content/uploads/ace-site/avp-card-bathroom-A.webp'); }
body.avp-fullpage[data-niche="adu"]::before      { background-image: url('/wp-content/uploads/ace-site/avp-card-adu-A.webp'); }
body.avp-fullpage[data-niche="backyard"]::before { background-image: url('/wp-content/uploads/ace-site/avp-card-backyard-A.webp'); }

body.avp-fullpage .avp-root {
  margin: 0 auto;
  padding: 56px 48px;
  width: 100%;
  max-width: 980px;
  background: rgba(242, 237, 228, 0.96);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  border-radius: 14px;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
}

body.avp-fullpage .avp-back-link {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 2;
  color: var(--avp-cream);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 16px;
  background: rgba(26, 23, 20, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}
body.avp-fullpage .avp-back-link:hover { background: rgba(26, 23, 20, 0.75); }

@media (max-width: 640px) {
  body.avp-fullpage { padding: 16px 12px; }
  body.avp-fullpage .avp-root { padding: 36px 24px; border-radius: 10px; }
  body.avp-fullpage .avp-back-link { top: 12px; left: 12px; font-size: 11px; padding: 8px 12px; }
}

.avp-root {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--avp-cream);
  color: var(--avp-ink);
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px;
  position: relative;
}

.avp-progress {
  height: 2px;
  background: var(--avp-hairline);
  position: relative;
  margin-bottom: 48px;
  overflow: hidden;
}
.avp-progress-bar {
  position: absolute;
  inset: 0 calc(100% - var(--progress, 0%)) 0 0;
  background: var(--avp-bronze);
  transition: right .45s cubic-bezier(.22,1,.36,1);
}

/* The hidden attribute must always win. Several rules below set display on
   elements the JS toggles via [hidden]; without this guard any such rule
   silently un-hides them (this is exactly how the lock card leaked). */
.avp-root [hidden] { display: none !important; }

.avp-step {
  display: none;
}
.avp-step.active {
  display: block;
  animation: avpFade .45s cubic-bezier(.22,1,.36,1);
}
@keyframes avpFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.avp-step-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--avp-bronze);
  margin-bottom: 12px;
}
.avp-step-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--avp-ink);
  margin: 0 0 8px;
}
.avp-step-help {
  font-size: 14px;
  color: var(--avp-ink-soft);
  margin: 0 0 24px;
}

.avp-upload {
  border: 1px dashed var(--avp-bronze);
  background: var(--avp-cream-deep);
  border-radius: 8px;
  text-align: center;
  padding: 64px 24px;
  margin: 24px 0;
  cursor: pointer;
  transition: background .2s;
}
.avp-upload:hover { background: rgba(155,123,74,.08); }
.avp-upload input[type=file] { display: none; }
.avp-upload-label { display: block; cursor: pointer; }
.avp-upload-text {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--avp-ink);
  margin-bottom: 6px;
}
.avp-upload-hint { display: block; font-size: 13px; color: var(--avp-stone); }
.avp-preview {
  margin-top: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--avp-ink);
}
.avp-preview img { width: 100%; height: auto; display: block; }

.avp-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.avp-option {
  background: #fff;
  border: 1px solid var(--avp-hairline);
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: all .18s;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avp-option:hover {
  border-color: var(--avp-bronze);
  transform: translateY(-2px);
}
.avp-option.selected {
  border-color: var(--avp-bronze);
  background: rgba(155,123,74,.08);
  box-shadow: inset 0 0 0 1px var(--avp-bronze);
}
.avp-option-img {
  display: block;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: var(--avp-cream-deep);
  border-radius: 4px;
}
.avp-option-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--avp-ink);
}
.avp-option-hint {
  font-size: 12px;
  color: var(--avp-stone);
}

.avp-step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
}
.avp-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 12px 28px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s;
}
.avp-btn-primary {
  background: var(--avp-ink);
  color: var(--avp-cream);
  /* The forward action reads louder than Back/Skip on every device. */
  font-weight: 700;
  font-size: 14px;
}
.avp-btn-primary:hover:not(:disabled) { background: var(--avp-bronze); }
.avp-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.avp-btn-ghost {
  background: transparent;
  color: var(--avp-ink);
  border-color: var(--avp-hairline);
}
.avp-btn-ghost:hover { border-color: var(--avp-bronze); color: var(--avp-bronze); }

.avp-loading {
  text-align: center;
  padding: 80px 24px;
}
.avp-spinner {
  width: 48px;
  height: 48px;
  border: 2px solid var(--avp-hairline);
  border-top-color: var(--avp-bronze);
  border-radius: 50%;
  margin: 0 auto 32px;
  animation: avpSpin 1s linear infinite;
}
@keyframes avpSpin { to { transform: rotate(360deg); } }
.avp-loading-msg {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  margin: 8px 0;
}
.avp-loading-tip {
  font-size: 13px;
  color: var(--avp-stone);
}

.avp-result-images img {
  width: 100%;
  border-radius: 6px;
  display: block;
  margin: 24px 0;
}
.avp-price {
  background: var(--avp-cream-deep);
  padding: 24px;
  border-radius: 6px;
  text-align: center;
  margin: 24px 0;
}
.avp-price-label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--avp-stone);
}
.avp-price-value {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  margin-top: 8px;
  color: var(--avp-bronze);
}

.avp-lead-form {
  background: #fff;
  padding: 32px;
  border-radius: 6px;
  margin: 24px 0;
}
.avp-lead-form h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--avp-ink);
}
.avp-lead-form input[type=text],
.avp-lead-form input[type=tel],
.avp-lead-form input[type=email] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--avp-hairline);
  border-radius: 4px;
  font: inherit;
  background: var(--avp-cream);
}
.avp-lead-form input:focus { outline: none; border-color: var(--avp-bronze); }

.avp-cross-sell {
  background: var(--avp-ink);
  color: var(--avp-cream);
  padding: 32px;
  border-radius: 6px;
  margin-top: 32px;
  text-align: center;
}
.avp-cross-sell h3 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 26px;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .avp-root { padding: 24px 16px; }
  .avp-options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .avp-option-img { height: 80px; }
  .avp-step-nav { flex-direction: column-reverse; }
  .avp-btn { width: 100%; }
}


/* ============================================================
   RESULT FLOW — locked before/after slider, chips, retry buttons
   ============================================================ */
.avp-ba{
  position:relative;width:100%;aspect-ratio:4/3;max-width:920px;margin:0 auto;
  overflow:hidden;border:1px solid var(--avp-border,rgba(0,0,0,.12));
  background:#000;user-select:none;
}
.avp-ba-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
}
.avp-ba-after{ clip-path:inset(0 0 0 50%); transition:none; }
.avp-ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:5;
  cursor:ew-resize;box-shadow:0 0 18px rgba(0,0,0,.5);
}
.avp-ba-handle::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.avp-ba-handle::after{
  content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:20px;color:#1A1714;font-weight:600;z-index:1;
}
.avp-ba.locked .avp-ba-handle{ cursor:not-allowed; opacity:.4; }
.avp-ba-tag{
  position:absolute;top:14px;font-family:Inter,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.55);padding:6px 12px;backdrop-filter:blur(6px);z-index:6;
}
.avp-ba-tag-before{ left:14px; }
.avp-ba-tag-after { right:14px; background:rgba(155,123,74,.85); }

/* Lock overlay: positioned only over the AFTER (AI) side. No darkening of BEFORE.
   The AI image itself is the blurred preview returned by the server, so the AFTER side
   is naturally unreadable; we only need to host the form on top of it. */
.avp-lock{
  position: static;
  display: block;
  padding: 0;
  background: transparent;
}
.avp-lock-card{
  background:#fff;max-width:380px;width:100%;padding:32px 28px;text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  border-top:3px solid var(--avp-accent,#9B7B4A);
}
.avp-lock-icon{font-size:30px;margin-bottom:12px}
.avp-lock-eyebrow{font-family:Inter,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--avp-accent,#9B7B4A);margin-bottom:14px;}
.avp-lock-title{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:24px;
  line-height:1.18;letter-spacing:-.01em;color:#1A1714;margin-bottom:10px;}
.avp-lock-sub{font-family:Inter,sans-serif;font-size:13px;line-height:1.55;color:rgba(0,0,0,.62);
  margin-bottom:20px;}
.avp-lock-card input[type=text],
.avp-lock-card input[type=tel],
.avp-lock-card input[type=email]{
  width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.14);background:#fafaf6;
  font-family:Inter,sans-serif;font-size:14px;margin-bottom:10px;color:#1A1714;
}
.avp-lock-card input:focus{outline:0;border-color:var(--avp-accent,#9B7B4A);background:#fff}
.avp-lock-card .avp-btn-primary{ width:100%; margin-top:6px; }
.avp-lock-mini{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.04em;
  color:rgba(0,0,0,.45);margin-top:14px}

.avp-chips{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:32px auto 4px; max-width:760px;
}
.avp-chips-label{
  display:block; width:100%; text-align:center;
  font-family:Inter,sans-serif; font-size:11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(26,23,20,.55);
  margin-bottom:6px;
}
.avp-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:Inter,sans-serif; font-size:13px; font-weight:500; letter-spacing:.01em;
  padding:9px 16px;
  background:#fff; color:var(--avp-fg, #1A1714);
  border:1px solid rgba(155,123,74,.36);
  border-radius:999px;
  transition:transform .15s, border-color .15s, background .15s;
}
.avp-chip:hover{ transform:translateY(-1px); border-color:var(--avp-accent, #9B7B4A); }
.avp-chip-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--avp-accent, #9B7B4A); color:#fff;
  flex:0 0 auto;
}

.avp-result-actions{
  display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;
}
.avp-result-actions .avp-btn{ padding:14px 22px; }

.avp-limit{
  max-width:540px;margin:0 auto;text-align:center;padding:48px 24px;
}
.avp-limit-icon{font-size:42px;margin-bottom:12px}
.avp-limit input{
  display:block;width:100%;padding:14px 16px;margin:8px 0;
  border:1px solid rgba(0,0,0,.14);font-family:Inter,sans-serif;font-size:14px;
}
.avp-limit .avp-btn-primary{margin-top:14px;width:100%}
.avp-limit-or{margin-top:16px;font-family:Inter,sans-serif;font-size:13px;color:rgba(0,0,0,.6)}
.avp-limit-or a{color:var(--avp-accent,#9B7B4A);font-weight:600;text-decoration:underline}

/* Mobile upload buttons */
.avp-upload-cta-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.avp-upload-cta{
  font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:12px 20px;background:var(--avp-accent,#9B7B4A);color:#fff;
  border:0;cursor:pointer;transition:transform .2s, background .2s;
}
.avp-upload-cta:hover{background:#7A5E36;transform:translateY(-1px)}
.avp-upload-cta-camera{background:#1A1714;color:#fff}
.avp-upload-cta-camera:hover{background:#000}

/* Mobile slider tweaks */
@media (max-width:540px){
  .avp-ba{aspect-ratio:3/4}
  .avp-lock-card{padding:24px 20px}
  .avp-lock-title{font-size:20px}
}


/* ============================================================
   MODAL FLOW
   Step 1 inline -> modal for steps 2..N + generating -> inline result
   ============================================================ */
body.avp-modal-locked{ overflow:hidden; }

.avp-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:avpFadeIn .25s ease;
}
.avp-modal[hidden]{ display:none !important; }
@keyframes avpFadeIn{ from{opacity:0} to{opacity:1} }

.avp-modal-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.avp-modal-card{
  position:relative; z-index:1;
  width:100%; max-width:580px;
  max-height:90vh;
  background:var(--avp-bg, #F2EDE4);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.55);
  border-top:3px solid var(--avp-accent, #9B7B4A);
  /* Soft card. The ≤640px block below resets this to 0 for the full-screen
     mobile sheet, so this rule must stay here rather than being appended later. */
  border-radius:16px;
  display:flex; flex-direction:column;
  padding:32px 32px 28px;
  overflow:hidden;
  animation:avpModalRise .35s cubic-bezier(.22,1,.36,1);
}
@keyframes avpModalRise{ from{transform:translateY(20px); opacity:0} to{transform:translateY(0); opacity:1} }

.avp-modal-close{
  position:absolute; top:10px; right:14px;
  width:36px; height:36px; border:0; background:transparent;
  font-family:Fraunces, Georgia, serif; font-weight:300; font-size:32px;
  line-height:1; color:var(--avp-fg, #1A1714); cursor:pointer; z-index:2;
  transition:transform .15s ease;
}
.avp-modal-close:hover{ transform:rotate(90deg) }

/* margin-bottom was 6px; the extra room is where the percent readout sits, below
   the rule rather than beside it — the bar itself is only 2px tall, so there is no
   "beside" to put it in without inflating the whole header. */
.avp-modal-progress{
  position:relative; width:100%; height:2px;
  background:rgba(26,23,20,.1); margin-bottom:20px; flex:0 0 auto;
}
.avp-modal-progress-pct{
  position:absolute; right:0; top:6px; line-height:1;
  font-family:Inter, sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.14em; color:var(--avp-accent, #9B7B4A);
}
.avp-modal-progress-bar{
  position:absolute; left:0; top:0; height:100%;
  background:var(--avp-accent, #9B7B4A);
  width:14%;
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.avp-modal-step-counter{
  font-family:Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--avp-accent, #9B7B4A);
  margin:14px 0 8px;
  flex:0 0 auto;
}

/* Modal step content area: scrollable INSIDE the card if needed,
   but we tune sizing so it usually fits. */
.avp-modal-card .avp-step{
  display:none; flex:1 1 auto; min-height:0;
  overflow-y:auto; padding-right:4px;
}
.avp-modal-card .avp-step.active{ display:flex; flex-direction:column; }
.avp-modal-card .avp-step-title{
  font-family:Fraunces, Georgia, serif; font-weight:300; font-size:24px !important;
  line-height:1.18 !important; letter-spacing:-.01em;
  color:var(--avp-fg, #1A1714);
  margin:8px 0 8px;
}
.avp-modal-card .avp-step-help{
  font-family:Inter, sans-serif; font-size:13px; line-height:1.5;
  color:rgba(26,23,20,.62); margin-bottom:16px;
}

/* Compact options grid for modal: 2 cols on desktop, 1 col on small */
.avp-modal-card .avp-options{
  display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}
.avp-modal-card .avp-option{
  padding:12px 14px !important; min-height:0;
  font-size:13px !important;
  background:#fff !important;
  border:1px solid rgba(26,23,20,.12) !important;
  border-radius:12px !important;
}
.avp-modal-card .avp-option:hover,
.avp-modal-card .avp-option.selected{
  border-color:var(--avp-accent, #9B7B4A) !important;
  background:rgba(155,123,74,.08) !important;
}
.avp-modal-card .avp-option-label{
  font-weight:500; font-size:13px; display:block; margin-bottom:2px;
}
.avp-modal-card .avp-option-hint{
  font-size:11px; color:rgba(26,23,20,.55);
}

.avp-modal-card .avp-step-nav{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px;
  flex:0 0 auto;
}
.avp-modal-card .avp-btn{
  padding:13px 22px !important; font-size:11px !important; letter-spacing:.18em !important;
  border-radius:12px !important;
}
/* Continue/Unlock must out-shout the ghost buttons beside it. */
.avp-modal-card .avp-btn-primary{
  font-size:13px !important; font-weight:700 !important; letter-spacing:.14em !important;
  padding:14px 26px !important;
}
/* Skip's short label only exists on phones (swapped in the ≤640px block). */
.avp-skip-photo .avp-skip-label-short{ display:none; }

/* Bigger than the other primaries but NOT bolder (owner, 2026-08-10). This is the
   second of the two routes through the funnel, not a footnote — at the shared 13px it
   read as an opt-out and people left at the upload step. Size and its own full row are
   what make it findable; the weight was doing a second job the size already does, and
   at 700 it competed with the two upload CTAs above it for the same tap. Placed after
   the .avp-modal-card .avp-btn-primary rule above: equal specificity, source order
   decides, so this must stay below it. */
.avp-btn.avp-skip-photo,
.avp-modal-card .avp-btn-primary.avp-skip-photo{
  font-size:15px !important; font-weight:400 !important;
  letter-spacing:.06em !important; padding:16px 26px !important;
}

/* Controls inside the card follow the card: 12px on anything box-shaped.
   The photo step lands in here in autoopen mode, so the dropzone counts too. */
.avp-modal-card .avp-upload-zone{ border-radius:12px; }
.avp-modal-card .avp-upload-cta{ border-radius:12px; }
.avp-modal-card .avp-preview img{ border-radius:12px; }
.avp-modal-card .avp-option-img{ border-radius:8px; }
.avp-modal-card input[type=text],
.avp-modal-card input[type=tel],
.avp-modal-card input[type=email]{ border-radius:10px; }

/* ---- Summary rail: chips of what they have picked, in quiz order ----
   One line tall and horizontally scrollable so a 12-pick features step can
   never push the options grid off the card. Fades at the right edge to
   signal there is more. */
.avp-modal-summary{
  display:flex; align-items:center; gap:6px;
  flex:0 0 auto; min-height:26px;
  margin:14px 0 10px; padding-bottom:2px;
  overflow-x:auto; overflow-y:hidden;
  /* Deliberately NOT scroll-behavior:smooth. The rail's innerHTML is rebuilt on
     every pick, and a smooth scroll requested in that same frame gets cancelled
     against the discarded content, leaving the newest chip off-screen. The jump
     is invisible anyway because the incoming chip fades in over it. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.avp-modal-summary::-webkit-scrollbar{ display:none; }
/* The rail auto-scrolls to the newest chip, so anything hidden is off the LEFT
   edge. Fade that side only, and only once actually scrolled, so the newest pick
   stays at full contrast and a short row is never dimmed for no reason. */
.avp-modal-summary.is-scrolled{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);
}
/* Tighter tracking and an ellipsis rather than nowrap-and-clip: at .18em the old
   placeholder ran a few characters wider than the rail on a 375px phone and was cut
   mid-word ("YOUR PICKS APPEAR HERE AS Y"), which reads as a rendering fault. */
.avp-modal-summary-empty{
  font-family:Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(26,23,20,.34);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.avp-modal-chip{
  flex:0 0 auto; white-space:nowrap;
  padding:5px 11px; border-radius:12px;
  background:#fff; border:1px solid rgba(155,123,74,.34);
  font-family:Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:.01em;
  color:var(--avp-accent, #9B7B4A);
}
/* Only the newest chip animates. The rail re-renders wholesale on every pick,
   so animating all of them would flash the whole row each time. */
.avp-modal-chip:last-child{ animation:avpChipIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes avpChipIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.avp-modal-chip-more{
  background:transparent; border-style:dashed; color:rgba(26,23,20,.5);
}
@media (prefers-reduced-motion: reduce){
  .avp-modal-chip:last-child{ animation:none; }
}
/* The mobile close button is a 48px circle pinned top-right, and the rail runs the
   full width of the card. Reserve a gutter so the newest chip never scrolls to rest
   underneath it. */
@media (max-width:640px){
  /* margin, not padding: trailing padding on a flex scroll row is not reliably
     added to scrollWidth, so a chip could still come to rest under the button. */
  .avp-modal-summary{ margin-right:56px; }
}

/* Generating step inside modal */
.avp-modal-card #avpStepGenerating{ display:none; }
.avp-modal-card #avpStepGenerating.active{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:340px; }
.avp-modal-card .avp-loading{ padding:30px 0; text-align:center; }
.avp-modal-card .avp-spinner{ margin:0 auto 18px; }

/* Mobile: full-screen modal */
@media (max-width:640px){
  .avp-modal{ padding:0 }
  .avp-modal-card{
    max-width:none; width:100%; max-height:none; height:100vh;
    /* Was 24/20/18. The popup is the whole screen here, so its padding is competing
       with the content for the only viewport there is — and the headline, the
       dropzone and the two buttons all have to fit above the fold together. */
    padding:16px 16px 14px;
    border-top:0;
  }
  .avp-modal-close{ top:8px; right:10px; }
  /* Two columns, not one. A single column turned the 12-option features step into
     roughly 670px of cards, so every step scrolled and the visitor had to hunt for
     Continue. Paired up, the longest step is six rows and fits the screen. */
  .avp-modal-card .avp-options{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  /* Up from 20px, not down. This line is now the popup's headline — it carries the
     copy the intro card used to — and the space for it comes from the padding above
     rather than from the type. */
  .avp-modal-card .avp-step-title{ font-size:23px !important; margin:0 0 6px; }
  .avp-modal-card .avp-step-help{ font-size:13.5px; margin-bottom:12px; }
}

/* Inline step 1 visual tighten: reduce vertical space */
.avp-step-inline{ }
.avp-root .avp-step-inline + .avp-modal{ /* no-op anchor */ }


/* ============================================================
   UPLOAD ZONE V2 - drag-and-drop, gallery, optional camera
   ============================================================ */
.avp-upload-zone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:42px 24px;
  border:1.5px dashed rgba(26,23,20,.22);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
  text-align:center;
  min-height:240px;
}
.avp-upload-zone:hover{
  border-color:var(--avp-accent, #9B7B4A);
  background:rgba(155,123,74,.06);
}
.avp-upload-zone.avp-drag-over{
  border-color:var(--avp-accent, #9B7B4A);
  background:rgba(155,123,74,.14);
  transform:scale(1.005);
}
.avp-upload-icon{
  width:64px; height:64px; border-radius:50%;
  background:rgba(155,123,74,.14); color:var(--avp-accent, #9B7B4A);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.avp-upload-text{
  font-family:Fraunces, Georgia, serif; font-weight:300; font-size:22px;
  letter-spacing:-.01em; color:var(--avp-fg, #1A1714);
  line-height:1.2;
}
.avp-upload-hint{
  font-family:Inter, sans-serif; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(26,23,20,.5);
  margin-top:4px;
}
.avp-upload-cta-row{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px;
}
/* Doc-upload zones (mold remediation) carry THREE actions. In a row they wrap
   2+1 and read as clutter; a centered stack reads as "pick your situation", with
   the report button first and in the accent color because the step's help text
   names it as the best option — the visual hierarchy repeats the verbal one. */
.avp-upload-doc .avp-upload-cta-row{ flex-direction:column; align-items:center; gap:8px; }
.avp-upload-doc .avp-upload-cta{ width:100%; max-width:340px; }
.avp-upload-doc .avp-upload-cta-doc{ background:var(--avp-accent, #9B7B4A); }
.avp-upload-doc .avp-upload-cta-doc:hover{ background:#7A5E36; }
.avp-upload-cta{
  font-family:Inter, sans-serif; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:13px 22px;
  background:var(--avp-fg, #1A1714); color:#fff; border:0; cursor:pointer;
  display:inline-flex; align-items:center;
  transition:transform .2s, background .2s;
}
.avp-upload-cta:hover{ background:#000; transform:translateY(-1px); }
.avp-upload-cta-camera{
  background:var(--avp-accent, #9B7B4A);
}
.avp-upload-cta-camera:hover{ background:#7A5E36; }

/* Per-device text */
.avp-upload-text-desktop{ display:block; }
.avp-upload-text-mobile { display:none; }

/* Camera button: hide on devices that don't have a coarse pointer (= desktop with mouse). */
.avp-upload-cta-camera{ display:inline-flex; }
@media (hover: hover) and (pointer: fine){
  .avp-upload-cta-camera{ display:none; }
  .avp-upload-text-desktop{ display:block; }
  .avp-upload-text-mobile { display:none; }
}
@media (pointer: coarse){
  .avp-upload-text-desktop{ display:none; }
  .avp-upload-text-mobile { display:block; }
  .avp-upload-cta-camera{ display:inline-flex; }
}


/* Download button in result-actions */
.avp-btn-download{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--avp-accent, #9B7B4A) !important; color:#fff !important;
}
.avp-btn-download:hover{ background:#7A5E36 !important; }
.avp-result-actions{ flex-wrap:wrap; }
.avp-result-actions .avp-btn-download{ flex:1 1 280px; min-width:240px; }
@media (max-width:540px){
  .avp-result-actions .avp-btn{ flex:1 1 100%; }
}


/* ============================================================
   PHOTO PREVIEW (after upload, before Continue)
   ============================================================ */
.avp-preview-card{
  display:flex; align-items:center; gap:18px;
  padding:14px;
  background:#fff;
  border:1px solid rgba(26,23,20,.12);
  border-left:3px solid var(--avp-accent, #9B7B4A);
}
.avp-preview-img{
  width:120px; height:90px; object-fit:cover;
  display:block; flex:0 0 auto;
  background:#f0ede4;
}
/* PDF stand-in for the thumbnail slot. Same box as .avp-preview-img so the meta
   column and the Change button land in exactly the same place whether the visitor
   attached the lab's PDF or photographed the printed pages — the card must not
   reflow between the two. */
.avp-preview-doc{
  width:120px; height:90px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:#f0ede4; color:rgba(26,23,20,.5);
}
.avp-preview-meta{ flex:1 1 auto; min-width:0; }
.avp-preview-name{
  font-family:Inter, sans-serif; font-weight:500; font-size:14px;
  color:var(--avp-fg, #1A1714);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.avp-preview-size{
  font-family:Inter, sans-serif; font-size:12px; color:rgba(26,23,20,.55);
  margin-top:4px;
}
.avp-preview-change{
  font-family:Inter, sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  background:transparent; color:var(--avp-fg, #1A1714);
  border:1px solid rgba(26,23,20,.22);
  padding:10px 16px; cursor:pointer;
  flex:0 0 auto;
  transition:border-color .2s, color .2s;
}
.avp-preview-change:hover{
  border-color:var(--avp-accent, #9B7B4A); color:var(--avp-accent, #9B7B4A);
}
@media (max-width:540px){
  .avp-preview-card{ flex-direction:column; align-items:stretch; gap:12px; }
  .avp-preview-img{ width:100%; height:200px; }
  .avp-preview-doc{ width:100%; height:96px; }
  .avp-preview-change{ width:100%; }
}

/* Hide page content behind modal so it does not show through */
body.avp-modal-locked .avp-step-inline:not(.active){ display:none !important; }
body.avp-modal-locked .avp-result-actions{ display:none !important; }
/* The phone callout is part of the same post-unlock tail as the download button above
   it, so it belongs behind the same guard — otherwise the one piece of the result that
   is a way OUT of the funnel is the one piece that can show through a sealed popup. */
body.avp-modal-locked .avp-result-callout{ display:none !important; }
body.avp-modal-locked .avp-chips{ display:none !important; }


/* ============================================================
   FINAL Locali-style result panel for AVP (kitchen, bathroom,
   adu, hardscape, landscape niches + ADU LP)
   ============================================================ */

/* ============================================================
   ACE result panel v5 - slider + form below, chips/actions only post-unlock
   ============================================================ */

#avpStepResult.active{
  display: block !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
#avpStepResult > .avp-step-title{
  text-align: center;
  /*
   * `auto`, not 0, and the difference is visible.
   *
   * The shortcode renders inside <section class="svc-vis">, so the landing page's
   * own `.svc-vis h2 { max-width:880px; margin:0 auto }` applies to this heading.
   * This rule is more specific and used to reset the margin to 0 while leaving the
   * theme's 880px cap in place — a box narrower than the 1052px step, pinned to the
   * left edge, with the text centred inside it. Measured 62px off centre at desktop
   * width while the slider and the sub-heading below sat dead centre.
   *
   * Keeping the margin auto centres the box whatever max-width the surrounding page
   * imposes, which is what .avp-step-help below has always done.
   */
  margin: 0 auto 10px;
}
#avpStepResult > .avp-step-help{
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}

/* ===== Before/After slider - always landscape ===== */
#avpStepResult > .avp-ba{
  position: relative !important;
  width: 100% !important;
  max-width: 800px !important;
  aspect-ratio: 16 / 10 !important;
  margin: 0 auto !important;
  border: 1px solid rgba(26,23,20,.12);
  box-shadow: 0 30px 80px -30px rgba(26,23,20,.4);
  background: #1A1714;
  overflow: hidden !important;
}
@media (max-width: 720px){
  #avpStepResult > .avp-ba{
    aspect-ratio: 4 / 3 !important;
    max-width: 100% !important;
  }
}

/* While locked, blur the AFTER side so it reads as "preview" */
#avpStepResult .avp-ba.locked .avp-ba-after{
  filter: blur(18px) brightness(.7) saturate(.85);
  transform: scale(1.05);
}

/* ===== Before/After tags ===== */
#avpStepResult .avp-ba-tag-before,
#avpStepResult .avp-ba-tag-after{
  position: absolute !important;
  top: 14px !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  font-family: Inter, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  z-index: 6 !important;
}
#avpStepResult .avp-ba-tag-before{
  left: 14px !important;
  background: #1A1714 !important;
  color: #F2EDE4 !important;
}
#avpStepResult .avp-ba-tag-after{
  right: 14px !important;
  background: linear-gradient(180deg,#B58E58,#9B7B4A) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(155,123,74,.4) !important;
}

/* Drag handle */
#avpStepResult .avp-ba-handle{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50%;
  width: 3px !important;
  height: auto !important;
  margin-left: -1.5px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 0 8px rgba(0,0,0,.35) !important;
  z-index: 5 !important;
  cursor: ew-resize !important;
}
#avpStepResult .avp-ba-handle::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #fff !important;
  border: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
}
#avpStepResult .avp-ba-handle::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 22px !important;
  height: 22px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B7B4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 5 4 9 8 13'/><line x1='4' y1='9' x2='20' y2='9'/><polyline points='16 11 20 15 16 19'/><line x1='4' y1='15' x2='20' y2='15'/></svg>") center/contain no-repeat !important;
  z-index: 1 !important;
}

/* ===== Lock card: BLOCK BELOW the slider, compact ===== */
#avpStepResult > .avp-lock{
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  max-width: 800px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: auto !important;
}
#avpStepResult > .avp-lock-card,
#avpStepResult .avp-lock-card{
  background: #FFFFFF !important;
  border: 1px solid rgba(26,23,20,.1) !important;
  border-top: 3px solid #9B7B4A !important;
  border-radius: 12px !important;
  padding: 24px 26px !important;
  max-width: 800px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 14px 40px -20px rgba(26,23,20,.25) !important;
  margin: 0 !important;
  backdrop-filter: none !important;
}
#avpStepResult .avp-lock-card *{ color: #1A1714 !important; }

#avpStepResult .avp-lock-eyebrow{
  font-family: Inter, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: #9B7B4A !important;
  margin: 0 0 8px 0 !important;
}
#avpStepResult .avp-lock-title{
  font-family: Fraunces, Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #1A1714 !important;
  margin: 0 0 16px 0 !important;
}

/* Inline 3-column field row on desktop, stacked on mobile */
#avpStepResult .avp-lock-fields{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
}
@media (max-width: 720px){
  #avpStepResult .avp-lock-fields{ grid-template-columns: 1fr !important; }
}

#avpStepResult .avp-lock-card input[type=text],
#avpStepResult .avp-lock-card input[type=tel],
#avpStepResult .avp-lock-card input[type=email]{
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(26,23,20,.18) !important;
  background: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  margin: 0 !important;
  color: #1A1714 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
#avpStepResult .avp-lock-card input::placeholder{ color: rgba(26,23,20,.45) !important; }
#avpStepResult .avp-lock-card input:focus{
  outline: 0 !important;
  border-color: #9B7B4A !important;
  box-shadow: 0 0 0 3px rgba(155,123,74,.14) !important;
}

#avpStepResult .avp-lock-card .avp-btn-primary,
#avpStepResult .avp-lock-card #avpReveal{
  background: linear-gradient(180deg,#B58E58,#9B7B4A) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  width: 100% !important;
  padding: 14px 22px !important;
  border-radius: 9px !important;
  font: 700 12px/1 Inter, system-ui !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  box-shadow: 0 8px 18px rgba(155,123,74,.4) !important;
  transition: transform .15s, box-shadow .2s !important;
}
#avpStepResult .avp-lock-card .avp-btn-primary:hover,
#avpStepResult .avp-lock-card #avpReveal:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(155,123,74,.5) !important;
}
#avpStepResult .avp-lock-mini{
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .03em !important;
  color: rgba(26,23,20,.5) !important;
  margin-top: 12px !important;
}

/* ============================================================
   PRE-UNLOCK state: hide chips + result-actions while .avp-ba is locked
   ============================================================ */
#avpStepResult > .avp-ba.locked ~ .avp-chips,
#avpStepResult > .avp-ba.locked ~ .avp-result-actions{
  display: none !important;
}

/* ===== Result actions (POST-UNLOCK only) ===== */
#avpStepResult > .avp-result-actions{
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 22px auto 0 !important;
  max-width: 800px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#avpStepResult > .avp-result-actions[hidden]{ display: none !important; }
.avp-result-actions-secondary{ display: contents !important; }

#avpStepResult .avp-result-actions .avp-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 26px !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: all .2s ease !important;
}
#avpStepResult .avp-result-actions .avp-btn-primary,
#avpStepResult .avp-result-actions .avp-btn-download{
  background: linear-gradient(180deg,#B58E58,#9B7B4A) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(155,123,74,.35) !important;
}
#avpStepResult .avp-result-actions .avp-btn-primary:hover,
#avpStepResult .avp-result-actions .avp-btn-download:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(155,123,74,.5) !important;
}
#avpStepResult .avp-result-actions .avp-btn-ghost{
  background: transparent !important;
  color: #1A1714 !important;
  border: 1px solid rgba(26,23,20,.22) !important;
}
#avpStepResult .avp-result-actions .avp-btn-ghost:hover{
  border-color: #9B7B4A !important;
  color: #9B7B4A !important;
  background: rgba(155,123,74,.04) !important;
}

@media (max-width: 720px){
  #avpStepResult > .avp-result-actions{ flex-direction: column !important; }
  #avpStepResult > .avp-result-actions .avp-btn{ width: 100% !important; }
}

/* ===== Chips: clean summary card, POST-UNLOCK only ===== */
#avpStepResult > .avp-chips{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 36px !important;
  row-gap: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(26,23,20,.12) !important;
  border-radius: 12px !important;
  padding: 28px 36px !important;
  margin: 24px auto 0 !important;
  max-width: 800px !important;
}
#avpStepResult > .avp-chips:empty{ display: none !important; }

@media (max-width: 720px){
  #avpStepResult > .avp-chips{
    grid-template-columns: 1fr !important;
    padding: 22px 24px !important;
  }
}

.avp-chips-label{
  display: block !important;
  grid-column: 1 / -1 !important;
  text-align: center !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: #9B7B4A !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(26,23,20,.08) !important;
}

#avpStepResult > .avp-chips > .avp-chip{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(26,23,20,.06) !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1714 !important;
  text-align: left !important;
}
.avp-chip-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #9B7B4A !important;
  color: #fff !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
}

/* Before/After tags: WHITE text, high contrast */
.avp-ba-tag,
.avp-ba-tag-before,
.avp-ba-tag-after{
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  padding: 7px 13px !important;
  border-radius: 4px !important;
}
.avp-ba-tag-before{
  background: rgba(26,23,20,.92) !important;
  border: 1px solid rgba(242,237,228,.18) !important;
}
.avp-ba-tag-after{
  background: #9B7B4A !important;
  color: #1A1714 !important;
  border: 1px solid #9B7B4A !important;
}

/* Mobile: BA tags below the image, not on top */
@media (max-width: 640px){
  .avp-ba{ margin-bottom: 46px !important; position: relative; }
  .avp-ba-tag-before,
  .avp-ba-tag-after{
    position: absolute !important;
    top: auto !important;
    bottom: -36px !important;
    font-size: 9px !important;
    padding: 5px 10px !important;
  }
  .avp-ba-tag-before{ left: 0 !important; }
  .avp-ba-tag-after{ right: 0 !important; }
}


/* ============================================================
   MOBILE-FIRST FOUNDATION (added 2026-05-05)
   - Modal goes full-screen on mobile (no floating box)
   - Safe-area-inset for notched devices
   - 16px inputs (iOS auto-zoom guard) + 48px tap targets
   - Bigger close button hit area
   ============================================================ */

@media (max-width: 640px){
  /* Modal full-screen on mobile */
  .avp-modal{
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .avp-modal-card{
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-top: 0;
    /* Floors, not bare env(): on a phone without a notch these resolve to 0 and the
       card's own padding was being wiped out entirely, dropping content flush against
       both screen edges and under the close button. */
    padding-top: max(10px, env(safe-area-inset-top, 0));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0));
  }
  /* One scroller only. The card and .avp-step were both scrollable, which on iOS
     lets the sticky footer drift when the outer container takes the gesture. The
     card is now pinned to the viewport and .avp-step does all the scrolling. */
  .avp-modal-card{
    overflow: hidden;
  }
  .avp-modal-card .avp-step{
    -webkit-overflow-scrolling: touch;
  }

  /* Larger, easier-to-tap close button */
  .avp-modal-close{
    width: 48px !important;
    height: 48px !important;
    font-size: 32px !important;
    top: max(12px, env(safe-area-inset-top, 0)) !important;
    right: 12px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  /* Lock card inputs: 16px (no iOS zoom) + 48px tap */
  .avp-lock-card input[type=text],
  .avp-lock-card input[type=tel],
  .avp-lock-card input[type=email],
  .avp-limit input[type=text],
  .avp-limit input[type=tel],
  .avp-limit input[type=email]{
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
  }

  /* Buttons: 48px tap min */
  .avp-btn,
  .avp-btn-primary,
  .avp-btn-ghost,
  .avp-option,
  .avp-upload-cta{
    min-height: 48px;
  }

  /* Upload zone tighter on mobile. The 240px min-height and 32px padding were sized
     for a zone that owned the screen; it now shares it with a headline above and the
     skip button below, and the two CTAs inside it are what has to stay visible. */
  .avp-upload-zone{
    padding: 20px 16px !important;
    min-height: 0 !important;
    gap: 10px;
  }
  .avp-upload-icon{
    width: 48px; height: 48px; margin-bottom: 0;
  }
  .avp-upload-icon svg{ width: 30px; height: 30px; }
  .avp-upload-text{ font-size: 18px; }
  .avp-upload-hint{ margin-top: 0; }
  .avp-upload-cta-row{
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
  }
  .avp-upload-cta{
    width: 100%;
    justify-content: center;
  }
  .avp-upload-text-desktop{display: none}
  .avp-upload-text-mobile{display: block}

  /* Step nav sticky to bottom on mobile so Continue is reachable */
  .avp-step-nav{
    position: sticky;
    bottom: 0;
    background: var(--avp-bg, #F2EDE4);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0));
    margin-top: 8px;
    z-index: 5;
    box-shadow: 0 -8px 16px -8px rgba(0,0,0,.08);
  }
  /* The nav's own border+padding sit on top of the sticky bar's, which stacked ~30px
     of rule-and-gap between the dropzone and the skip button. */
  .avp-modal-card .avp-step-nav{ padding-top: 10px; margin-top: 10px; }

  /* Inside the modal the two buttons sit side by side rather than stacking. Stacked
     full-width buttons (the .avp-step-nav rule at ~line 359) reserved about 150px of
     a 812px screen for navigation alone, which is most of what forced every step to
     scroll. Back only needs to be as wide as its label; Continue takes the rest. */
  .avp-modal-card .avp-step-nav{
    flex-direction: row;
    align-items: center;
    /* Three-button steps (Back / Skip / Continue on the diagnosis photo step)
       overflow a phone-width row; wrapping drops Continue to its own full line.
       Two-button steps fit on one line and never wrap. */
    flex-wrap: wrap;
  }
  .avp-modal-card .avp-step-nav .avp-btn{
    width: auto;
    margin: 0;
  }
  .avp-modal-card .avp-step-nav .avp-btn-ghost{
    flex: 0 0 auto;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .avp-modal-card .avp-step-nav .avp-btn-primary{
    flex: 1 1 auto;
    font-size: 14px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  /* Skip now takes a FULL row of its own on phones, under Back. It used to share the
     row with Back at 12px, which is the smallest type in the modal — fine when it was
     an apology ("no photo handy"), wrong now that it is the second of the two ways
     through the funnel. Wrapping the nav lets it be full width and legible instead of
     the runt of a pair. */
  .avp-modal-card .avp-step-nav{ flex-wrap: wrap; }
  .avp-modal-card .avp-step-nav .avp-skip-photo{
    flex: 1 0 100%;
    min-width: 0;
    order: 2;
    white-space: normal;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .avp-skip-photo .avp-skip-label-full{ display:none; }
  .avp-skip-photo .avp-skip-label-short{ display:inline; }

  /* Text-only option cards (every kitchen step past the photo) do not need the 110px
     image height. Trimming them is what buys the last two rows on the tallest step. */
  .avp-modal-card .avp-option{
    min-height: 0 !important;
    padding: 11px 12px !important;
  }
  .avp-modal-card .avp-modal-summary{ margin: 6px 56px 6px 0; }
  .avp-modal-card .avp-modal-step-counter{ margin: 8px 0 4px; }

  /* Before/After slider: full-width, taller for thumb-drag comfort */
  .avp-ba{
    aspect-ratio: 4 / 5;
    margin-left: -16px;
    margin-right: -16px;
  }
  .avp-ba-handle{
    width: 56px !important;
    height: 56px !important;
  }
  .avp-ba-tag-before,
  .avp-ba-tag-after{
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  /* Lock card overlay full-cover with scroll */
  .avp-lock{
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .avp-lock-card{
    max-width: 100%;
    padding: 24px 20px;
  }

  /* The options grid is set for phones at line ~357 and, inside the modal, in the
     640px block above. A third copy used to sit here restating the same thing and
     losing to the modal rule anyway, so it has been removed rather than left to
     look load-bearing. .avp-option's 110px floor stays: it applies to the INLINE
     step-1 cards, which carry images and need the height. */
  .avp-option{
    min-height: 110px;
  }

  /* Result actions stack */
  .avp-result-actions{
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .avp-result-actions .avp-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px){
  .avp-options{
    grid-template-columns: 1fr !important;
  }
}

/* Reduced-motion: kill spin/fade animations */
@media (prefers-reduced-motion: reduce){
  .avp-spinner,
  .avp-modal,
  .avp-step{
    animation: none !important;
    transition: none !important;
  }
}

/* Focus-visible ring */
.avp-btn:focus-visible,
.avp-option:focus-visible,
.avp-modal-close:focus-visible,
.avp-upload-cta:focus-visible{
  outline: 2px solid var(--avp-accent, #9B7B4A);
  outline-offset: 3px;
}

/* Hide on landscape phones if too short to be usable comfortably */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape){
  .avp-modal-card{
    height: 100vh;
    max-height: none;
  }
}

/* === END MOBILE-FIRST FOUNDATION ============================*/

/* ============================================================
   LAUNCHER (autoopen mode)
   The upload step lives in the popup, so the page keeps this
   section as the way back in after a dismiss. Mirrors the
   mockup-v2 .svc-vis band: bronze eyebrow, split-italic serif
   headline, single primary CTA.
   ============================================================ */
.avp-launcher {
  text-align: center;
  padding: clamp(56px, 9vw, 104px) 24px;
  background: var(--avp-cream);
}
.avp-launcher-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--avp-bronze);
  margin-bottom: 18px;
}
.avp-launcher-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--avp-ink);
  margin: 0 auto 14px;
  max-width: 16ch;
}
.avp-launcher-title em {
  font-style: italic;
  color: var(--avp-bronze);
}
.avp-launcher-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--avp-stone);
  margin: 0 auto 32px;
  max-width: 46ch;
}
.avp-launcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  width: auto;
}
.avp-launcher-arrow { transition: transform .22s ease; }
.avp-launcher-btn:hover .avp-launcher-arrow { transform: translateX(5px); }

/* The dropzone, docked inline. Scoped to the dock on purpose: the same node moves
   into the modal, where the unscoped .avp-upload chrome (outer dashed frame, 64px
   padding) still applies. Inline, the inner zone IS the whole UI, so the wrapper
   goes invisible and the zone gets the modal's rounding. */
.avp-launcher-zone { max-width: 660px; margin: 0 auto; }
.avp-launcher-zone .avp-upload { margin: 0; padding: 0; border: 0; background: transparent; }
.avp-launcher-zone .avp-upload:hover { background: transparent; }
.avp-launcher-zone .avp-upload-zone { border-radius: 12px; }

/* Same treatment inside the modal: the .avp-upload wrapper used to draw a second
   dashed frame around the zone there (frame in a frame). The modal card is the
   container; the zone is the affordance. Now popup and inline read identically. */
.avp-modal-card .avp-upload { padding: 0; border: 0; background: transparent; }
.avp-modal-card .avp-upload:hover { background: transparent; }
/* .avp-launcher-btn sets display:inline-flex, which outranks the UA [hidden] rule. */
.avp-launcher-btn[hidden] { display: none !important; }

@media (max-width: 640px) {
  .avp-launcher { padding: 56px 20px; }
  .avp-launcher-title { max-width: none; }
  .avp-launcher-btn { width: 100%; justify-content: center; }
  .avp-launcher-zone .avp-upload-zone { min-height: 200px; padding: 32px 18px; }
}

/* ============================================================
   REVEAL GATE (modal step) + post-reveal upgrade offer + sticky bar
   ============================================================ */
/* Quiz chrome is noise on the gate: hide rail + progress, keep the close X. */
.avp-modal-card.at-gate .avp-modal-summary,
.avp-modal-card.at-gate .avp-modal-progress{ display:none; }

.avp-gate-card{ text-align:center; padding:6px 2px 2px; }
.avp-gate-eyebrow{
  font:600 10.5px/1.3 Inter,system-ui; letter-spacing:.32em; text-transform:uppercase;
  color:#9B7B4A; margin:0 0 10px;
}
.avp-gate-title{
  font-family:Fraunces,Georgia,serif; font-weight:400; font-size:24px; line-height:1.15;
  letter-spacing:-.01em; color:#1A1714; margin:0 0 14px;
}
.avp-gate-teaser{
  width:100%; aspect-ratio:16/6; object-fit:cover; display:block;
  border-radius:10px; margin:0 0 16px; background:#1A1714;
}
.avp-gate-fields{ display:grid; gap:10px; margin:0 0 12px; }
.avp-gate-fields input{
  width:100%; padding:13px 14px; border:1px solid rgba(26,23,20,.18); background:#fff;
  font:14px Inter,sans-serif; color:#1A1714; border-radius:8px; box-sizing:border-box;
}
.avp-gate-fields input:focus{
  outline:0; border-color:#9B7B4A; box-shadow:0 0 0 3px rgba(155,123,74,.14);
}
.avp-gate-reveal{
  width:100%; background:linear-gradient(180deg,#B58E58,#9B7B4A) !important; color:#fff !important;
  border:0 !important; padding:15px 22px !important; border-radius:9px !important;
  font:700 12px/1 Inter,system-ui !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  box-shadow:0 8px 18px rgba(155,123,74,.4); cursor:pointer;
  transition:transform .15s, box-shadow .2s;
}
.avp-gate-reveal:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(155,123,74,.5); }
/* Diagnosis has no image to blur, so the report's own headline stands in for the
   teaser. Serif and dark because it is the thing being withheld, not supporting copy —
   at Inter 13px it read as another line of the fine print underneath it. */
.avp-gate-diag{
  font-family:Fraunces,Georgia,serif; font-weight:400; font-size:17px; line-height:1.3;
  color:#1A1714; margin:0 0 14px; padding:12px 14px;
  background:rgba(155,123,74,.09); border-left:3px solid #9B7B4A; border-radius:0 8px 8px 0;
  text-align:left;
}
.avp-gate-status[hidden]{ display:none; }
.avp-gate-status{ font:13px/1.4 Inter,sans-serif; color:#B3261E; margin:10px 0 0; }
/* The phone only ever appears here — attached to a failure, never beside a working
   form. Inside a sealed popup with no close button, a visitor whose save keeps failing
   would otherwise have nothing at all to act on. */
.avp-gate-status-call{
  display:inline-block; margin-left:2px; white-space:nowrap;
  color:#1A1714; font-weight:700; text-decoration:underline;
}
.avp-gate-mini{
  font:11px/1.4 Inter,sans-serif; letter-spacing:.04em; color:rgba(26,23,20,.5); margin:12px 0 0;
}
@media (min-width:721px){ .avp-gate-card{ max-width:440px; margin:0 auto; } }

/* Inline fallback card error line (same treatment, lock-card context) */
.avp-lock-status[hidden]{ display:none; }
.avp-lock-status{ font:13px/1.4 Inter,sans-serif; color:#B3261E !important; margin:10px 0 0; }

/* Post-reveal $1,500 offer — ported from the removed wave-4 template styles */
/* ---- Post-unlock confirmation + phone ----
   Revealed by showLeadSuccess() once the lead is stored. Cream card rather than the
   dark promo panel below it: this is a receipt and a phone number, not an offer. */
.avp-lead-success{
  max-width:800px; margin:22px auto 0; padding:22px 24px;
  background:#fff; border:1px solid rgba(155,123,74,.34); border-radius:10px;
  text-align:center;
}
.avp-lead-success-eyebrow{
  font-family:Inter,sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--avp-accent,#9B7B4A); margin-bottom:10px;
}
.avp-lead-success-title{
  margin:0 0 8px; font-family:Fraunces,Georgia,serif; font-weight:300;
  font-size:22px; line-height:1.25; color:var(--avp-fg,#1A1714);
}
.avp-lead-success-body{
  margin:0 0 18px; font-family:Inter,sans-serif; font-size:13px; line-height:1.6;
  color:rgba(26,23,20,.66);
}
.avp-lead-success-call{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
@media (max-width:540px){
  .avp-lead-success{ padding:20px 16px; }
  .avp-lead-success-call{ width:100%; }
}

.avp-upgrade-offer{
  max-width:800px; margin:22px auto 0; padding:20px 24px;
  background:linear-gradient(135deg,#1A1714 0%,#2C2620 100%); border-radius:10px;
  color:#F2EDE4; text-align:center; position:relative; overflow:hidden;
}
.avp-upgrade-offer::before{
  content:""; position:absolute; top:0; left:-50%; right:-50%; height:2px;
  background:linear-gradient(90deg,transparent,#D9C9A8,transparent);
  animation:avpShimmer 2.5s ease-in-out infinite;
}
@keyframes avpShimmer{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
.avp-upgrade-eyebrow{
  font:600 11px/1.3 Inter,system-ui; letter-spacing:.18em; text-transform:uppercase;
  color:#D9C9A8; margin-bottom:10px;
}
.avp-upgrade-asterisk{ color:#D9C9A8; text-decoration:none; margin-left:4px; font-weight:700; }
.avp-upgrade-asterisk:hover{ color:#fff; text-decoration:underline; }
.avp-upgrade-title{
  margin:0 0 16px; font-family:Fraunces,Georgia,serif; font-weight:400;
  font-size:18px; line-height:1.3; color:#F2EDE4;
}
.avp-upgrade-title em{ font-style:italic; color:#E8DCC4; font-weight:500; }
.avp-upgrade-ctas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
@media (max-width:540px){ .avp-upgrade-ctas{ grid-template-columns:1fr; } }
.avp-btn-call,.avp-btn-callback{
  font:600 13px/1.3 Inter,system-ui; letter-spacing:.04em; padding:14px 18px; border-radius:8px;
  border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
}
.avp-btn-call{ background:linear-gradient(135deg,#B58E58,#9B7B4A); color:#fff; box-shadow:0 4px 14px rgba(155,123,74,.4); }
.avp-btn-call:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(155,123,74,.5); color:#fff; }
.avp-btn-callback{ background:#F2EDE4; color:#1A1714; }
.avp-btn-callback:hover{ background:#fff; transform:translateY(-2px); }
.avp-btn-callback.is-confirmed{ background:#3A6B3A; color:#fff; cursor:default; }
.avp-upgrade-fineprint{ font:11px/1.4 Inter,system-ui; color:#A4998A; margin-top:8px; }
.avp-upgrade-fineprint a{ color:#D9C9A8; text-decoration:underline; }

/* Mobile sticky reveal bar — below the modal (z 9999), above page content */
.avp-sticky-reveal{
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(250,246,238,.97); box-shadow:0 -8px 24px rgba(26,23,20,.15);
}
.avp-sticky-reveal .avp-btn{ width:100%; }
@media (min-width:721px){ .avp-sticky-reveal{ display:none !important; } }

/* ===== Diagnosis mode (leak / mold niches) =====
   Accent rides the theme's --bronze custom property: MC pages resolve it to
   bronze, body.lp-leak overrides it to steel blue (mc-lp.css), mold pages to
   theirs — one report design, brand-correct color on every LP. The fallback is
   the plugin's own bronze for any host page that defines no variable. */
.avp-diag{--diag-accent:var(--bronze,#8a6d3b);max-width:720px;margin:0 auto;text-align:left}

/* Severity meter: soft full-spectrum track, solid fill in the severity color,
   needle edge + score kept in the caption. Thicker than v1 so it reads as the
   report's headline graphic, not a progress bar. */
.avp-diag-meter{margin:10px 0 24px}
/* Alpha lives in the gradient stops, NOT in an opacity on the track: element
   opacity would multiply onto the child .avp-diag-meter-fill and wash the
   severity color down to a pastel (that is exactly what v2 shipped for a rev). */
.avp-diag-meter-track{height:14px;border-radius:8px;background:linear-gradient(90deg,rgba(127,176,105,.25) 0%,rgba(230,201,107,.25) 40%,rgba(224,149,79,.25) 70%,rgba(192,57,43,.25) 100%);position:relative}
.avp-diag-meter-fill{position:absolute;top:-3px;bottom:-3px;left:0;width:0;border-radius:8px 3px 3px 8px;background:currentColor;opacity:.92;border-right:3px solid currentColor;box-shadow:0 1px 6px rgba(0,0,0,.18);transition:width .9s cubic-bezier(.22,1,.36,1)}
.avp-diag-meter[data-severity=low]{--sev:#5a8a46;color:var(--sev)}
.avp-diag-meter[data-severity=moderate]{--sev:#b28f2f;color:var(--sev)}
.avp-diag-meter[data-severity=elevated]{--sev:#c0662f;color:var(--sev)}
.avp-diag-meter[data-severity=urgent]{--sev:#a93226;color:var(--sev)}
.avp-diag-meter-caption{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.avp-diag-meter-score{background:var(--sev,#8a6d3b);color:#fff;border-radius:20px;padding:2px 12px;font-size:12px}
.avp-diag-meter-score:empty{display:none}
.avp-diag-headline{font-size:clamp(20px,3vw,28px);line-height:1.25;margin:0 0 10px}
.avp-diag-teaser{opacity:.85;margin:0 0 22px}
.avp-diag-locked-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:10px;background:rgba(255,255,255,.5)}
.avp-diag-locked-num{font-weight:600;opacity:.5;min-width:1.2em}
.avp-diag-locked-bar{flex:1;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 42px,rgba(0,0,0,.05) 42px 74px);filter:blur(1.5px)}
.avp-diag-locked-tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.avp-diag-report{margin-top:6px}

/* Section cards: icon chip + real-size heading, body in a bordered card.
   The v1 small-caps 12px headings are what made the report read as one long
   undifferentiated column. */
.avp-diag-section{margin:0 0 18px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:18px 20px}
.avp-diag-section-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.avp-diag-section-icon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--diag-accent);background:rgba(0,0,0,.06);background:color-mix(in srgb,var(--diag-accent) 12%,transparent)}
.avp-diag-section-icon svg{width:18px;height:18px}
.avp-diag-section-title{font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;opacity:1;margin:0;line-height:1.2}
.avp-diag-section-body{font-size:14.5px}

/* Per-section accent: urgency sections pull warm/alarm colors regardless of brand. */
.avp-diag-section--risk{--diag-accent:#b26a2f;background:rgba(178,106,47,.06);border-color:rgba(178,106,47,.22)}
.avp-diag-section--redflags{--diag-accent:#a93226;background:rgba(169,50,38,.05);border-color:rgba(169,50,38,.22)}

/* Findings: numbered rows. */
.avp-diag-finding{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.avp-diag-finding:first-child{padding-top:0}
.avp-diag-finding:last-child{border-bottom:0;padding-bottom:0}
.avp-diag-finding-num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.07);background:color-mix(in srgb,var(--diag-accent) 14%,transparent);color:var(--diag-accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.avp-diag-finding-body{flex:1;min-width:0}
.avp-diag-finding-title{font-weight:600;margin-bottom:3px}
.avp-diag-finding-detail{margin:0;opacity:.82}

/* Likely causes: name + likelihood pill on one row, explanation under. */
.avp-diag-cause{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.avp-diag-cause:first-child{padding-top:0}
.avp-diag-cause:last-child{border-bottom:0;padding-bottom:0}
.avp-diag-cause-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.avp-diag-cause-chip{flex:0 0 auto;display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap}
.avp-diag-cause-likely{background:rgba(169,50,38,.12);color:#a93226}
.avp-diag-cause-possible{background:rgba(178,143,47,.14);color:#8a6d1d}
.avp-diag-cause-less_likely{background:rgba(0,0,0,.07);color:rgba(0,0,0,.55)}
.avp-diag-cause-name{font-weight:600;min-width:0}
.avp-diag-cause-expl{margin:5px 0 0;opacity:.82}

/* Do this now: numbered accent circles via CSS counter. */
.avp-diag-actions{list-style:none;counter-reset:avp-action;margin:0;padding:0}
.avp-diag-actions li{counter-increment:avp-action;position:relative;padding:0 0 12px 38px;margin:0}
.avp-diag-actions li:last-child{padding-bottom:0}
.avp-diag-actions li::before{content:counter(avp-action);position:absolute;left:0;top:0;width:25px;height:25px;border-radius:50%;background:var(--diag-accent);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avp-diag-risk-text,.avp-diag-next-text{margin:0;opacity:.9}

/* Red flags: alarm bullets. */
.avp-diag-redflags{list-style:none;margin:0;padding:0}
.avp-diag-redflags li{position:relative;padding:0 0 9px 24px}
.avp-diag-redflags li:last-child{padding-bottom:0}
.avp-diag-redflags li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:#a93226}
.avp-diag-disclaimer{margin-top:24px;padding-top:14px;border-top:1px solid rgba(0,0,0,.1);font-size:12px;opacity:.6;line-height:1.5}
/* Download row inside the lead-success card: secondary to the call button above
   it, so no full-width primary treatment here.

   `width:auto` alone never achieved that (owner reported it again 2026-08-09, and
   measurement confirmed 655px of button in an 800px card). The width was never
   coming from `width` — it came from the flex-basis in
   `.avp-result-actions .avp-btn-download{flex:1 1 280px}`, so the button grew to
   fill the row no matter what `width` said. Killing the grow is what fixes it.

   The radius needs the chained selector: this button carries BOTH .avp-btn-ghost
   and .avp-btn-download, and at equal specificity the ghost block (which lands
   later in the file) wins — which is also why the intended bronze fill never
   applied and it renders as an outline. Left as an outline deliberately; the
   2026-08-05 hierarchy is phone first, PDF as the take-away. */
.avp-lead-success .avp-result-actions{margin:12px 0 0; align-items:center}
.avp-lead-success .avp-result-actions .avp-btn{width:auto}
#avpStepResult .avp-lead-success .avp-result-actions .avp-btn-download{
  align-self:center !important; flex:0 0 auto !important;
  min-width:0 !important; width:auto !important;
  padding:12px 22px !important; font-size:11px !important;
}
#avpStepResult .avp-lead-success .avp-result-actions .avp-btn-ghost.avp-btn-download{
  border-radius:4px !important;
}
/* The primary now carries a discount offer, so it stops being a 110px pill and
   sets the width the pair is measured against. */
#avpStepResult .avp-lead-success .avp-lead-success-call{
  min-width:268px !important; padding:17px 34px !important;
  font-size:16px !important; font-weight:700 !important; letter-spacing:.06em !important;
}
@media (max-width:640px){
  .avp-diag-section{padding:14px 14px;border-radius:10px}
  .avp-diag-section-icon{width:30px;height:30px;border-radius:8px}
  .avp-diag-section-icon svg{width:16px;height:16px}
  .avp-diag-section-title{font-size:15px}
  .avp-diag-section-body{font-size:14px}
  .avp-diag-cause-row{flex-wrap:wrap}
}

/* Questionnaire-first diagnosis launcher: the Start button leads, the photo note follows. */
.avp-launcher-note{margin-top:14px;font-size:13px;opacity:.65;text-align:center}


/* ===== FORCED POPUP (leak detection) =====================================
   The popup IS the page until the check is finished. Nothing here changes what
   happens after the unlock: the modal closes and the visitor lands on the full
   landing page with the report rendered inside it, exactly as before.

   The overlay goes near-opaque rather than staying at .62 with a blur. At .62
   the hero, the headline and the nav read straight through — which invites the
   visitor to try to reach content they are not allowed to reach yet, and makes
   the missing close button feel like a bug rather than a decision. The pointer
   cursor goes with it: it advertised a dismiss that no longer exists. */
[data-forced="1"] .avp-modal-overlay{
  background: rgba(20,17,14,.94);
  cursor: default;
}

/* The close control is rendered in forced mode but inert until the check is done.
   The `hidden` attribute already does the hiding; this rule is the belt to that
   braces, because .avp-modal-close sets display:flex and a bare [hidden] loses to
   it on specificity — exactly the kind of silent regression that would put a live
   close button on a popup that is supposed to be sealed. */
.avp-modal-close.avp-close-locked{ display:none !important; }

/* Brand row at the top of the card — all that survives of the intro layer. The popup
   covers the whole page, so this is the visitor's only sight of who is talking to
   them. Centred (owner, 2026-08-11). The 56px right gutter this row used to carry
   was dead space: forced mode hides the close button entirely. No background of
   its own — it inherits the card's, because niches override the brand vars
   (mold-inspection ships a green accent) and naming a colour here would eventually
   put a mismatched band across the top of someone's card. */
.avp-modal-brand{
  flex:0 0 auto; line-height:0; text-align:center;
  padding:0 0 12px;
}
/* No fixed height — the width/height attributes carry the per-niche box (a 4:1
   wordmark and a 1.15:1 shield cannot share one). The max-height cap is what stops
   Titan's tall shield from taking three times MC's vertical space; max-width keeps
   it inside the card on the narrowest phones. */
.avp-modal-logo{
  display:inline-block; vertical-align:middle;
  max-width:100%; max-height:44px; width:auto; height:auto;
}

/* An empty summary rail is 38px of "YOUR PICKS APPEAR HERE" above the first question
   — chrome describing chrome, on the one screen where the fold is tightest. The
   renderer already toggles .has-picks, so hiding the empty state costs nothing and
   the rail appears the moment there is something to put in it. */
.avp-modal-summary:not(.has-picks){ display:none; }

/* "Rather just talk to someone?" plus the number. It sat inside the popup until
   2026-08-10, beside the questions, where it was an exit handed to a visitor before
   the AI had shown them anything. It now closes the result, under the download
   button — the rule above it reads as an ending rather than a divider. */
.avp-result-callout{
  border-top:1px solid rgba(26,23,20,.1);
  margin-top:18px; padding:14px 20px 0; text-align:center;
  font-family:Inter,sans-serif; font-size:13px; color:rgba(26,23,20,.6);
}
.avp-result-callout[hidden]{ display:none; }
.avp-result-callout a{
  color:var(--avp-ink,#1A1714); font-weight:700; text-decoration:none; margin-left:6px;
}
.avp-result-callout a:hover{ color:var(--avp-accent,#9B7B4A); }

/* The intro tiers used to live here: photo, eyebrow, stats and headline, every one of
   them sized against viewport HEIGHT so the intro's CTA cleared the fold. The intro is
   gone. What has to clear the fold now is the pair of upload buttons — and the way
   there is less chrome, not smaller type. The complaint was that everything READ small
   inside all that space, so padding and gaps come down while the type goes up.
   Still keyed on height as well as width: the same handset in landscape has no
   problem, and it is the height that decides whether the buttons are visible. */
@media (max-width:640px){
  .avp-modal-brand{ padding:0 0 8px; }
  .avp-modal-logo{ max-height:30px; }
}
@media (max-width: 640px) and (max-height: 720px){
  .avp-modal-brand{ padding:0 0 6px; }
  .avp-modal-logo{ max-height:26px; }
  .avp-modal-card .avp-step-title{ font-size:21px !important; }
  .avp-upload-zone{ padding:16px 14px !important; gap:8px !important; }
  .avp-upload-icon{ width:42px; height:42px; margin-bottom:0; }
  .avp-upload-icon svg{ width:26px; height:26px; }
}
/* Very short viewports — a phone with browser chrome AND a notification banner can be
   under 460px of usable height. The dropzone's own hint line is the first thing to go:
   the file-type rules matter to nobody who has not already tapped. */
@media (max-width: 640px) and (max-height: 520px){
  .avp-modal-brand{ padding:0 0 4px; }
  .avp-modal-logo{ max-height:22px; }
  .avp-modal-card .avp-step-title{ font-size:19px !important; margin:0 0 4px; }
  .avp-modal-card .avp-step-help{ font-size:12.5px; margin-bottom:8px; }
  .avp-upload-zone{ padding:12px 14px !important; gap:6px !important; }
  .avp-upload-icon{ width:34px; height:34px; }
  .avp-upload-icon svg{ width:20px; height:20px; }
  .avp-upload-text{ font-size:15px !important; }
  .avp-upload-hint{ display:none; }
}

/* ── Gate copy + call pill ───────────────────────────────────────────────────
   .avp-gate-lead is the sentence added between the teaser and the fields: the
   gate previously jumped from a heading straight to three inputs, which reads as
   a toll booth. Sized under the title and over the fields so it is read as the
   reason for them, not as more heading. */
.avp-gate-lead{
  font-family:Inter, sans-serif; font-size:13px; line-height:1.65;
  color:rgba(26,23,20,.66); margin:0 0 18px; max-width:44ch;
  margin-left:auto; margin-right:auto;
}
/* The call pill must never wrap: with the glyph inside, a two-line label broke the
   button's shape entirely. Niches that keep the full number still fit because the
   pill is allowed to grow instead. */
.avp-lead-success-call{ white-space:nowrap; }
/* The number, printed under the button now that the button may just say "Call Now".
   It stays selectable and dialable, so nothing is lost by shortening the label. */
.avp-lead-success-phone{
  font-family:Inter, sans-serif; font-size:13px; letter-spacing:.06em;
  margin:12px 0 0; text-align:center;
}
.avp-lead-success-phone a{
  color:rgba(26,23,20,.7); text-decoration:none; font-weight:700;
}
.avp-lead-success-phone a:hover{ color:var(--avp-accent, #9B7B4A); }

/* ── Single-image result (photo was skipped) ─────────────────────────────────
   No source photo means no "before": the slider has nothing to compare, so the
   before layer, the drag handle and the before tag all come out and the after
   image is shown full-width. The after layer is normally clipped to the handle
   position, so its clip has to be reset too or the render stays half-hidden. */
.avp-ba.avp-ba-single .avp-ba-before,
.avp-ba.avp-ba-single .avp-ba-handle,
.avp-ba.avp-ba-single .avp-ba-tag-before{ display:none !important; }
.avp-ba.avp-ba-single .avp-ba-after{
  position:relative !important;
  clip-path:none !important;
  width:100% !important;
  inset:auto !important;
}
.avp-ba.avp-ba-single{ cursor:default; }
/* The after tag is the only label left, so it stops being one half of a pair. */
.avp-ba.avp-ba-single .avp-ba-tag-after{ left:auto; right:14px; }

/* ============================================================
   2026-08-10 owner pass — mobile legibility and redundancy
   ============================================================ */

/* The skip control breaks LINE to LINE, never mid-phrase. Each half is an
   inline-block that refuses to wrap inside itself, so the only break point the
   browser has is the space between them: one line where it fits, two clean lines
   where it does not. */
.avp-skip-photo .avp-skip-q,
.avp-skip-photo .avp-skip-a{ display:inline-block; white-space:nowrap; }

@media (max-width:640px){
  /* Before/After tags collided. Both were anchored to the top edge by the
     #avpStepResult rules above (id + !important, which is why the earlier
     class-only mobile rule never won), and "Your new kitchen" is long enough to run
     straight into "Before" on a phone. Sending the after tag to the opposite corner
     removes the collision without truncating a label whose whole job is to read as a
     promise. */
  #avpStepResult .avp-ba-tag-after{
    top:auto !important; bottom:12px !important;
  }
  #avpStepResult .avp-ba-tag-before,
  #avpStepResult .avp-ba-tag-after{
    max-width:64% !important;
    font-size:9.5px !important;
    padding:6px 10px !important;
    letter-spacing:.16em !important;
  }

  /* "Tell us where to send it." was breaking after "send", orphaning "it." on its own
     line. Smaller type plus balanced wrapping keeps it to two even lines. */
  .avp-gate-title{
    font-size:20px !important;
    text-wrap:balance;
    margin:0 0 10px !important;
  }
  .avp-gate-eyebrow{ margin-bottom:6px !important; }
  .avp-gate-teaser{ margin-bottom:12px !important; }
  .avp-gate-lead{ font-size:13.5px !important; margin-bottom:14px !important; }
}

/* The launcher's "Continue where you left off" is meaningless once the check is done —
   there is nothing left to continue, and the button sat in the middle of the finished
   page inviting the visitor back into a funnel they had already completed. */
html.avp-done #avpLaunchBtn{ display:none !important; }

/* ==========================================================================
   Owner pass, 2026-08-10.
   ========================================================================== */

/* BEFORE and the after label were colliding on phones. They sit at opposite top
   corners, but at 10.5px with .2em tracking and 13px of side padding "BEFORE"
   runs about 90px and "YOUR NEW KITCHEN" about 210px; 300px of tag plus 28px of
   margin does not fit inside a 330px-wide image. Smaller type, tighter tracking,
   less padding. The #avpStepResult prefix is required: the id-scoped block
   earlier in this file sets these with !important, and a plain class selector
   cannot outrank one id. */
#avpStepResult .avp-ba-tag,
#avpStepResult .avp-ba-tag-before,
#avpStepResult .avp-ba-tag-after{
  font-size: 8.5px !important;
  letter-spacing: .1em !important;
  padding: 5px 9px !important;
  white-space: nowrap !important;
}
@media (max-width:400px){
  #avpStepResult .avp-ba-tag,
  #avpStepResult .avp-ba-tag-before,
  #avpStepResult .avp-ba-tag-after{
    font-size: 8px !important; letter-spacing: .06em !important; padding: 4px 7px !important;
  }
}

/* No photo means there is no "before" to label. The rule that hides it already
   exists further up (.avp-ba.avp-ba-single .avp-ba-tag-before) but scores zero
   ids against three classes, while #avpStepResult .avp-ba-tag-before sets
   display:inline-block !important at one id and wins. Same id here so it takes.
   The before image and the drag handle already hide correctly, because the
   id-scoped block never declares display for those two. */
#avpStepResult .avp-ba.avp-ba-single .avp-ba-tag-before{ display:none !important; }

/* The black Call Now on the success card was min-width:268px, 17px/34px padding
   and 16px type, plus width:100% under 640px, which made it a slab sitting
   directly above a Download button of ordinary proportions. Matched to it. */
#avpStepResult .avp-lead-success .avp-lead-success-call{
  min-width: 0 !important;
  padding: 13px 26px !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
}
@media (max-width:640px){
  #avpStepResult .avp-lead-success .avp-lead-success-call{
    width: 100% !important; max-width: 280px !important; padding: 13px 18px !important;
  }
}

/* ==========================================================================
   Responsive pass, 2026-08-11. Step nav.
   ========================================================================== */

/* Back and the primary shared a row at two different sizes: 72x48 at 11px next
   to 257x55 at 14px - a 0.28 width ratio and a 7px height step, on 9 of the 13
   kitchen steps and 3 of the 9 diagnosis steps. Two buttons on one row have to
   agree on height and baseline; Back stays secondary through the ghost fill and
   lighter weight, not by being a smaller box. min-width stops it collapsing to
   the width of the word itself. */
.avp-step-nav{ align-items: stretch !important; }
.avp-step-nav .avp-btn{
  font-size: 13px !important;
  padding: 15px 20px !important;
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avp-step-nav .avp-btn-ghost{ flex: 0 0 auto !important; min-width: 104px !important; }

/* REGRESSION FIX, 2026-08-11. The step-nav rule above sets display on every
   .avp-btn, and author CSS outranks the UA stylesheet - so it defeated the HTML
   hidden attribute and revealed the Continue button on the photo step, which
   ships hidden and is only meant to appear on a Back re-entry with a photo
   already chosen. Picking a photo auto-advances and Skip covers the no-photo
   case, so a visible Continue there is a third button with nothing to do.
   Scoped restore of hidden semantics rather than narrowing the rule above,
   because any future display rule inside the widget would reintroduce this. */
.avp-root [hidden], .avp-step-nav [hidden]{ display: none !important; }

/* ---- Skip-photo control: outline, not filled ----
   As a solid black block this competed with the two upload CTAs directly above it
   for the same tap, so it read as the primary action when it is the opt-out. It
   borrows the existing ghost treatment (transparent, ink text, hairline border) so
   it stays on-token instead of introducing new colours, and keeps a hover so it
   still reads as a live control. Size and its own full row already make it findable.
   Behaviour is untouched - same data-action="next".

   Appended at the end of the file on purpose: it must outrank both
   .avp-modal-card .avp-btn-primary and .avp-btn-primary:hover, and source order
   is what decides at equal specificity. */
.avp-btn.avp-skip-photo,
.avp-modal-card .avp-btn-primary.avp-skip-photo{
  background: transparent !important;
  color: var(--avp-ink) !important;
  /* Ink at 28%, NOT --avp-hairline: that token is a divider tone (10%) and on the
     cream card it renders as no border at all. This is quiet but legibly a control. */
  border: 1px solid rgba(26,23,20,.28) !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.avp-btn.avp-skip-photo:hover:not(:disabled),
.avp-modal-card .avp-btn-primary.avp-skip-photo:hover:not(:disabled),
.avp-btn.avp-skip-photo:focus-visible,
.avp-modal-card .avp-btn-primary.avp-skip-photo:focus-visible{
  background: rgba(0,0,0,.045) !important;
  border-color: var(--avp-ink) !important;
  color: var(--avp-ink) !important;
}

/* ── Step-one orientation block ───────────────────────────────────────────
   Sits inside the first step (see visualizer-shell.php) so it vanishes when the
   visitor advances. Three lines, icons on the left, deliberately quiet: it frames
   the question below it and must never out-shout it. Collapses to the title alone
   on very short viewports, where the Continue button matters more than the pitch. */
.avp-intro{ margin:0 0 22px; }
.avp-intro-title{
  margin:0 0 12px; font-family:Georgia,serif; font-size:19px; line-height:1.3;
  color:var(--avp-ink,#1A1714);
  /* The MC headline runs to 63 characters ("Get Your FREE Custom Estimate & Claim
     $500 OFF Your New Kitchen"). Left to normal wrapping it orphans the room name
     onto a line of its own at 320px. No font-size fixes that: 17px still orphans at
     300px and 16px at 280px, because WHERE a line breaks is a word-boundary problem,
     not a sizing one. Balance solves it at every width measured, 280px upward. */
  text-wrap: balance;
}

/* Narrowest phones - 320px iPhone SE and the 360px Androids sit either side of this.
   At 19px the headline takes three lines below ~340px; at 17px it holds two from
   320px up, which is what keeps the ZIP field and its button above the fold. */
@media (max-width:380px){
  .avp-intro-title{ font-size:17px; }
}

/* Numbered badges in the intro boxes. Sized and coloured to sit exactly where the
   36px icon used to, so the grid's rhythm does not shift: same diameter, bronze,
   in the serif face the headline uses. Scoped under .avp-option-static so it
   outranks the single-class .avp-option-icon rules regardless of source order. */
.avp-option-static .avp-intro-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; box-sizing:border-box;
  font-family:Georgia,serif; font-size:19px; font-weight:700; line-height:1;
  color:var(--avp-bronze,#9B7B4A);
  border:1.5px solid currentColor; border-radius:50%;
}
/* The icon rules step svg sizes down at these tiers. The badge is not an svg, so
   without its own steps it would stay 36px while the rest of the card tightens. */
@media (max-width:700px){
  .avp-root[data-mode="intake"] .avp-modal-card .avp-option-static .avp-intro-num{
    width:32px; height:32px; font-size:17px;
  }
}
@media (max-width:640px) and (max-height:720px){
  .avp-root[data-mode="intake"] .avp-modal-card .avp-option-static .avp-intro-num{
    width:26px; height:26px; font-size:15px; border-width:1.25px;
  }
}

/* Opening step: one button where the ZIP row used to be. Centred, with a floor
   width so it does not shrink to its label on a wide card, and full width on
   phones where a small centred pill reads as an afterthought rather than THE
   action. Reuses .avp-zip-note underneath, which was already the reassurance
   line and did not need renaming to keep working. */
.avp-root[data-mode="intake"] .avp-start-row{
  display:flex; justify-content:center;
}
.avp-root[data-mode="intake"] .avp-start-row .avp-btn{
  min-width:220px;
}
@media (max-width:560px){
  .avp-root[data-mode="intake"] .avp-start-row .avp-btn{ width:100%; min-width:0; }
}

/* The start step's nav has no buttons, but it is not :empty - the template leaves
   whitespace and a PHP comment inside the div - so the existing :empty rule never
   matches and its 1px border-top drew a rule under the button with nothing beneath
   it. Target the step type instead of hoping the markup is whitespace-free. */
.avp-root[data-mode="intake"] .avp-step[data-type="start"] .avp-step-nav{ display:none; }

/* Back is gone, so most navs now hold a single button. The nav is
   justify-content:space-between, which pins a lone child to the LEFT - the primary
   action would sit against the card's left edge with dead space beside it. Centre
   it only when it is alone, so the photo steps (Skip + Continue) keep the spread
   they were tuned for. */
.avp-root[data-mode="intake"] .avp-step-nav > .avp-btn:only-child{
  margin-left:auto; margin-right:auto;
}
.avp-intro-lines{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.avp-intro-lines li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.45; color:#4A443B;
}
.avp-intro-ic{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; color:#9B7B4A; }
/* Short-viewport tiers. These were written for .avp-intro-lines, the three-line list
   this block used to render. The intake redesign replaced that list with
   .avp-intro-grid and left the queries aimed at an element that no longer renders on
   any niche, so the collapse silently stopped happening: a phone in landscape kept
   all four boxes and pushed the ZIP field off screen, which is the exact thing the
   560px tier existed to prevent. Both selectors are named now - the live grid gets
   the behaviour back, and the list keeps it if a niche ever renders one again. The
   grid rules answer !important in kind because the intake modal block sets the
   option padding and grid gap that way. */
@media (max-width:640px) and (max-height:720px){
  .avp-intro{ margin-bottom:16px; }
  .avp-intro-lines{ gap:7px; }
  .avp-intro-lines li{ font-size:13.5px; }
  .avp-root[data-mode="intake"] .avp-modal-card .avp-intro-grid{ gap:8px !important; }
  .avp-root[data-mode="intake"] .avp-modal-card .avp-intro-grid .avp-option{ padding:11px 8px !important; }
  .avp-root[data-mode="intake"] .avp-modal-card .avp-intro-grid .avp-option-label{ font-size:12.5px !important; }
  .avp-root[data-mode="intake"] .avp-modal-card .avp-intro-grid .avp-option-icon svg{ width:24px !important; height:24px !important; }
}
@media (max-width:640px) and (max-height:560px){
  .avp-intro-lines{ display:none; }
  .avp-intro-grid{ display:none !important; }
  .avp-intro{ margin-bottom:12px; }
}

/* Desktop-only phone digits under the success CTA. See visualizer-shell.php for why
   this is not simply the button label: on a pointer device the tel: link is inert, so
   the number has to be readable. Hidden wherever tapping actually works. */
.avp-success-tel{ display:none; }
@media (hover:hover) and (pointer:fine){
  .avp-success-tel{
    display:block; margin-top:12px; font-size:14px; color:#6B6459;
  }
  .avp-success-tel a{ color:var(--avp-ink,#1A1714); font-weight:700; text-decoration:none;
    border-bottom:1px solid rgba(26,23,20,.28); }
}

/* The step is centre-aligned, so a bullet long enough to wrap centres its second line
   while the first still starts at the icon - side by side the three bullets read as
   three different alignments. The text is a flex child, so aligning it left is what
   keeps every line flush under the one above. */
.avp-intro-lines li{ text-align:left; }

/* Error line on the limit-reached callback card. Matches the gate's status line:
   the popup is sealed, so an alert() there is a dead end with nothing behind it. */
.avp-limit-status{ margin:0 0 12px; font-size:14px; line-height:1.5; color:#A93226; }

/* ============================================================
   INTAKE MODE
   Every rule below is scoped to .avp-root[data-mode="intake"].
   Nothing here can reach the visualize or diagnosis funnels.
   ============================================================ */

/* Option cards: icon above a centred label, instead of the
   left-aligned photo-card layout the visualizer uses. */
.avp-root[data-mode="intake"] .avp-options {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.avp-root[data-mode="intake"] .avp-option {
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 18px 12px;
}
.avp-root[data-mode="intake"] .avp-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--avp-bronze);
  line-height: 0;
}
.avp-root[data-mode="intake"] .avp-option-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}
.avp-root[data-mode="intake"] .avp-option.selected .avp-option-icon,
.avp-root[data-mode="intake"] .avp-option.selected .avp-option-label {
  color: var(--avp-bronze);
}
.avp-root[data-mode="intake"] .avp-option-label { line-height: 1.3; }
.avp-root[data-mode="intake"] .avp-option-hint  { line-height: 1.3; }

/* ZIP row. The field and its submit share one line on desktop and
   stack on a phone, where a 2-up row leaves the input too narrow to
   read a five digit code in. */
.avp-root[data-mode="intake"] .avp-zip-row {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 22px auto 10px;
}
.avp-root[data-mode="intake"] .avp-zip-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  letter-spacing: .06em;
  padding: 13px 14px;
  color: var(--avp-ink);
  background: #fff;
  border: 1px solid var(--avp-hairline);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.avp-root[data-mode="intake"] .avp-zip-input::placeholder {
  color: var(--avp-stone);
  letter-spacing: normal;
}
.avp-root[data-mode="intake"] .avp-zip-input:focus {
  border-color: var(--avp-bronze);
  box-shadow: 0 0 0 3px rgba(155,123,74,.16);
}
.avp-root[data-mode="intake"] .avp-zip-go { flex: 0 0 auto; white-space: nowrap; }
.avp-root[data-mode="intake"] .avp-zip-go[disabled] { opacity: .45; cursor: not-allowed; }
.avp-root[data-mode="intake"] .avp-zip-note {
  margin: 0 0 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--avp-stone);
}

.avp-root[data-mode="intake"] .avp-step-nav:empty { display: none; }

@media (max-width: 560px) {
  .avp-root[data-mode="intake"] .avp-zip-row { flex-direction: column; }
  .avp-root[data-mode="intake"] .avp-zip-go  { width: 100%; }
  .avp-root[data-mode="intake"] .avp-options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .avp-root[data-mode="intake"] .avp-option  { padding: 14px 8px; }
  .avp-root[data-mode="intake"] .avp-option-icon svg { width: 30px; height: 30px; }
}

/* ------------------------------------------------------------
   Intake inside the modal.
   The modal's own rules use !important (see .avp-modal-card
   .avp-options above), so specificity alone cannot reach them and
   these have to answer in kind. Still scoped to intake, so the
   visualize and diagnosis funnels keep the 2-up layout they were
   tuned for.
   ------------------------------------------------------------ */

/* Wider card. Nine option cards at 2-up is five rows and an internal
   scrollbar; at 4-up it is three rows and no scroll. */
.avp-root[data-mode="intake"] .avp-modal-card {
  max-width: 720px !important;
}
.avp-root[data-mode="intake"] .avp-modal-card .avp-options {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}
.avp-root[data-mode="intake"] .avp-modal-card .avp-option {
  padding: 16px 10px !important;
  font-size: 13.5px !important;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.avp-root[data-mode="intake"] .avp-modal-card .avp-option-label {
  font-size: 13.5px !important;
  line-height: 1.3;
}
.avp-root[data-mode="intake"] .avp-modal-card .avp-option-hint {
  font-size: 11.5px !important;
  line-height: 1.25;
}
.avp-root[data-mode="intake"] .avp-modal-card .avp-option-icon svg {
  width: 32px !important;
  height: 32px !important;
}

@media (max-width: 700px) {
  .avp-root[data-mode="intake"] .avp-modal-card .avp-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .avp-root[data-mode="intake"] .avp-modal-card .avp-option-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ------------------------------------------------------------
   Intake details form (the four screens after the questions).
   ------------------------------------------------------------ */
.avp-root[data-mode="intake"] .avp-iform-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  margin: 20px auto 6px;
}
.avp-root[data-mode="intake"] .avp-iform-input {
  width: 100%;
  font: inherit;
  font-size: 16px !important;
  padding: 13px 14px;
  color: var(--avp-ink);
  background: #fff;
  border: 1px solid var(--avp-hairline);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.avp-root[data-mode="intake"] .avp-iform-input::placeholder { color: var(--avp-stone); }
.avp-root[data-mode="intake"] .avp-iform-input:focus {
  border-color: var(--avp-bronze);
  box-shadow: 0 0 0 3px rgba(155,123,74,.16);
}
.avp-root[data-mode="intake"] .avp-iform-code {
  text-align: center;
  letter-spacing: .45em;
  font-size: 20px !important;
  padding-left: .45em;
}
.avp-root[data-mode="intake"] .avp-iform-confirm {
  margin: 20px auto 8px;
  padding: 14px 18px;
  max-width: 380px;
  text-align: center;
  font-size: 21px;
  letter-spacing: .04em;
  color: var(--avp-ink);
  background: #fff;
  border: 1px solid var(--avp-hairline);
  border-radius: 6px;
}
.avp-root[data-mode="intake"] .avp-iform-status {
  margin: 8px auto 0;
  max-width: 380px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}
.avp-root[data-mode="intake"] .avp-iform-status.is-error { color: #a93226; }
.avp-root[data-mode="intake"] .avp-iform-status.is-ok    { color: #5a8a46; }
.avp-root[data-mode="intake"] .avp-iform-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--avp-stone);
}
.avp-root[data-mode="intake"] .avp-iform-trust svg { width: 13px; height: 13px; flex: 0 0 auto; }
.avp-root[data-mode="intake"] .avp-iform-consent {
  margin: 14px auto 0;
  max-width: 460px;
  padding-top: 12px;
  border-top: 1px solid var(--avp-hairline);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--avp-stone);
  text-align: center;
}
.avp-root[data-mode="intake"] .avp-iform-consent a { color: var(--avp-stone); text-decoration: underline; }
.avp-root[data-mode="intake"] .avp-iform-resend {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--avp-stone);
}
.avp-root[data-mode="intake"] .avp-iform-resend a { color: var(--avp-bronze); }
.avp-root[data-mode="intake"] .avp-idone-tick {
  display: flex;
  justify-content: center;
  color: #5a8a46;
  margin-bottom: 6px;
}
.avp-root[data-mode="intake"] .avp-idone-offer {
  margin: 18px auto 0;
  max-width: 460px;
  padding: 16px 18px;
  background: rgba(155,123,74,.08);
  border: 1px solid var(--avp-bronze);
  border-radius: 8px;
  text-align: center;
}
.avp-root[data-mode="intake"] .avp-idone-offer h3 { margin: 0 0 6px; font-size: 16px; color: var(--avp-ink); }
.avp-root[data-mode="intake"] .avp-idone-offer p  { margin: 0; font-size: 13.5px; color: var(--avp-ink-soft); line-height: 1.45; }
.avp-root[data-mode="intake"] .avp-idone-call { display: inline-block; margin-top: 18px; }

@media (max-width: 700px) {
  /* width:100% is the working part, not max-width. These are flex items in a
     column container, and their `margin: 20px auto` makes the auto side margins
     absorb the free space - which overrides align-items:stretch and shrinks the
     box to its content. Measured at a 398px viewport: card 398, button 347,
     fields 212. Lifting max-width alone changed nothing, because max-width was
     never what was binding. An explicit width makes the auto margins collapse to
     zero and the fields line up with the button under them. */
  .avp-root[data-mode="intake"] .avp-iform-fields,
  .avp-root[data-mode="intake"] .avp-iform-confirm { max-width: 100%; width: 100%; }
}


/* Intro card (2026-08-23). The boxes reuse the answer-card grid so spacing and
   mobile behaviour cannot drift from the cards the visitor sees next; this only
   removes the press affordance, because they state what is about to happen
   rather than offering a choice. */
.avp-root[data-mode="intake"] .avp-option-static { cursor: default; pointer-events: none; }
.avp-root[data-mode="intake"] .avp-option-static:hover,
.avp-root[data-mode="intake"] .avp-option-static:active { transform: none; box-shadow: none; }
.avp-root[data-mode="intake"] .avp-intro-nav { justify-content: center; }