/* The ad landing pages' quote form (assets/pob-lpform.js). Same look as
   /free-quote: all white, one question per screen, Anton questions, Martian
   Mono everything else, fuchsia accents. Scoped under .lpf so it never meets
   the homepage styles /start carries. */
.lpf{--ink:#15110f;--fuchsia:#E83C8E;--muted:#8a7e84;--line:#e8dde2;background:#fff;color:var(--ink);font-family:'Martian Mono',monospace;line-height:1.5;-webkit-font-smoothing:antialiased}
.lpf *{box-sizing:border-box}
.lpf a{color:inherit}

/* Overlay mode (/start): covers the page, its own scroll, no way out but X. */
.lpf.lpf-ov{position:fixed;inset:0;z-index:2147483000;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lpf.lpf-ov.on{display:block}
html.lpf-lock,html.lpf-lock body{overflow:hidden}

.lpf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
/* The same circle mark the site nav paints (assets/pob-nav.css .pn-logo). */
.lpf-logo{display:block;width:42px;height:42px;border-radius:50%;overflow:hidden;font-size:0;color:transparent;background:#FEF1FA url("https://res.cloudinary.com/dcprxs9do/image/upload/c_fill,w_140,h_140,q_auto,f_auto/v1780925200/ppdrz3h2llpwdr099bb7.jpg") center/cover no-repeat}
.lpf-logo b{font-size:0}
.lpf-x{width:40px;height:40px;border:1.5px solid var(--ink);background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--ink);font-family:inherit}
.lpf-bar{position:relative;height:4px;background:#f6e9ef}
.lpf-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fuchsia);transition:width .35s ease}

.lpf-main{min-height:calc(100svh - 70px);display:flex;align-items:center;justify-content:center;padding:36px 24px 72px}
.lpf-in{width:100%;max-width:620px}

.lpf .q{display:none}
.lpf .q.on{display:block;animation:lpfin .35s ease both}
.lpf .q.on.back{animation-name:lpfback}
@keyframes lpfin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lpfback{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lpf .q.on{animation:none}.lpf-bar i{transition:none}}

.lpf .q-num{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--fuchsia);margin-bottom:10px}
.lpf .q-h{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(32px,6.4vw,48px);line-height:1;margin:0}
.lpf .q-sub{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.lpf .q-sub a{color:var(--fuchsia);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.lpf input,.lpf textarea{display:block;width:100%;margin-top:30px;border:0;border-bottom:2px solid #f2b3d0;border-radius:0;background:transparent;padding:8px 0;font-family:'Martian Mono',monospace;font-size:clamp(20px,4.6vw,26px);color:var(--ink);outline:0;-webkit-appearance:none;appearance:none}
.lpf input:focus,.lpf textarea:focus{border-bottom-color:var(--fuchsia)}
.lpf input::placeholder,.lpf textarea::placeholder{color:#d3c6cc}
.lpf textarea{resize:none;min-height:96px;line-height:1.4}
.lpf input[type=date]{min-height:52px;text-align:left}
.lpf input[type=date]::-webkit-date-and-time-value{text-align:left}
.lpf .q-tap{font-size:12px;color:var(--muted);margin-top:8px}
@media(hover:hover){.lpf .q-tap{display:none}}

/* Lettered choices, same as /free-quote */
.lpf .ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
.lpf .ch button{display:flex;align-items:center;gap:10px;min-width:0;text-align:left;background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px;font-family:'Martian Mono',monospace;font-size:13.5px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lpf .ch button:hover{border-color:var(--fuchsia)}
.lpf .ch button[aria-pressed="true"]{border-color:var(--fuchsia);background:#fdeaf2}
.lpf .ch kbd{flex:0 0 24px;height:24px;border:1.5px solid var(--fuchsia);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:11px;font-weight:700;color:var(--fuchsia)}
.lpf .ch button[aria-pressed="true"] kbd{background:var(--fuchsia);color:#fff}
.lpf .ch .t{min-width:0;line-height:1.3}

.lpf .q-err{display:none;margin-top:14px;font-size:13px;font-weight:700;color:#c0392b}
.lpf .q-err.on{display:block}
.lpf .q-act{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:28px}
.lpf .ok{background:var(--fuchsia);color:#fff;border:0;border-radius:10px;padding:13px 26px;font-family:'Anton',sans-serif;font-size:18px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.lpf .ok:hover{background:#ff5aa6}
.lpf .ok:disabled{opacity:.55;cursor:default}
.lpf .ok.big{width:100%;padding:18px;font-size:20px;box-shadow:0 12px 28px rgba(232,60,142,.3)}
.lpf .q-key{font-size:12px;color:var(--muted)}
.lpf .q-skip{background:none;border:0;padding:0;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lpf .q-promise{margin-top:14px;text-align:center;font-size:12px;color:var(--muted)}
.lpf-back{display:none;align-items:center;gap:6px;margin:0 0 18px;padding:6px 0;border:0;background:none;color:var(--muted);font-family:'Martian Mono',monospace;font-size:13px;font-weight:700;cursor:pointer}
.lpf-back.on{display:inline-flex}
.lpf-back:hover{color:var(--fuchsia)}
@media(hover:none){.lpf .q-key,.lpf .ch kbd{display:none}}

/* Story screens (/quick): one photo with nothing on it, words underneath
   (the site's hero rule). The photo fills its frame. */
.lpf .st-ph{margin:0 0 22px;aspect-ratio:4/3;overflow:hidden;background:#fbe0ec;border:1.5px solid var(--ink)}
.lpf .st-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.lpf .st-eb{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--fuchsia);margin-bottom:10px}
.lpf .st-p{font-family:'Figtree',sans-serif;font-size:16.5px;line-height:1.55;color:#3d3539;margin:14px 0 0;max-width:46ch}
.lpf .st-rate{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--ink);margin-top:16px;text-transform:uppercase}
.lpf .st-rate span{color:var(--fuchsia);letter-spacing:2px}
.lpf .st-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.lpf .st-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.lpf .st-list li b{color:var(--fuchsia);margin-right:8px}
.lpf .st-quote{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(24px,4.6vw,32px);line-height:1.12;margin:0}
.lpf .st-attr{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:12px}
.lpf .st-logos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.lpf-foot{padding:18px 24px 28px;text-align:center;font-size:11px;color:var(--muted)}
.lpf-foot a{text-decoration:underline}

@media(max-height:500px) and (orientation:landscape){
  .lpf-main{align-items:flex-start;padding-top:16px;padding-bottom:48px}
  .lpf .q-h{font-size:28px}
  .lpf input,.lpf textarea{margin-top:12px;font-size:20px}
  .lpf .q-act{margin-top:12px}
  .lpf .ch{margin-top:14px}
  .lpf .st-ph{aspect-ratio:21/9;margin-bottom:12px}
}
@media(max-width:520px){
  .lpf-main{align-items:flex-start;padding-top:26px}
  .lpf .ch{gap:8px}
  .lpf .ch button{padding:11px 10px;gap:8px;font-size:12.5px}
  .lpf .st-ph{margin:0 -24px 20px;border-left:0;border-right:0}
}

/* 2026-11-06 conversion pass: preview step, trust line, recap. */
.lpf .q-trust{margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--muted);letter-spacing:.2px}
.lpf .q-trust b{color:var(--fuchsia);letter-spacing:1px;font-weight:400}
.lpf .q-recap{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);display:inline-block;padding:6px 10px;margin:0 0 14px}
.lpf .q-recap:empty{display:none}
.lpf .pv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.lpf .pv{margin:0;min-width:0}
.lpf .pv img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#f6e9ef;border:1.5px solid var(--ink)}
.lpf .pv figcaption{padding-top:8px;font-size:11px;line-height:1.35}
.lpf .pv figcaption b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpf .pv figcaption span{color:var(--fuchsia)}
@media(max-width:480px){.lpf .pv-grid{gap:6px}.lpf .pv figcaption{font-size:10px}}
/* Story photos were 4:3 full-width on phones, which pushed the button below
   the first screen on a 375x667 phone. 16:10 keeps the button in view. */
@media(max-width:520px){.lpf .st-ph{aspect-ratio:16/10}.lpf-main{padding-top:14px}}

/* Inspo photos inside the last question (2026-11-06). Optional; never a CTA. */
.lpf .q-inspo{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.lpf .qi-h{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.lpf .qi-h span{font-weight:400;color:#5e5258;margin-left:6px;letter-spacing:.6px}
.lpf .qi-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.lpf .qi-add{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);background:#fff;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer}
.lpf .qi-add:hover{background:var(--ink);color:#fff}
.lpf .qi-row input[type=url]{flex:1 1 220px;min-width:0;margin-top:0;font-size:16px;padding:10px 0}
.lpf .qi-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lpf .qi-pic{position:relative;display:flex;flex-direction:column;width:76px;font-size:10px;letter-spacing:.4px}
.lpf .qi-pic img{width:76px;height:76px;object-fit:cover;border:1.5px solid var(--ink);display:block}
.lpf .qi-pic em{font-style:normal;margin-top:4px;color:#5e5258}
.lpf .qi-pic.bad em{color:#C2186B}
.lpf .qi-pic button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:16px;line-height:1;cursor:pointer;padding:0}
.lpf .qi-note{flex-basis:100%;font-size:12px;color:#5e5258}
.lpf .qi-add{position:relative}
.lpf .qi-add input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer}
.lpf .qi-add:focus-within{outline:2px solid var(--fuchsia);outline-offset:2px}
