/* AGENTA Phone — number pick + A2P 10DLC registration.
   Everything is scoped under .ap so it drops in without touching host styles.
   External dependencies: Satoshi + Inter (fonts). Icons are inline SVG — no icon set needed. */
.ap{--ap-navy:#000D25;--ap-navy-2:#0A1E44;--ap-blue:#0056F6;--ap-blue-d:#0043C4;--ap-blue-t:rgba(0,86,246,.10);--ap-blue-t2:rgba(0,86,246,.16);
--ap-green:#00B67E;--ap-green-d:#008C61;--ap-green-t:rgba(0,182,126,.12);--ap-mint:#52DFAF;
--ap-ink:#08132B;--ap-ink-2:#33415C;--ap-muted:#5E6B82;--ap-faint:#8C98AC;
--ap-cloud:#EEF3FB;--ap-cloud-2:#E4ECF7;--ap-hair:rgba(8,19,43,.09);--ap-hair-2:rgba(8,19,43,.14);
--ap-err:#D63B3B;--ap-err-t:rgba(214,59,59,.10);--ap-warn:#B8790C;--ap-warn-t:rgba(184,121,12,.12);
--ap-r:14px;--ap-r-lg:20px;--ap-sh:0 4px 14px rgba(8,19,43,.06);--ap-sh-lg:0 14px 40px rgba(8,19,43,.09);
--ap-head:'Satoshi',system-ui,sans-serif;--ap-body:'Inter',system-ui,sans-serif;
box-sizing:border-box;font-family:var(--ap-body);color:var(--ap-ink);font-size:15px;-webkit-font-smoothing:antialiased}
.ap *,.ap *::before,.ap *::after{box-sizing:border-box}
.ap h1,.ap h2,.ap h3,.ap h4{font-family:var(--ap-head);font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.1}
.ap p{margin:0}
.ap button{font:inherit;cursor:pointer}
.ap :focus-visible{outline:2px solid var(--ap-blue);outline-offset:3px;border-radius:8px}
.ap svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:none}
.ap svg.s{width:15px;height:15px}
.ap svg.l{width:22px;height:22px}
.ap [hidden]{display:none!important}

/* shell */
.ap-shell{max-width:760px;margin:0 auto;padding:clamp(22px,3vw,40px) clamp(16px,3vw,28px) 72px}
.ap-eyebrow{font-family:var(--ap-body);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ap-blue)}
.ap-title{font-size:clamp(25px,3.2vw,33px);margin-top:10px}
.ap-sub{margin-top:11px;font-size:15px;line-height:1.6;color:var(--ap-muted);max-width:60ch}

/* sub-stepper */
.ap-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px)}
.ap-steps .st{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ap-faint);white-space:nowrap}
.ap-steps .st .n{width:23px;height:23px;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--ap-cloud-2);color:var(--ap-muted)}
.ap-steps .st.on{color:var(--ap-ink)}
.ap-steps .st.on .n{background:var(--ap-blue);color:#fff}
.ap-steps .st.done{color:var(--ap-ink-2)}
.ap-steps .st.done .n{background:var(--ap-green-t);color:var(--ap-green-d)}
.ap-steps .bar{width:20px;height:1px;background:var(--ap-hair-2)}

/* card + sections */
.ap-card{background:#fff;border:1px solid var(--ap-hair);border-radius:var(--ap-r-lg);box-shadow:var(--ap-sh);padding:clamp(20px,2.6vw,30px);margin-top:clamp(20px,2.4vw,28px)}
.ap-sec{padding:22px 0;border-top:1px solid var(--ap-hair)}
.ap-sec:first-child{padding-top:0;border-top:0}
.ap-sec-hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:15px}
.ap-sec-hd .num{width:24px;height:24px;border-radius:99px;background:var(--ap-cloud);color:var(--ap-muted);font-size:11.5px;font-weight:800;display:grid;place-items:center;flex:none}
.ap-sec-hd h3{font-size:16px;letter-spacing:-.02em}
.ap-sec-hd .sp{flex:1}

/* badges + tags */
.ap-badge{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:99px;padding:4px 10px;white-space:nowrap}
.ap-badge.req{background:var(--ap-blue-t);color:var(--ap-blue-d)}
.ap-badge.opt{background:var(--ap-cloud-2);color:var(--ap-muted)}
.ap-badge.ok{background:var(--ap-green-t);color:var(--ap-green-d)}
.ap-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap}
.ap-tag.local{background:var(--ap-cloud);color:var(--ap-muted)}
.ap-tag.lock{background:var(--ap-blue-t);color:var(--ap-blue-d)}
.ap-tag.green{background:var(--ap-green-t);color:var(--ap-green-d)}
.ap-tag.grey{background:var(--ap-cloud-2);color:var(--ap-ink-2)}
.ap-tag.auto{background:var(--ap-blue-t);color:var(--ap-blue-d)}

