/* /assets/css/esim-number.css
   eSIM with a phone number. Every selector is namespaced .pnx so this file can
   never reach another page or override product.css, mx.css, style.css or Bootstrap.
   The only exception is .pnx-faqsec, which deliberately sits on the site's own
   .mx-faqsec accordion and only adjusts its outer spacing. */

.pnx{
  --pnx-brand:#E8336D;
  --pnx-brand2:#F26A3E;
  --pnx-ink:#0F172A;
  --pnx-body:#5B6577;
  --pnx-muted:#6B7280;
  --pnx-line:#E7EBF2;
  --pnx-line-soft:#EFF1F5;
  --pnx-band:#F7F9FC;
  --pnx-grad:linear-gradient(135deg,#E8336D,#F26A3E);
  --pnx-r:20px;
  display:block;
  color:var(--pnx-ink);
}
.pnx *{box-sizing:border-box}
.pnx p{text-wrap:pretty}

.pnx-in{max-width:1240px;margin:0 auto;padding-left:clamp(18px,3vw,32px);padding-right:clamp(18px,3vw,32px)}
.pnx-sec{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(4px,1vw,8px)}
.pnx-top .pnx-sec{padding-top:clamp(26px,3.4vw,44px)}
.pnx-top .pnx-sec:last-child{padding-bottom:clamp(30px,4vw,56px)}
.pnx-band{background:var(--pnx-band);border-top:1px solid var(--pnx-line-soft);
          border-bottom:1px solid var(--pnx-line-soft);margin-top:clamp(40px,5vw,68px);
          padding-top:clamp(36px,4.5vw,60px);padding-bottom:clamp(36px,4.5vw,60px)}

/* ── Headings ─────────────────────────────────────────────────────────── */
.pnx-head{max-width:62rem;margin:0 0 22px}
.pnx-head.pnx-center{margin-left:auto;margin-right:auto;text-align:center}
.pnx-head.pnx-center p{margin-left:auto;margin-right:auto;max-width:80ch}
.pnx .pnx-note-c{margin:16px auto 0;text-align:left;max-width:940px}
.pnx-center{margin-left:auto;margin-right:auto;text-align:center}
.pnx h2{font-size:clamp(21px,2.5vw,29px);line-height:1.15;letter-spacing:-.03em;
        font-weight:800;margin:0;color:var(--pnx-ink)}
.pnx-head p{font-size:15.5px;line-height:1.6;color:var(--pnx-muted);margin:9px 0 0;font-weight:500}
.pnx h3{font-size:17px!important;line-height:1.35!important;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--pnx-ink)}

.pnx-prose{max-width:940px;margin-left:auto;margin-right:auto}
.pnx-prose p{font-size:15.5px;line-height:1.75;color:var(--pnx-body);margin:0 0 15px;max-width:none}
.pnx-prose.pnx-cols{columns:2;column-gap:44px}
.pnx-prose.pnx-cols p{break-inside:avoid}
@media (max-width:820px){.pnx-prose.pnx-cols{columns:1}}
.pnx-prose p:last-child{margin-bottom:0}
.pnx-note{font-size:14.5px;line-height:1.65;color:var(--pnx-muted);margin:16px 0 0;max-width:68ch}

/* ── Hero and picker ──────────────────────────────────────────────────
   One tint runs through both and fades to white by the foot of the picker, so
   there is no rule cutting the top of the page in half. The stop is a
   percentage of the block, which keeps the fade in proportion on any height. */
.pnx-top{background:linear-gradient(180deg,
           #F4F7FC 0%,
           #FBF3F1 26%,
           #FDF8F6 46%,
           #FFFFFF 78%,
           #FFFFFF 100%)}
.pnx-hero{background:transparent;border-bottom:0}
.pnx-hero-in{padding-top:clamp(30px,4.5vw,62px);padding-bottom:clamp(6px,1.4vw,18px);
             display:flex;flex-direction:column;align-items:center;text-align:center}
.pnx-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E6E9F0;
           border-radius:999px;padding:7px 15px;font-size:12px;font-weight:800;letter-spacing:.07em;
           text-transform:uppercase;color:#B02A57}
.pnx-dot{position:relative;width:6px;height:6px;display:inline-block;flex:0 0 auto}
.pnx-dot i{position:absolute;inset:0;border-radius:999px;background:#059669}
.pnx-dot i:last-child{animation:pnxPulse 2.6s ease-in-out infinite}
@keyframes pnxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(1.8)}}

.pnx-hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.07;letter-spacing:-.035em;
             font-weight:800;margin:18px 0 0;color:var(--pnx-ink)}
