/* =====================================================================
   Leakproof · dd-funnel-pages.css  (server addition to the design kit)
   The /deep-dive order form's "Help us go deeper (optional)" disclosure:
   its trigger is a little map of three browser windows (funnel page ->
   booking page -> confirmation page; the kit's Window at thumb scale,
   mockups.css). A window the scan can't reach on its own stays faded until
   the customer types its address (dd-funnel-pages.js mirrors the address
   into the window's bar). Loads after deep-dive.css; tokens only.
   ===================================================================== */

.dd-after { margin: 0 0 16px; padding: 4px 0 2px; border: 0; min-width: 0; }
.dd-after > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: var(--lp-t-small); font-weight: 600; color: var(--lp-ink); }
.dd-after > legend + * { clear: both; }
.dd-after .field input[type="text"] { background: var(--lp-paper); }
.dd-after-tip b { color: var(--lp-ink); font-weight: 600; }

/* the map: three windows, an arrow between each */
.dd-fmap { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dd-fwin { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; }
.dd-fwin + .dd-fwin::before { content: ""; position: absolute; left: -13px; top: 31px; width: 10px; height: 1.5px; background: var(--lp-ink-3); }
.dd-fwin + .dd-fwin::after { content: ""; position: absolute; left: -7px; top: 28px; width: 6px; height: 6px; border-top: 1.5px solid var(--lp-ink-3); border-right: 1.5px solid var(--lp-ink-3); transform: rotate(45deg); }

/* the kit's window, at thumb scale; the address stays visible at this size (it tells the pages apart) */
.dd-fwin-shot { margin-bottom: 5px; }
.dd-fwin-shot .mk-frame { transition: opacity .15s, box-shadow .15s; }
.dd-fwin .mk.is-thumb .mk-addr { display: flex; height: 10px; border-radius: 5px; padding: 0 5px; gap: 0; }
.dd-fwin .mk-lock { display: none; }
.dd-fwin .mk-addr b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-fwin-addr { font: 500 8.5px/10px var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-chrome-ink); white-space: nowrap; }
.dd-fwin.is-known .dd-fwin-addr { color: var(--lp-ink); }

/* the page sketch: a heading, two lines and what the page is for */
.dd-fwin-page { display: grid; align-content: start; gap: 4px; height: 54px; padding: 7px 7px 6px; }
.dd-fwin-page > span { display: block; border-radius: 2px; }
.dd-fwin-page .sk-h { height: 5px; width: 78%; background: var(--lp-ink-3); opacity: .55; }
.dd-fwin-page .sk-l { height: 3px; width: 100%; background: var(--lp-rule-2); }
.dd-fwin-page .sk-l + .sk-l { width: 64%; }
.dd-fwin-page .sk-x { margin-top: 3px; }
.dd-fwin--landing .sk-x { width: 52%; height: 9px; background: var(--lp-ink); }
.dd-fwin--book .sk-x { width: 70%; height: 16px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--lp-rule-2) 0 1px, transparent 1px 25%), repeating-linear-gradient(0deg, var(--lp-rule-2) 0 1px, transparent 1px 50%);
  outline: 1px solid var(--lp-rule-2); }
.dd-fwin--done .sk-x { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lp-ink-3); position: relative; }
.dd-fwin--done .sk-x::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 1.5px solid var(--lp-ink-3); border-bottom: 1.5px solid var(--lp-ink-3); transform: rotate(40deg); }

/* not given yet: the window faded, no shadow */
.dd-fwin:not(.is-known) .mk-frame { opacity: .5; box-shadow: none; }
.dd-fwin:not(.is-known) .dd-fwin-addr { color: var(--lp-ink-3); }

.dd-fwin-k { display: flex; align-items: center; gap: 5px; font-size: var(--lp-t-xs); font-weight: 600; line-height: 1.2; color: var(--lp-ink); }
.dd-fwin-k::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--lp-ink-3); }
/* a page we have: an ink tick (a given address, not a check result: green means "fine" only) */
.dd-fwin.is-known .dd-fwin-k::before { border: 0; width: 9px; height: 5px; border-radius: 0; border-left: 2px solid var(--lp-ink); border-bottom: 2px solid var(--lp-ink); transform: translateY(-2px) rotate(-45deg); margin: 0 2px 0 1px; }
.dd-fwin-sub { font: 400 var(--lp-t-label-sm)/1.25 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); }

/* (A phone: "Confirmation" is one word and must fit its third of the form, 390 px wide too.) */
@media (max-width: 420px) {
  .dd-fmap { gap: 12px; }
  .dd-fwin + .dd-fwin::before { left: -11px; width: 8px; }
  .dd-fwin + .dd-fwin::after { left: -7px; }
  .dd-fwin-k { gap: 4px; font-size: var(--lp-t-label); }
  .dd-fwin-sub { letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) { .dd-fwin-shot .mk-frame { transition: none; } }