/* fields */
.ap-f{display:grid;gap:7px}
.ap-f+.ap-f{margin-top:16px}
.ap-lab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--ap-ink-2)}
.ap-lab .rq{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ap-blue-d);background:var(--ap-blue-t);border-radius:99px;padding:2px 7px}
.ap-in{width:100%;border:1px solid var(--ap-hair-2);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ap-ink);background:#fff}
.ap-in::placeholder{color:var(--ap-faint)}
.ap-in:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t)}
.ap-help{font-size:12.5px;line-height:1.55;color:var(--ap-muted)}
.ap-help.err{color:var(--ap-err);font-weight:600}
.ap-f.bad .ap-in{border-color:var(--ap-err);background:#fff}
.ap-f .fe{display:none;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ap-err)}
.ap-f.bad .fe{display:flex}
.ap-sel{width:100%;border:1px solid var(--ap-hair-2);border-radius:12px;padding:12px 40px 12px 14px;font-size:15px;font-family:inherit;color:var(--ap-ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/17px;-webkit-appearance:none;appearance:none}
.ap-sel:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t)}
.ap-sel.empty{border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t);color:var(--ap-faint);font-weight:600}
.ap-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ap-row3{display:grid;grid-template-columns:.72fr .62fr 1fr;gap:12px}

/* area-code search */
.ap-search{position:relative}
.ap-search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ap-faint)}
.ap-search .ap-in{padding-left:42px;padding-right:120px;font-family:var(--ap-head);font-weight:800;font-size:17px;letter-spacing:.02em}
.ap-search .cnt{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:700;color:var(--ap-green-d);background:var(--ap-green-t);border-radius:99px;padding:5px 11px}