.pnx-kicker{font-size:clamp(16px,1.7vw,20px);line-height:1.4;font-weight:700;color:#374151;
            margin:13px 0 0;letter-spacing:-.02em}
.pnx-lede{font-size:16px;line-height:1.65;color:var(--pnx-body);margin:13px 0 0;
          max-width:38em;font-weight:500}
.pnx-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:26px}

.pnx-cta{display:inline-block;background:var(--pnx-grad);color:#fff;font-weight:700;font-size:16px;
         padding:15px 30px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
         box-shadow:0 12px 26px -14px rgba(232,51,109,.75);transition:filter .15s}
.pnx-cta:hover{color:#fff;filter:brightness(.94)}
.pnx-cta:focus-visible{outline:3px solid #F7B7CB;outline-offset:2px}
.pnx-ghost{display:inline-block;background:#fff;color:var(--pnx-ink);font-weight:700;font-size:16px;
           padding:15px 26px;border-radius:999px;border:1px solid #E3E7EE;text-decoration:none}
.pnx-ghost:hover{border-color:var(--pnx-ink);color:var(--pnx-ink)}
.pnx-outline{display:inline-block;background:#fff;color:var(--pnx-brand);font-weight:700;
             font-size:14.5px;padding:12px 20px;border-radius:999px;border:1.5px solid #F0D6DE;
             text-decoration:none;white-space:nowrap}
.pnx-outline:hover{border-color:var(--pnx-brand);color:var(--pnx-brand)}

.pnx-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:24px 0 0;
           padding:0;list-style:none}
.pnx-proof li{font-size:13.5px;font-weight:600;color:#475569;position:relative;padding-left:19px}
.pnx-proof li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;
                      border-left:2.2px solid #059669;border-bottom:2.2px solid #059669;
                      transform:rotate(-45deg)}

/* ── Picker card ──────────────────────────────────────────────────────── */
.pnx-card{margin:0 auto;max-width:940px;background:#fff;border:1px solid #E3E7EE;border-radius:24px;
          overflow:hidden;box-shadow:0 40px 90px -34px rgba(15,23,42,.26),0 2px 6px rgba(15,23,42,.05)}
.pnx-num{width:27px;height:27px;border-radius:999px;background:var(--pnx-grad);color:#fff;
         display:grid;place-items:center;font-size:13.5px;font-weight:800;flex:0 0 auto}

.pnx-dests{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px;margin-top:16px}
.pnx-dest{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #E7EBF2;
          border-radius:14px;padding:12px 13px;cursor:pointer;font-size:14.5px;font-weight:700;
          color:var(--pnx-ink);text-align:left;transition:border-color .15s,background .15s}
.pnx-dest img{border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.09);flex:0 0 auto;object-fit:cover}
.pnx-dest:hover{border-color:#CFD5E0}
.pnx-dest.is-on{border-color:var(--pnx-brand);background:#FEF4F7}
.pnx-dest:focus-visible{outline:2px solid var(--pnx-brand);outline-offset:2px}

.pnx-blurb{font-size:14.5px;line-height:1.6;color:var(--pnx-muted);margin:8px 0 0 38px;font-weight:500}
.pnx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pnx-chips li{font-size:12.5px;font-weight:700;color:#166534;background:#ECFDF3;border:1px solid #C7EBD5;
              border-radius:999px;padding:6px 13px}

.pnx-plans{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pnx-plan{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1.5px solid #E7EBF2;
          border-radius:14px;padding:13px 15px;cursor:pointer;text-align:left;
          transition:border-color .15s,background .15s}
.pnx-plan:hover{border-color:var(--pnx-brand)}
.pnx-plan.is-on{border-color:var(--pnx-brand);background:#FEF4F7}
.pnx-plan:focus-visible{outline:2px solid var(--pnx-brand);outline-offset:2px}
.pnx-radio{width:18px;height:18px;border:2px solid #CBD5E1;border-radius:999px;flex:0 0 auto;position:relative}
.pnx-plan.is-on .pnx-radio{border-color:var(--pnx-brand)}
.pnx-plan.is-on .pnx-radio::after{content:"";position:absolute;inset:3px;border-radius:999px;
                                  background:var(--pnx-brand)}
.pnx-plan-main{flex:1;min-width:0}
.pnx-plan-gb{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--pnx-ink)}
.pnx-plan-sub{display:block;font-size:12.5px;font-weight:600;color:var(--pnx-muted);margin-top:2px}
.pnx-plan-end{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pnx-tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
         color:#166534;background:#DCFCE7;border-radius:6px;padding:3px 7px}
.pnx-plan-price{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--pnx-ink)}

.pnx-result{padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px);border-top:1px solid var(--pnx-line-soft);
            background:var(--pnx-ink);display:flex;flex-wrap:wrap;align-items:center;gap:16px;
            justify-content:space-between}
.pnx-result-l{display:flex;align-items:center;gap:13px;min-width:0}
.pnx-result-l img{border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.22);flex:0 0 auto;object-fit:cover}
.pnx-result-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;
              text-transform:uppercase;color:#8494B0}
.pnx-result-t{display:block;font-size:18px;font-weight:800;letter-spacing:-.025em;color:#fff;margin-top:3px}
.pnx-result-m{display:block;font-size:13px;font-weight:600;color:#A3B0C7;margin-top:2px}
.pnx-result-r{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pnx-price{font-size:29px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1.1}
.pnx-buy:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.pnx-ackbar{padding:16px clamp(20px,3vw,30px);border-top:1px solid var(--pnx-line-soft);background:#FFFBEB}
.pnx-ack{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
         color:#3F3A22;cursor:pointer;font-weight:600}
.pnx-ack input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--pnx-brand)}
.pnx-notes{margin-top:10px}
.pnx-notes summary{cursor:pointer;font-size:12.5px;font-weight:700;color:#92400E;list-style:none;
                   position:relative;padding-right:18px;display:inline-block}
.pnx-notes summary::-webkit-details-marker{display:none}
.pnx-notes summary::after{content:"+";position:absolute;right:0;top:-3px;font-size:16px;font-weight:400}
.pnx-notes[open] summary::after{content:"\2212"}
.pnx-notes ul{margin:10px 0 0;padding-left:18px}
.pnx-notes li{font-size:12.5px;line-height:1.6;color:#5B5330;margin-bottom:7px}

.pnx-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 24px;margin:20px auto 0;
            padding:0;list-style:none;max-width:940px}
.pnx-assure li{font-size:13px;font-weight:600;color:var(--pnx-muted);position:relative;padding-left:18px}
.pnx-assure li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:6px;
                       border-left:2px solid #059669;border-bottom:2px solid #059669;
                       transform:rotate(-45deg)}

/* ── Answer block ─────────────────────────────────────────────────────── */
.pnx-answer{font-size:clamp(16px,1.8vw,18.5px);line-height:1.62;color:var(--pnx-ink);font-weight:500;
            background:#fff;border:1px solid var(--pnx-line);border-left:4px solid var(--pnx-brand);
            border-radius:0 16px 16px 0;padding:24px 28px;margin:0 auto;max-width:78ch}
.pnx-stamp{font-size:12.5px;color:var(--pnx-muted);margin:12px auto 0;max-width:78ch;
           padding-left:28px;font-weight:500;text-align:left}

/* ── Tables ───────────────────────────────────────────────────────────── */
.pnx-scroll{overflow-x:auto;border:1px solid var(--pnx-line);border-radius:var(--pnx-r);
            background:#fff;margin:20px auto 0;max-width:940px;-webkit-overflow-scrolling:touch}
.pnx-table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.pnx-table th,.pnx-table td{padding:16px 18px;text-align:left;
                            border-bottom:1px solid var(--pnx-line-soft);vertical-align:middle}
.pnx-table thead th{background:#0F172A;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
                    color:#CBD5E1;font-weight:800;border-bottom:0;white-space:nowrap;padding:14px 18px}
.pnx-table tbody tr:nth-child(even){background:#FBFCFD}
.pnx-table tbody tr:hover{background:#F6F8FC}
.pnx-table td:first-child{font-weight:600;color:var(--pnx-ink)}
.pnx-table tbody tr:last-child td{border-bottom:none}
.pnx-table .pnx-sub{font-size:12.5px;color:var(--pnx-muted);font-weight:500}
.pnx-table .pnx-c{text-align:center}
.pnx-table .pnx-hl{background:#FEF4F7}
.pnx-table thead .pnx-hl{background:var(--pnx-grad);color:#fff}
.pnx-us{background:#FEF4F7}
.pnx-yes{color:#166534;font-weight:700}
.pnx-no{color:#9A3412;font-weight:700}
.pnx-tick{color:#166534;font-weight:800}
.pnx-cross{color:#94A3B8;font-weight:700}

/* ── Callout ──────────────────────────────────────────────────────────── */
.pnx-callout{margin-top:22px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:16px;padding:18px 20px}
.pnx-callout strong{display:block;font-size:14.5px;color:#92400E;margin-bottom:6px}
.pnx-callout p{margin:0;font-size:14.5px;line-height:1.6;color:#5B5330;font-weight:500}

/* ── Countries ────────────────────────────────────────────────────────── */
.pnx-countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;
               margin:22px 0 0;padding:0;list-style:none}
.pnx-countries li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--pnx-line);
                  border-radius:11px;padding:9px 12px;font-size:13.5px;font-weight:600;color:#334155}
.pnx-countries img{border-radius:2px;box-shadow:0 0 0 1px rgba(15,23,42,.08);flex:0 0 auto;object-fit:cover}

/* ── Steps ────────────────────────────────────────────────────────────── */
.pnx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
           margin:24px 0 0;padding:0;list-style:none;counter-reset:none}
.pnx-steps li{background:#fff;border:1px solid var(--pnx-line);border-radius:var(--pnx-r);padding:20px}
.pnx-sn{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--pnx-brand);
        margin-bottom:9px}
.pnx-steps p{font-size:14.5px;line-height:1.6;color:var(--pnx-muted);margin:6px 0 0;font-weight:500}

.pnx-device{margin-top:16px;background:var(--pnx-band);border:1px solid var(--pnx-line);
            border-radius:var(--pnx-r);padding:24px;display:grid;
            grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;align-items:center}
.pnx-device p{font-size:14.5px;line-height:1.55;color:var(--pnx-muted);margin:5px 0 0;font-weight:500}
.pnx-checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pnx-checks li{font-size:13.5px;font-weight:600;color:#334155;position:relative;padding-left:20px;
               line-height:1.45}
.pnx-checks li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;
                       border-left:2.2px solid #059669;border-bottom:2.2px solid #059669;
                       transform:rotate(-45deg)}

/* ── FAQ: only outer spacing, the accordion itself stays the site's own ─ */
.pnx-faqsec{margin-top:clamp(40px,5vw,68px)}

/* ── Final CTA ────────────────────────────────────────────────────────── */
.pnx-final{border-radius:24px;background:linear-gradient(120deg,#101B33 0%,#1A2542 55%,#2A1B2E 100%);
           padding:clamp(26px,4vw,46px);display:grid;
           grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;align-items:center}
.pnx-final h2{color:#fff;font-size:clamp(23px,2.9vw,33px)}
.pnx-final p{font-size:15.5px;line-height:1.6;color:#B6C0D4;margin:11px 0 0;font-weight:500;max-width:34em}
.pnx-final-r{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.pnx-from{font-size:14.5px;font-weight:600;color:#98A4BC}
.pnx-from strong{font-size:clamp(30px,3.8vw,40px);font-weight:800;letter-spacing:-.04em;color:#fff;
                 display:inline-block;margin-left:6px}
.pnx-fine{font-size:12.5px;line-height:1.65;color:#98A0AE;margin:20px 0 0;max-width:70rem;font-weight:500}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:820px){
  .pnx-blurb{margin-left:0}
  .pnx-result{flex-direction:column;align-items:flex-start;gap:14px}
  .pnx-result-r{width:100%;justify-content:space-between}
  .pnx-buy{flex:1 1 auto;text-align:center}
}
@media (max-width:560px){
  .pnx-dests{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
  .pnx-countries{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .pnx-hero h1{font-size:29px}
  .pnx-cta,.pnx-ghost{width:100%;text-align:center}
  .pnx-plan{padding:12px}
  .pnx-plan-price{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .pnx *,.pnx *::before,.pnx *::after{animation:none!important;transition:none!important}
}


/* ── Yes / no / partly badges, so a scan of the table reads instantly ──── */
.pnx-pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;
          border-radius:999px;padding:4px 11px;white-space:nowrap}
.pnx-pill-yes{background:#ECFDF3;color:#15803D;box-shadow:inset 0 0 0 1px #BBF0CD}
.pnx-pill-no{background:#FEF2F2;color:#B42318;box-shadow:inset 0 0 0 1px #FBD3D0}
.pnx-pill-part{background:#FFFAEB;color:#B54708;box-shadow:inset 0 0 0 1px #FDE9B5}
.pnx-pill-t{display:block;font-size:13px;line-height:1.5;color:var(--pnx-muted);
            margin-top:6px;font-weight:500}

/* ── FAQ ────────────────────────────────────────────────────────────────
   The site's accordion assumes the narrower country page container, so on a
   1240px page its rows stretch and the buttons lose their side padding. These
   rules are scoped to .pnx-faqwrap only and cannot reach a country page. */
.pnx-faqwrap{max-width:1240px;margin:clamp(40px,5vw,68px) auto 0;
             padding-left:clamp(18px,3vw,32px);padding-right:clamp(18px,3vw,32px)}
.pnx-faqwrap .mx-faqsec{margin-top:0}
.pnx-faqwrap .mx-eyebrow,.pnx-faqwrap .mx-h2,.pnx-faqwrap .mx-lede{text-align:center}
.pnx-faqwrap .mx-lede{margin-left:auto!important;margin-right:auto!important;max-width:60ch}
.pnx-faqwrap .mx-pills{display:flex;flex-wrap:wrap;justify-content:center;
                       margin:20px auto 26px!important;width:fit-content;max-width:100%}

/* Readable measure. A question 1240px wide is not a question, it is a banner. */
.pnx-faqwrap .mx-faq{max-width:820px;margin-left:auto;margin-right:auto}

.pnx-faqwrap .accordion-item{background:#fff;border:1px solid var(--pnx-line);
                             border-radius:14px;margin-bottom:10px;overflow:hidden;
                             transition:border-color .15s,box-shadow .15s}
.pnx-faqwrap .accordion-item:hover{border-color:#D6DEE9}
.pnx-faqwrap .accordion-item:has(.accordion-button:not(.collapsed)){
  border-color:#F3C9D7;box-shadow:0 8px 26px -18px rgba(15,23,42,.4)}

.pnx-faqwrap .accordion-button{padding:18px 52px 18px 22px;font-size:15.5px;font-weight:700;
                               line-height:1.45;color:var(--pnx-ink);background:transparent;
                               border-radius:0;box-shadow:none;position:relative}
.pnx-faqwrap .accordion-button:not(.collapsed){color:var(--pnx-brand);background:#FEF7F9}
.pnx-faqwrap .accordion-button:focus{box-shadow:none}
.pnx-faqwrap .accordion-button:focus-visible{outline:2px solid var(--pnx-brand);outline-offset:-2px}
.pnx-faqwrap .accordion-button::after{position:absolute;right:20px;top:50%;
                                      transform:translateY(-50%);margin:0}
.pnx-faqwrap .accordion-button:not(.collapsed)::after{transform:translateY(-50%) rotate(-180deg)}

.pnx-faqwrap .accordion-body{padding:0 22px 20px;font-size:14.5px;line-height:1.7;
                             color:var(--pnx-body);font-weight:500}

@media (max-width:560px){
  .pnx-faqwrap .accordion-button{padding:16px 44px 16px 16px;font-size:14.5px}
  .pnx-faqwrap .accordion-body{padding:0 16px 18px}
}

/* ── Small print, presented rather than dumped ─────────────────────────── */
.pnx-fine{margin:26px 0 0;background:var(--pnx-band);border:1px solid var(--pnx-line);
          border-radius:var(--pnx-r);padding:22px 26px}
.pnx-fine h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
             color:var(--pnx-muted);margin:0 0 10px}
.pnx-fine p{font-size:13.5px;line-height:1.7;color:var(--pnx-body);margin:0;max-width:none;font-weight:500}


/* ── Card heading: sits inside the white box, sized to the site's own h2 ── */
.pnx-card-head{padding:clamp(28px,3.4vw,36px) clamp(20px,3vw,32px) 0;text-align:center}
.pnx-card-head h2{font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;letter-spacing:-.025em;
                  font-weight:700;color:var(--pnx-ink)}
.pnx-card-head p{font-size:15.5px;line-height:1.6;color:var(--pnx-muted);font-weight:500;
                 margin:9px auto 0;max-width:52ch}


/* ── Two steps as one connected flow ─────────────────────────────────────
   The previous version cut the card in half with a rule and a colour change,
   which read as two unrelated panels. Here the numbers sit in a rail and a
   line runs from one to the next, so step one visibly leads into step two.
   The line is drawn on the rail, not between the rows, so it cannot leave a
   stub under the last step. */
.pnx-flow{padding:clamp(26px,3.4vw,36px) clamp(20px,3vw,32px) clamp(28px,3.4vw,36px)}

.pnx-fstep{display:grid;grid-template-columns:34px 1fr;gap:0 16px;align-items:start;
           padding-right:50px}
.pnx-fstep + .pnx-fstep{margin-top:38px}

.pnx-frail{position:relative;display:flex;justify-content:center;height:100%}
/* Connector: from just under this badge to the top of the next one. */
.pnx-fstep:not(:last-child) .pnx-frail::before{content:"";position:absolute;top:36px;bottom:-38px;
  left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,#F3C9D7 0%,#E9EDF3 100%);border-radius:2px}

.pnx-frail .pnx-num{width:30px;height:30px;font-size:14px;position:relative;z-index:1;
                    box-shadow:0 0 0 4px #fff,0 4px 10px -4px rgba(232,51,109,.55)}

.pnx .pnx-fh{font-size:15px!important;line-height:1.35!important;font-weight:700;
              letter-spacing:-.01em;color:var(--pnx-ink);margin:5px 0 0}
.pnx-fbody > *:first-child{margin-top:3px}
.pnx-fbody .pnx-dests{margin-top:18px}
.pnx-fbody .pnx-blurb{margin:9px 0 0}
.pnx-fbody .pnx-chips{margin-top:16px}
.pnx-fbody .pnx-plans{margin-top:20px}

@media (max-width:820px){
  .pnx-fstep{padding-right:22px}
}
@media (max-width:560px){
  .pnx-flow{padding:20px 16px 22px}
  .pnx-fstep{grid-template-columns:28px 1fr;gap:0 12px;padding-right:0}
  .pnx-frail .pnx-num{width:26px;height:26px;font-size:13px}
  .pnx-fstep:not(:last-child) .pnx-frail::before{top:30px;bottom:-38px}
  .pnx .pnx-fh{font-size:14.5px!important}
}


/* ═══ Mobile: the rest ══════════════════════════════════════════════════ */
@media (max-width:720px){
  /* Centred paragraphs go ragged on a narrow column, so read them left. */
  .pnx-head.pnx-center p{text-align:left;max-width:none}
  .pnx .pnx-note-c{text-align:left}
  .pnx-card-head p{text-align:left}
  .pnx-answer{padding:18px 18px 18px 16px;border-radius:0 12px 12px 0}
  .pnx-stamp{padding-left:16px}

  /* On a phone the rail would cost 40px of a 375px screen and force a matching
     40px on the right to stay symmetrical. Collapse it instead: the badge sits
     inline beside its heading and the content runs the full width of the card. */
  .pnx-fstep{display:block;padding-right:0}
  .pnx-frail{display:inline-flex;height:auto;vertical-align:middle;margin-right:10px}
  .pnx-fstep:not(:last-child) .pnx-frail::before{display:none}
  .pnx .pnx-fh{display:inline;vertical-align:middle}
  .pnx-fbody{display:block}
  .pnx-fbody > *:first-child{margin-top:0}
  /* The connector becomes a short rule under each step so the flow still reads. */
  .pnx-fstep + .pnx-fstep{margin-top:26px;padding-top:24px;border-top:1px solid var(--pnx-line-soft)}

  /* Pills fit two per row rather than orphaning one. */
  .pnx-faqwrap .mx-pills{width:100%;gap:6px}
  .pnx-faqwrap .mx-pills .faq-cat{flex:1 1 auto;white-space:nowrap;font-size:12.5px}

  .pnx-final{text-align:left}
  .pnx-fine{padding:18px}
}


/* ═══ Mobile tables: keep the real table, shrink it to fit ══════════════
   The layout stays a proper table so the columns still line up and compare.
   What changes is the scale: smaller type, tighter cells, no minimum width,
   and column widths set so the long middle column takes the slack. */
@media (max-width:720px){
  .pnx-scroll{border-radius:14px;margin-top:16px}
  .pnx-table{min-width:0;width:100%;table-layout:fixed;font-size:12px}
  .pnx-table th,.pnx-table td{padding:9px 8px;word-break:normal;overflow-wrap:anywhere;
                              hyphens:auto;vertical-align:top}
  .pnx-table thead th{font-size:9.5px;letter-spacing:.04em;padding:9px 8px;white-space:normal}
  .pnx-table td:first-child{font-size:12.5px}
  .pnx-table .pnx-sub{font-size:10.5px;line-height:1.35}
  .pnx-pill{font-size:9.5px;padding:3px 7px}
  .pnx-pill-t{font-size:10.5px;line-height:1.4;margin-top:4px}
  /* Three columns: name, the wordy one, the verdict. */
  .pnx-table col:first-child{width:26%}
  .pnx-table th:first-child,.pnx-table td:first-child{width:26%}
  .pnx-table th:nth-child(2),.pnx-table td:nth-child(2){width:40%}
  .pnx-table th:nth-child(3),.pnx-table td:nth-child(3){width:34%}
  /* The yes/no grid is narrow on both value columns instead. */
  .pnx-vs th:first-child,.pnx-vs td:first-child{width:44%}
  .pnx-vs th:nth-child(2),.pnx-vs td:nth-child(2){width:28%}
  .pnx-vs th:nth-child(3),.pnx-vs td:nth-child(3){width:28%}
}
@media (max-width:400px){
  .pnx-table{font-size:11.5px}
  .pnx-table th,.pnx-table td{padding:8px 6px}
  .pnx-table thead th{font-size:9px}
}


/* ═══ Mobile: two fixes ═════════════════════════════════════════════════
   1. The tables now fit, so the wrapper no longer needs to be a scroll box.
      Keeping overflow:auto made the rounded corner clip the highlighted
      header column, which read as the table being cut off at the right.
   2. The FAQ pills were flex:1 1 auto, so the first one grew to the full row
      and pushed the other two onto a second line. */
@media (max-width:720px){
  /* One box, not two. The wrapper kept a 1px border and a 14px radius while the
     table had its own radius inside it, and that nested frame is the pale strip
     showing to the right of the highlighted column. The table becomes the box. */
  .pnx-scroll{overflow-x:visible;border:0;border-radius:0;background:transparent}
  .pnx-table{border-radius:13px;overflow:hidden;border:1px solid var(--pnx-line)}
  .pnx-table thead th:first-child{border-top-left-radius:13px}
  .pnx-table thead th:last-child{border-top-right-radius:13px}
  .pnx-table tbody tr:last-child td:first-child{border-bottom-left-radius:13px}
  .pnx-table tbody tr:last-child td:last-child{border-bottom-right-radius:13px}

  .pnx-faqwrap .mx-pills .faq-cat{flex:0 1 auto;padding-left:12px;padding-right:12px}
}
@media (max-width:420px){
  .pnx-faqwrap .mx-pills .faq-cat{font-size:11.5px;padding-left:10px;padding-right:10px}
}