/* Precision Lead Form — styles (filled in Task 4) */
/* Ported from mission-helpers/precision-v2/lead-form/preview-reference.html, scoped under .pa-lead
   (modal rules scoped under .pa-lead-overlay/.pa-lead-modal since the modal is outside .pa-lead in
   the DOM). See docs/superpowers/.sdd/task-4-brief.md for the delta list applied while porting. */

:root{
  --paper:#e8ecf1; --paper-2:#dbe2e9; --ink:#13243a; --navy:#164675;
  --navy-d:#0f3258; --navy-light:#6fa3d8; --muted:#5c6470; --line:#c9d2db;
  --dark:#0e2c4d; --dark-2:#143a63; --pod:#e9e6df; --err:#c0392b;
  --card:#ffffff;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow-sm:0 1px 3px rgba(6,26,48,.08);
  --shadow-md:0 6px 22px rgba(6,26,48,.12);
  --shadow-lg:0 18px 50px rgba(6,26,48,.28);
}
.pa-lead,.pa-lead *,.pa-lead-overlay,.pa-lead-overlay *{box-sizing:border-box}

/* the pre-footer lead section */
.pa-lead{
  background:radial-gradient(120% 140% at 50% -20%,var(--dark-2) 0%,var(--dark) 60%);
  padding:64px 24px 80px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pa-lead-in{max-width:1120px;margin:0 auto}
.pa-lead-head{text-align:center;margin-bottom:36px}
.pa-lead .kick{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--navy-light);margin:0 0 12px}
.pa-lead h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;color:#fff;margin:0 0 10px;text-wrap:balance}
.pa-lead-head p{max-width:60ch;margin:0 auto;color:var(--pod);font-size:15px}

.pa-lead .form-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow-lg);padding:44px 40px}

.pa-lead .form-title{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 6px}
.pa-lead .form-title.sp{margin-top:8px}
.pa-lead .form-subtitle{font-size:13.5px;color:var(--muted);margin:0 0 20px;max-width:70ch}

.pa-lead .grid{display:grid;gap:16px}
.pa-lead .g4{grid-template-columns:repeat(4,1fr)}
.pa-lead .g6{grid-template-columns:repeat(6,1fr)}
.pa-lead .g2{grid-template-columns:repeat(2,1fr)}
.pa-lead .block{margin-bottom:34px}

.pa-lead .field label{display:block;font-size:12px;color:var(--navy-d);margin-bottom:7px;font-weight:600}
.pa-lead .req{color:var(--navy)}
.pa-lead .control{
  width:100%;height:48px;border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:0 14px;font-size:14px;color:var(--ink);font-family:inherit;transition:border-color .15s,box-shadow .15s;
  box-shadow:var(--shadow-sm);
}
.pa-lead textarea.control{height:auto;min-height:104px;padding:12px 14px;resize:vertical}
.pa-lead .control::placeholder{color:#9aa6b3}
.pa-lead .control:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,70,117,.15)}
.pa-lead .control.err{border-color:var(--err);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.pa-lead .err-msg{color:var(--err);font-size:11.5px;margin-top:5px;min-height:0}
.pa-lead .affix{position:relative}
.pa-lead .affix .suf{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--navy);font-size:13px;pointer-events:none}
.pa-lead .affix .pre{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--muted);font-size:13px;pointer-events:none}
.pa-lead .affix.left .control{padding-left:44px}

/* custom select */
.pa-lead .csel{position:relative}
.pa-lead .csel .control{display:flex;align-items:center;cursor:pointer;user-select:none;justify-content:space-between}
.pa-lead .csel .val{color:#9aa6b3}
.pa-lead .csel.has .val{color:var(--ink)}
.pa-lead .csel .arw{transition:transform .2s;color:var(--navy);flex:0 0 auto}
.pa-lead .csel.open .arw{transform:rotate(180deg)}
.pa-lead .csel .opts{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);padding:6px;display:none;z-index:30;max-height:260px;overflow:auto}
.pa-lead .csel.open .opts{display:block}
.pa-lead .opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:7px;cursor:pointer;font-size:14px}
.pa-lead .opt:hover{background:var(--paper)}
.pa-lead .opt .box{width:16px;height:16px;border:2px solid var(--navy);border-radius:4px;flex:0 0 auto}
.pa-lead .opt.sel .box{background:var(--navy)}
.pa-lead .csearch{width:100%;border:none;border-bottom:1px solid var(--line);padding:8px 10px;margin-bottom:4px;font-size:14px;font-family:inherit}
.pa-lead .csearch:focus{outline:none;border-bottom-color:var(--navy)}