/* number cards */
.ap-nums{display:grid;gap:10px;margin-top:16px}
.ap-num{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;background:#fff;border:1px solid var(--ap-hair-2);border-radius:var(--ap-r);padding:14px 16px;width:100%}
.ap-num:hover{border-color:var(--ap-hair-2);background:var(--ap-cloud)}
.ap-num .dot{width:19px;height:19px;border-radius:99px;border:2px solid var(--ap-hair-2);flex:none;display:grid;place-items:center}
.ap-num .dot i{width:9px;height:9px;border-radius:99px;background:transparent}
.ap-num[aria-checked="true"]{border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t);background:#fff}
.ap-num[aria-checked="true"] .dot{border-color:var(--ap-blue)}
.ap-num[aria-checked="true"] .dot i{background:var(--ap-blue)}
.ap-num b{font-family:var(--ap-head);font-size:17px;letter-spacing:-.01em;display:block}
.ap-num span.city{display:block;margin-top:3px;font-size:12.5px;color:var(--ap-muted)}
.ap-more{margin-top:12px;background:none;border:0;padding:6px 2px;font-size:13.5px;font-weight:700;color:var(--ap-blue)}
.ap-more:hover{color:var(--ap-blue-d);text-decoration:underline}
.ap-skel{display:grid;gap:10px;margin-top:16px}
.ap-skel .sk{height:62px;border-radius:var(--ap-r);background:linear-gradient(90deg,var(--ap-cloud) 25%,var(--ap-cloud-2) 37%,var(--ap-cloud) 63%);background-size:400% 100%;animation:apsk 1.4s ease infinite}
@keyframes apsk{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.ap-skel .sk{animation:none}}

/* banners */
.ap-ban{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-radius:var(--ap-r);padding:14px 16px;font-size:13.5px;line-height:1.55;margin-top:16px}
.ap-ban b{display:block;font-family:var(--ap-head);font-size:14px;letter-spacing:-.01em;margin-bottom:3px}
.ap-ban.info{background:var(--ap-blue-t);color:var(--ap-blue-d)}
.ap-ban.info b{color:var(--ap-blue-d)}
.ap-ban.err{background:var(--ap-err-t);color:#8E1B1B}
.ap-ban.err b{color:#7A1414}
.ap-ban.warn{background:var(--ap-warn-t);color:#7A4F05}
.ap-ban.warn b{color:#5E3D04}
.ap-ban.quiet{background:var(--ap-cloud);color:var(--ap-ink-2)}
.ap-ban.quiet b{color:var(--ap-ink)}
.ap-empty{margin-top:16px;border:1px dashed var(--ap-hair-2);border-radius:var(--ap-r);padding:26px 20px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--ap-muted);background:rgba(238,243,251,.5)}
.ap-empty b{display:block;font-family:var(--ap-head);font-size:15px;color:var(--ap-ink);margin-bottom:5px}

/* read-only rows */
.ap-ro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;background:var(--ap-cloud);border-radius:var(--ap-r);padding:13px 15px}
.ap-ro+.ap-ro{margin-top:10px}
.ap-ro .ic{width:32px;height:32px;border-radius:10px;background:#fff;color:var(--ap-blue);display:grid;place-items:center;flex:none}
.ap-ro b{font-family:var(--ap-head);font-size:15.5px;letter-spacing:-.01em;display:block}
.ap-ro span.k{display:block;margin-top:2px;font-size:12px;color:var(--ap-muted)}
.ap-ro .edit{background:none;border:0;font-size:12.5px;font-weight:700;color:var(--ap-blue);padding:4px}
.ap-ro .edit:hover{text-decoration:underline}

/* address suggestion */
.ap-sug{margin-top:14px;border:1px solid var(--ap-blue-t2);background:var(--ap-blue-t);border-radius:var(--ap-r);padding:14px 16px}
.ap-sug b{display:block;font-family:var(--ap-head);font-size:14px;color:var(--ap-blue-d);margin-bottom:6px}
.ap-sug .addr{font-size:14px;color:var(--ap-ink);line-height:1.5}
.ap-sug .btns{margin-top:12px;display:flex;gap:9px;flex-wrap:wrap}

/* consent */
.ap-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;border:1px solid var(--ap-hair-2);border-radius:var(--ap-r);padding:16px 18px;background:#fff;text-align:left;width:100%}
.ap-consent .box{width:24px;height:24px;border-radius:7px;border:2px solid var(--ap-hair-2);display:grid;place-items:center;color:transparent;flex:none;margin-top:1px}
.ap-consent[aria-checked="true"]{border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t)}
.ap-consent[aria-checked="true"] .box{background:var(--ap-blue);border-color:var(--ap-blue);color:#fff}
.ap-consent b{display:block;font-family:var(--ap-head);font-size:15px;letter-spacing:-.015em}
.ap-consent span{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--ap-muted)}
.ap-links{margin-top:13px;display:flex;gap:18px;flex-wrap:wrap}
.ap-links button{background:none;border:0;padding:2px;font-size:13px;font-weight:700;color:var(--ap-blue);text-decoration:underline}

/* buttons + footer */
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:99px;padding:13px 26px;font-size:14.5px;font-weight:700;background:var(--ap-blue);color:#fff;transition:background .18s,transform .1s}
.ap-btn:hover{background:var(--ap-blue-d)}
.ap-btn:active{transform:translateY(1px)}
.ap-btn[disabled]{background:var(--ap-cloud-2);color:var(--ap-faint);pointer-events:none}
.ap-btn.ghost{background:transparent;color:var(--ap-ink);box-shadow:inset 0 0 0 1px var(--ap-hair-2)}
.ap-btn.ghost:hover{background:var(--ap-cloud)}
.ap-btn.sm{padding:9px 17px;font-size:13px}
.ap-btn .spin{width:15px;height:15px;border-radius:99px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:apsp .7s linear infinite}
@keyframes apsp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ap-btn .spin{animation:none}}
.ap-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--ap-hair);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ap-foot .sp{flex:1}
.ap-foot-note{margin-top:14px;font-size:12.5px;color:var(--ap-muted);text-align:center;width:100%}
.ap-incl{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--ap-muted)}

/* filing / orb */
.ap-mid{min-height:52vh;display:grid;place-items:center;text-align:center;padding:40px 0}
.ap-orb{width:64px;height:64px;border-radius:99px;margin:0 auto 24px;background:linear-gradient(135deg,var(--ap-blue),var(--ap-mint));position:relative}
.ap-orb::after{content:"";position:absolute;inset:-9px;border-radius:99px;border:2px solid var(--ap-blue-t2);animation:appulse 1.6s ease-out infinite}
@keyframes appulse{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.22);opacity:0}}
@media(prefers-reduced-motion:reduce){.ap-orb::after{animation:none}}

/* code boxes */
.ap-code{display:flex;gap:10px;margin-top:22px;justify-content:center}
.ap-code input{width:52px;height:62px;text-align:center;font-family:var(--ap-head);font-weight:800;font-size:24px;border:1px solid var(--ap-hair-2);border-radius:13px;color:var(--ap-ink);background:#fff}
.ap-code input:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t)}
.ap-code.bad input{border-color:var(--ap-err)}
.ap-code-err{display:none;margin-top:14px;font-size:13px;font-weight:600;color:var(--ap-err);text-align:center;align-items:center;justify-content:center;gap:8px}
.ap-code.bad~.ap-code-err{display:flex}
.ap-resend{margin-top:16px;font-size:13px;color:var(--ap-muted);text-align:center}
.ap-resend button{background:none;border:0;font-weight:700;color:var(--ap-blue);padding:0;text-decoration:underline}
.ap-resend .dim{color:var(--ap-faint)}
.ap-restart{margin-top:8px;font-size:12.5px;color:var(--ap-muted);text-align:center}
.ap-restart button{background:none;border:0;font-weight:700;color:var(--ap-blue);padding:0;text-decoration:underline}

/* result */
.ap-res{text-align:center;padding:clamp(24px,4vw,44px) 0 0}
.ap-res .seal{width:62px;height:62px;border-radius:99px;margin:0 auto 22px;display:grid;place-items:center}
.ap-res .seal.ok{background:linear-gradient(135deg,var(--ap-green),var(--ap-mint));color:#fff}
.ap-res .seal.info{background:var(--ap-blue-t);color:var(--ap-blue)}
.ap-res .seal.bad{background:var(--ap-err-t);color:var(--ap-err)}
.ap-res h2{font-size:clamp(25px,3.2vw,34px)}
.ap-res .rsub{margin:14px auto 0;font-size:15px;line-height:1.6;color:var(--ap-muted);max-width:52ch}
.ap-sum{margin-top:28px;text-align:left;border:1px solid var(--ap-hair);border-radius:var(--ap-r-lg);background:#fff;overflow:hidden}
.ap-sum .r{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--ap-hair)}
.ap-sum .r:last-child{border-bottom:0}
.ap-sum .r .k{font-size:12.5px;font-weight:700;color:var(--ap-muted);width:130px;flex:none}
.ap-sum .r .v{font-family:var(--ap-head);font-size:15px;letter-spacing:-.01em}

/* modal */
.ap-scrim{position:fixed;inset:0;background:rgba(0,13,37,.5);backdrop-filter:blur(3px);z-index:900;display:grid;place-items:center;padding:20px}
.ap-scrim[hidden]{display:none}
.ap-modal{background:#fff;border-radius:var(--ap-r-lg);box-shadow:var(--ap-sh-lg);width:100%;max-width:540px;max-height:86vh;display:flex;flex-direction:column}
.ap-modal .mh{padding:22px 24px 16px;border-bottom:1px solid var(--ap-hair);position:relative}
.ap-modal .mh h3{font-size:19px}
.ap-modal .mh p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ap-muted);max-width:46ch}
.ap-modal .mh .x{position:absolute;top:18px;right:18px;background:none;border:0;color:var(--ap-muted);padding:4px}
.ap-modal .mb{padding:20px 24px;overflow:auto}
.ap-modal .mf{padding:16px 24px 22px;border-top:1px solid var(--ap-hair);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ap-modal .mf .sp{flex:1}
.ap-modal .mf .note{font-size:12px;line-height:1.5;color:var(--ap-muted);flex:1 1 100%;order:-1;margin-bottom:4px}
.ap-quote{background:var(--ap-cloud);border-radius:var(--ap-r);padding:18px 20px;font-size:14.5px;line-height:1.7;color:var(--ap-ink)}
.ap-quote p{margin:0}
.ap-quote em{font-style:normal;display:block;color:var(--ap-muted);font-size:13px;margin-top:10px}
.ap-review .r{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--ap-hair)}
.ap-review .r:last-child{border-bottom:0}
.ap-review .r .k{font-size:12.5px;font-weight:700;color:var(--ap-muted);width:140px;flex:none}
.ap-review .r .v{font-size:14px;color:var(--ap-ink);word-break:break-word}