/* radios */
.pa-lead .rrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pa-lead .rlabel{font-size:16px;font-weight:700;color:var(--navy-d);margin-right:4px}
.pa-lead .choice{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.pa-lead .choice input{accent-color:var(--navy);width:17px;height:17px;cursor:pointer}
.pa-lead .rrow.err .rlabel{color:var(--err)}

/* links repeater */
.pa-lead .pa-links-label{display:block;font-size:12px;color:var(--navy-d);margin-bottom:8px;font-weight:600}
.pa-lead .linkrow{display:flex;gap:8px;margin-bottom:12px}
.pa-lead .linkrow .control{flex:1}
.pa-lead .iconbtn{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:9px;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:.15s;box-shadow:var(--shadow-sm)}
.pa-lead .iconbtn:hover{background:var(--paper);color:var(--err)}
.pa-lead .addbtn{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--navy);background:transparent;color:var(--navy);border-radius:9px;padding:11px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.pa-lead .addbtn:hover{background:rgba(22,70,117,.06)}
.pa-lead .portals{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pa-lead .portal{border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-family:var(--mono);font-size:12px;color:var(--navy);background:#fff;text-decoration:none}

/* checkboxes services */
.pa-lead .checks{display:flex;flex-direction:column;gap:14px}
.pa-lead .chk{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer}
.pa-lead .chk input{accent-color:var(--navy);width:18px;height:18px;cursor:pointer}
.pa-lead .info{position:relative;width:15px;height:15px;border:1.5px solid var(--navy);color:var(--navy);border-radius:50%;font-size:9px;font-weight:700;display:inline-grid;place-items:center;cursor:help}
.pa-lead .info .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:8px 11px;border-radius:7px;font-size:12px;font-weight:400;width:210px;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s;box-shadow:var(--shadow-md);z-index:20}
.pa-lead .info .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark)}
.pa-lead .info:hover .tip{opacity:1}

.pa-lead .divider{height:1px;background:var(--line);margin:8px 0 26px}
.pa-lead .footrow{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between}
.pa-lead .consents{display:flex;flex-direction:column;gap:12px;max-width:60ch}
.pa-lead .consents a{color:var(--navy);text-decoration:underline}
.pa-lead .submit{background:var(--navy);color:#fff;border:none;border-radius:11px;padding:16px 34px;font-size:16px;font-weight:800;letter-spacing:.01em;cursor:pointer;font-family:inherit;transition:.18s;box-shadow:var(--shadow-md);white-space:nowrap}
.pa-lead .submit:hover{background:var(--navy-d);transform:translateY(-1px)}

/* success modal (direct child of body, outside .pa-lead — not scoped under .pa-lead) */
.pa-lead-overlay{position:fixed;inset:0;background:rgba(6,26,48,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;font-family:var(--sans)}
.pa-lead-overlay.show{display:flex}
.pa-lead-modal{background:#fff;border-radius:16px;padding:40px 44px;text-align:center;box-shadow:var(--shadow-lg);max-width:380px;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.pa-lead-modal .ico{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(22,70,117,.1);color:var(--navy)}
.pa-lead-modal h3{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--ink)}
.pa-lead-modal p{margin:0 0 22px;color:var(--muted);font-size:14px}
.pa-lead-modal button{background:var(--navy);color:#fff;border:none;border-radius:9px;padding:12px 26px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}

@media (max-width:900px){
  .pa-lead .g4,.pa-lead .g6,.pa-lead .g2{grid-template-columns:1fr}
  .pa-lead .rrow{flex-direction:column;align-items:flex-start;gap:12px}
  .pa-lead .form-card{padding:28px 20px}
  .pa-lead .footrow{flex-direction:column;align-items:stretch}
  .pa-lead .submit{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pa-lead *,.pa-lead-overlay,.pa-lead-overlay *{animation:none !important;transition:none !important}
}