@media(max-width:620px){
  .ap-row2,.ap-row3{grid-template-columns:1fr}
  .ap-steps .bar{display:none}
  .ap-steps{gap:6px 12px}
  .ap-btn{flex:1;min-width:130px}
  .ap-foot{gap:10px}
  .ap-code input{width:44px;height:56px;font-size:21px}
  .ap-search .ap-in{padding-right:14px}
  .ap-search .cnt{position:static;transform:none;display:inline-block;margin-top:8px}
  .ap-sum .r{flex-direction:column;align-items:flex-start;gap:4px}
  .ap-sum .r .k{width:auto}
}

/* narrow columns — the code row and read-only rows must not push wider than their column */
@media(max-width:560px){
  .ap-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
  .ap-code input{width:100%;min-width:0;height:56px;font-size:20px}
  .ap-ro{grid-template-columns:auto minmax(0,1fr);row-gap:9px}
  .ap-ro>.ap-tag,.ap-ro>.edit{grid-column:1/-1;justify-self:start}
  .ap-num{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .ap-num>.ap-tag{grid-column:2/-1;justify-self:start}
}

/* ── listing detection + pick ─────────────────────────────── */
.lp-note{margin:14px 0 20px;font-size:12.5px;line-height:1.6;color:var(--ap-muted);padding:12px 15px;border-radius:12px;background:rgba(8,19,43,.035);border-left:2px solid var(--ap-hair-2)}
.lp-found{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:rgba(0,182,126,.09);border:1px solid rgba(0,182,126,.2);margin-bottom:22px}
.lp-found .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(0,182,126,.14);color:var(--green-d)}
.lp-found b{font-family:var(--ap-head);font-weight:800;font-size:14px;color:var(--ap-ink)}
.lp-found span{display:block;margin-top:2px;font-size:12.5px;color:var(--ap-muted)}
.lp-list{display:grid;gap:10px}
.lp{display:grid;grid-template-columns:auto minmax(0,1fr) max-content;gap:14px;align-items:center;text-align:left;width:100%;background:#fff;border:1px solid var(--ap-hair-2);border-radius:16px;padding:15px 18px 15px 15px;cursor:pointer;transition:border-color .16s,box-shadow .16s}
.lp:hover{border-color:var(--ap-blue)}
.lp .dot{width:20px;height:20px;border-radius:99px;border:2px solid var(--ap-hair-2);flex:none;display:grid;place-items:center}
.lp .dot i{width:9px;height:9px;border-radius:99px;background:var(--ap-blue);opacity:0;transition:opacity .16s}

.lp b{display:block;font-family:var(--ap-head);font-weight:800;font-size:14.5px;letter-spacing:-.02em;color:var(--ap-ink)}
.lp .meta{display:block;margin-top:3px;font-size:12.5px;color:var(--ap-muted)}
.lp .lp-act{display:flex;flex-direction:row;align-items:center;gap:7px;flex:none;padding:0;margin:0;font-size:11.5px;font-weight:700;color:var(--ap-muted);white-space:nowrap}
.lp .lp-act i{flex:none}
.lp .lp-act .tx{flex:none;white-space:nowrap}
.lp .lp-act i{width:6px;height:6px;border-radius:99px;background:var(--ap-blue)}
.lp[aria-pressed="true"]{border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-t)}
.lp[aria-pressed="true"] .dot{border-color:var(--ap-blue)}
.lp[aria-pressed="true"] .dot i{opacity:1}
.lp-more{margin-top:12px;background:none;border:0;padding:8px 2px;font-size:13px;font-weight:700;color:var(--ap-blue);cursor:pointer}
.lp-more:hover{color:var(--ap-blue-d)}
.lp-up{margin-top:20px;border-radius:18px;background:var(--ap-navy);color:#EAF1FF;padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.lp-up b{display:block;font-family:var(--ap-head);font-weight:800;font-size:16px;color:#fff;letter-spacing:-.02em}
.lp-up p{margin:6px 0 0;font-size:13px;line-height:1.55;color:#AFC0DC;max-width:46ch}
.lp-up .price{font-family:var(--ap-head);font-weight:800;font-size:22px;color:#fff;letter-spacing:-.03em;white-space:nowrap}
.lp-up .price span{display:block;font-size:11.5px;font-weight:700;color:#52DFAF;letter-spacing:0}
.lp-up .go{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;border:0;cursor:pointer;border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700;background:#fff;color:var(--ap-navy);text-decoration:none}
.lp-up .go:hover{background:#EAF1FF}
@media(max-width:640px){
  .lp{grid-template-columns:auto minmax(0,1fr);row-gap:7px}
  .lp .lp-act{grid-column:2/-1}
  .lp-up{grid-template-columns:minmax(0,1fr)}
}

/* ── board ────────────────────────────────────────────────── */
.bd-top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.bd-top h2{font-family:var(--ap-head);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;margin:0;color:var(--ap-ink)}
.bd-top .s{margin-top:6px;font-size:13.5px;color:var(--ap-muted)}
.bd-top .sp{flex:1}
.bd-card{background:#fff;border:1px solid var(--ap-hair);border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(8,19,43,.06)}

.bd-card .bd{padding:20px 22px 22px}
.bd-card h3{font-family:var(--ap-head);font-weight:800;font-size:18px;letter-spacing:-.025em;margin:0;color:var(--ap-ink)}
.bd-card .ci{margin-top:4px;font-size:13.5px;color:var(--ap-muted)}
.bd-tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.bd-tag{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700}
.bd-tag i{width:6px;height:6px;border-radius:99px;background:currentColor}
.bd-tag.ok{background:rgba(0,182,126,.1);color:var(--green-d)}
.bd-tag.bl{background:var(--ap-blue-t);color:var(--ap-blue)}
.bd-feed{margin-top:16px;padding-top:14px;border-top:1px solid var(--ap-hair-2);display:grid;gap:11px}
.bd-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center}
.bd-ev .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:rgba(0,182,126,.1);color:var(--green-d)}
.bd-ev.bl .ic{background:var(--ap-blue-t);color:var(--ap-blue)}
.bd-ev b{display:block;font-size:13.5px;font-weight:700;color:var(--ap-ink)}
.bd-ev em{font-style:normal;display:block;margin-top:2px;font-size:12px;color:var(--ap-muted)}
.bd-ev .t{font-family:var(--ap-mono,ui-monospace,monospace);font-size:11.5px;color:var(--ap-muted);white-space:nowrap}
.bd-next{margin-top:18px;border-radius:18px;background:var(--ap-navy);color:#EAF1FF;padding:20px 22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.bd-next .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(82,223,175,.16);color:#52DFAF}
.bd-next b{display:block;font-family:var(--ap-head);font-weight:800;font-size:15.5px;color:#fff;letter-spacing:-.02em}
.bd-next p{margin:5px 0 0;font-size:13px;line-height:1.55;color:#AFC0DC;max-width:52ch}
.bd-next .go{border:0;cursor:pointer;border-radius:999px;padding:11px 20px;font-size:13.5px;font-weight:700;background:#fff;color:var(--ap-navy);white-space:nowrap}
.bd-next .go:hover{background:#EAF1FF}
@media(max-width:640px){.bd-next{grid-template-columns:auto minmax(0,1fr)}.bd-next .go{grid-column:1/-1;width:100%}.bd-ev .t{display:none}}

/* pick-your-listing runs full width — no side panel */
.ap-solo{min-height:100vh;background:var(--ap-cloud,#EEF3FB);display:flex;justify-content:center}
.ap-solo .ap-shell{max-width:760px;width:100%;padding:clamp(30px,4vw,60px) clamp(20px,3vw,40px) 72px}

/* ── payment ──────────────────────────────────────────────── */
.pay-sum{background:#fff;border:1px solid var(--ap-hair);border-radius:16px;padding:18px 20px;margin-bottom:22px}
.pay-sum .r{display:flex;align-items:baseline;gap:14px;padding:9px 0;font-size:13.5px}
.pay-sum .r+.r{border-top:1px solid var(--ap-hair-2)}
.pay-sum .r .k{color:var(--ap-muted)}
.pay-sum .r .sp{flex:1}
.pay-sum .r .v{font-weight:700;color:var(--ap-ink);text-align:right}
.pay-sum .r.free .v{color:#007A56}
.pay-sum .r.tot{padding-top:13px;margin-top:4px;border-top:1px solid var(--ap-hair)}
.pay-sum .r.tot .k{font-family:var(--ap-head);font-weight:800;font-size:15px;color:var(--ap-ink)}
.pay-sum .r.tot .v{font-family:var(--ap-head);font-weight:800;font-size:22px;letter-spacing:-.03em}
.pay-sum .r.tot .v span{display:block;font-family:var(--ap-body);font-size:11.5px;font-weight:600;color:var(--ap-muted);letter-spacing:0}
.pay-card{background:#fff;border:1px solid var(--ap-hair);border-radius:16px;padding:20px 22px}
.pay-card .hd{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pay-card .hd b{font-family:var(--ap-head);font-weight:800;font-size:15px;color:var(--ap-ink)}
.pay-card .hd .sp{flex:1}
.pay-brands{display:flex;gap:6px}
.pay-brands span{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--ap-muted);border:1px solid var(--ap-hair-2);border-radius:5px;padding:3px 6px}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:start}
.pay-row .ap-f{align-self:start}
.pay-lock{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ap-muted)}
.pay-lock svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.pay-fine{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--ap-muted)}
@media(max-width:640px){.pay-row{grid-template-columns:1fr}}

/* ── THE NUMBER RESULTS SCROLL; THE PAGE DOES NOT (pass LM-PROD-1) ─────────
   Telnyx returns up to 100 available numbers, and `.ap-nums` was a plain
   grid — so a full batch made the onboarding page thousands of pixels tall,
   and `.split { min-height: 100vh }` dragged the full-height story panel down
   with it. The agent scrolled past a hundred rows to reach "Confirm this
   number", and the video stretched the entire way.

   Bounded by the VIEWPORT rather than by a magic pixel cap, so it holds at any
   window size: on desktop the screen is exactly one viewport tall and the list
   takes whatever space is left after the header, the search and the footer; on
   narrow widths the list keeps its own bound while the page flows normally,
   because the design stacks the panel above the form there and a locked-height
   page would trap the agent.

   `overscroll-behavior: contain` stops the double-scroll trap where reaching
   the end of the list starts scrolling the page underneath it. */

.ap #n-nums {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1001px) {
  /* One viewport, and the only thing inside it that scrolls is the list. Each
     link in the chain needs `min-height: 0`, or a flex/grid child refuses to
     shrink below its content and the overflow pops back out to the page. */
  .ap #s-num .split { height: 100dvh; min-height: 100dvh; }
  .ap #s-num .split > .form { min-height: 0; overflow: hidden; }
  .ap #s-num .ap-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding-bottom: clamp(20px, 2.4vw, 32px);
  }
  .ap #s-num .ap-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .ap #s-num #n-list { display: flex; flex-direction: column; min-height: 0; }
  .ap #s-num #n-nums { flex: 1 1 auto; min-height: 0; }
  /* The search and the footer stay put while the middle scrolls. */
  .ap #s-num .ap-f,
  .ap #s-num .ap-foot,
  .ap #s-num .ap-incl { flex: none; }
}

@media (max-width: 1000px) {
  /* The panel sits above the form here, so the page scrolls as the design
     intends — the list just must not be the thing that makes it endless. */
  .ap #n-nums { max-block-size: 46dvh; }
}

/* ── THE VERIFIED SCREEN MIRRORS THE SPLIT (pass LM-PROD-1) ────────────────
   The source marks screen 7 `<div class="split flip">` and defines the rule in
   an inline <style> inside its HTML — which the port never extracted, so the
   class shipped as a no-op and the one screen the design deliberately mirrors
   looked like the other seven.

   Verbatim from the source, including its slightly uneven columns: the panel
   takes marginally more width than the form when it leads. Below the source's
   own 1000px breakpoint the split stacks and the flip is undone, so the panel
   sits above the form exactly as the unflipped screens do. */
@media (min-width: 1001px) {
  .ap .split.flip { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .ap .split.flip .form { order: 2; }
}
@media (max-width: 1000px) {
  .ap .split.flip { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .ap .split.flip .form { order: 0; }
}