/* =============================================================================
   ProxyRotator shared commercial landing-page design system.
   Scoped under .lp so it never inherits the dark v2.03 theme rules.
   Used by all new SEO money pages (alternatives, use-cases, integrations, API).
   Brand: teal #1697bf, navy #15212a, yellow #fdd700, cyan #55bde5.
   ============================================================================= */
.lp{--navy:#0e1a24;--navy2:#15212a;--teal:#1697bf;--teal-d:#1180a0;--cyan:#55bde5;--yellow:#fdd700;
  --ink:#1f2a37;--ink2:#475569;--ink3:#8595a3;--line:#e6ebf1;--bg:#f4f7fb;--card:#fff;
  background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.lp *{box-sizing:border-box}
.lp-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.lp-wrap-narrow{max-width:860px;margin:0 auto;padding:0 20px}

/* ---------- HERO ---------- */
.lp-hero{position:relative;overflow:hidden;color:#fff;padding:46px 0 58px;
  background:radial-gradient(1100px 480px at 82% -12%,rgba(22,151,191,.45),transparent 60%),linear-gradient(135deg,#0b1620 0%,#10222e 55%,#143240 100%)}
.lp-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.lp-hero .lp-wrap{position:relative;z-index:1}
.lp-crumb{font-size:.84rem;color:#9fb6c4;margin-bottom:18px}
.lp-crumb a{color:#9fb6c4;text-decoration:none}.lp-crumb a:hover{color:#fff}
.lp-crumb span{color:#cfe0ea}
.lp-eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.lp-hero h1{font-size:clamp(2.05rem,4.4vw,3.05rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;color:#fff;max-width:18ch}
.lp-hero h1 .hl{background:linear-gradient(90deg,#55bde5,#9be7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-hero .lp-lead{max-width:60ch;font-size:1.12rem;color:#c4d4de;margin:0 0 26px}
.lp-hero .lp-lead a{color:#9be7ff;text-decoration:underline;text-underline-offset:2px}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-btn{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 26px;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.lp-btn-primary{background:var(--yellow);color:#1a1a1a!important;box-shadow:0 10px 26px rgba(253,215,0,.26)}
.lp-btn-primary:hover{transform:translateY(-2px)}
.lp-btn-ghost{background:rgba(255,255,255,.07);color:#fff!important;border-color:rgba(255,255,255,.32)}
.lp-btn-ghost:hover{background:rgba(255,255,255,.14)}
.lp-btn-teal{background:var(--teal);color:#fff!important}.lp-btn-teal:hover{background:var(--teal-d)}
.lp-hero-note{margin-top:14px;font-size:.86rem;color:#94aab8}
.lp-hero-note i{color:#7ee29a;margin-right:5px}

/* hero stat strip */
.lp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:32px}
.lp-stat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px 18px}
.lp-stat b{display:block;font-size:1.55rem;font-weight:800;color:#fff;line-height:1.1}
.lp-stat span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#94aab8;font-weight:600}

/* ---------- TRUST ROW ---------- */
.lp-trust{background:var(--navy2);border-top:1px solid rgba(255,255,255,.06);padding:16px 0}
.lp-trust .lp-wrap{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:center;color:#aebfcc;font-size:.86rem;font-weight:600}
.lp-trust i{color:var(--cyan);margin-right:7px}

/* ---------- SECTIONS ---------- */
.lp-sec{padding:58px 0}
.lp-sec.alt{background:#fff}
.lp-sec.navy{background:var(--navy);color:#fff}
.lp-h2-wrap{max-width:720px;margin:0 auto 36px;text-align:center}
.lp-h2-wrap.left{text-align:left;margin-left:0}
.lp-h2{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:8px 0 12px}
.lp-sec.navy .lp-h2{color:#fff}
.lp-h2-sub{font-size:1.08rem;color:var(--ink2);margin:0}
.lp-sec.navy .lp-h2-sub{color:#c4d4de}

/* ---------- FEATURE GRID ---------- */
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lp-grid.cols2{grid-template-columns:repeat(2,1fr)}
.lp-grid.cols4{grid-template-columns:repeat(4,1fr)}
.lp-feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 8px 30px rgba(16,40,60,.05);transition:transform .14s,box-shadow .14s}
.lp-feat:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(16,40,60,.1)}
.lp-feat-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,var(--teal),#1f6f93);margin-bottom:16px}
.lp-feat h3{font-size:1.12rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.lp-feat p{font-size:.97rem;color:var(--ink2);margin:0}

/* ---------- PROSE ---------- */
.lp-prose{font-size:1.05rem;color:var(--ink2);line-height:1.75;max-width:760px}
.lp-prose h2{font-size:1.55rem;font-weight:800;color:var(--ink);margin:34px 0 14px;letter-spacing:-.01em;padding-left:14px;border-left:4px solid var(--teal)}
.lp-prose h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin:26px 0 10px}
.lp-prose p{margin:0 0 15px}
.lp-prose a{color:var(--teal);font-weight:600;text-decoration:none}.lp-prose a:hover{text-decoration:underline}
.lp-prose ul{list-style:none;padding:0;margin:0 0 18px}
.lp-prose ul li{position:relative;padding-left:30px;margin-bottom:11px}
.lp-prose ul li:before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--teal);position:absolute;left:0;top:2px;font-size:.85rem}
.lp-prose code{background:#eef3f8;color:#0f2530;padding:2px 7px;border-radius:6px;font-size:.88em;font-family:"SF Mono",Menlo,Consolas,monospace}

/* ---------- COMPARISON TABLE ---------- */
.lp-cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(16,40,60,.06)}
.lp-cmp th,.lp-cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid #eef2f6;font-size:.97rem}
.lp-cmp thead th{background:var(--navy);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.lp-cmp thead th.us{background:linear-gradient(135deg,var(--teal),#16323f)}
.lp-cmp td:first-child,.lp-cmp th:first-child{font-weight:700;color:var(--ink)}
.lp-cmp tbody tr:last-child td{border-bottom:none}
.lp-cmp .col-us{background:#f1fafd;font-weight:600;color:var(--ink)}
.lp-cmp .yes{color:#0f9b54;font-weight:700}.lp-cmp .no{color:#c2402f;font-weight:700}
.lp-cmp .muted{color:var(--ink3)}

/* ---------- PRICING ---------- */
.lp-price{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.lp-plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;box-shadow:0 8px 30px rgba(16,40,60,.05)}
.lp-plan.pop{border:2px solid var(--teal);box-shadow:0 18px 50px rgba(22,151,191,.18)}
.lp-plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:20px}
.lp-plan h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0 0 6px}
.lp-plan .price{font-size:2.2rem;font-weight:800;color:var(--ink);line-height:1}
.lp-plan .price small{font-size:.92rem;font-weight:600;color:var(--ink3)}
.lp-plan .pdesc{font-size:.9rem;color:var(--ink2);margin:8px 0 18px}
.lp-plan ul{list-style:none;padding:0;margin:0 0 22px}
.lp-plan ul li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.94rem;color:var(--ink2)}
.lp-plan ul li:before{content:"\f058";font-family:"Font Awesome 5 Free";font-weight:900;color:#0f9b54;position:absolute;left:0;top:1px}
.lp-plan .lp-btn{width:100%;justify-content:center;height:46px}

/* ---------- STEPS (integration pages) ---------- */
.lp-steps{counter-reset:step;max-width:820px;margin:0 auto}
.lp-step{position:relative;padding:0 0 30px 64px;border-left:2px solid var(--line);margin-left:22px}
.lp-step:last-child{border-left-color:transparent;padding-bottom:0}
.lp-step:before{counter-increment:step;content:counter(step);position:absolute;left:-22px;top:-4px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#1f6f93);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 6px 18px rgba(22,151,191,.3)}
.lp-step h3{font-size:1.18rem;font-weight:700;color:var(--ink);margin:2px 0 10px}
.lp-step p{color:var(--ink2);margin:0 0 12px}

/* ---------- CODE BLOCK (Monokai IDE: window chrome + line numbers + syntax highlight) ---------- */
.lp-code{background:#272822;border:1px solid #41423b;border-radius:14px;overflow:hidden;margin:0 0 18px;box-shadow:0 16px 44px rgba(0,0,0,.45)}
.lp-code-top{display:flex;align-items:center;padding:12px 16px;background:#1d1e19;border-bottom:1px solid #41423b}
.lp-code-top:before{content:"";flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:19px 0 0 #febc2e,38px 0 0 #28c840;margin-right:56px}
.lp-code-top span{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a6a79b}
.lp-code-copy{margin-left:auto;border:1px solid #41423b;background:#33342c;color:#cfd0c3;border-radius:8px;padding:5px 12px;font-size:.74rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .14s}
.lp-code-copy:hover{background:#3e3f36;color:#fff;border-color:var(--teal)}
.lp-code-copy.done{background:#0f9b54;color:#fff;border-color:#0f9b54}
.lp-code pre{margin:0;padding:16px 18px;overflow-x:auto;overflow-y:hidden;font-family:"SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:.85rem;line-height:1.7;tab-size:4}
/* hard base color so nothing inherits Bootstrap's magenta code color */
.lp-code pre,.lp-code pre code,.lp-code code[class*="language-"],.lp-code pre[class*="language-"]{color:#f8f8f2!important;background:none!important;text-shadow:none!important;font-family:inherit;white-space:pre}
.lp-code pre.line-numbers{position:relative;padding-left:3.6em;counter-reset:ln}
.lp-code pre.line-numbers>code{position:relative;white-space:inherit}
.lp-code .line-numbers-rows{position:absolute;pointer-events:none;top:0;left:-3.6em;width:3em;letter-spacing:-1px;border-right:1px solid #41423b;user-select:none}
.lp-code .line-numbers-rows>span{display:block;counter-increment:ln}
.lp-code .line-numbers-rows>span:before{content:counter(ln);color:#6a6b5f;display:block;padding-right:1em;text-align:right;font-size:.85rem;line-height:1.7}
/* Monokai token palette (every token type covered) */
.lp-code .token{color:#f8f8f2}
.lp-code .token.comment,.lp-code .token.prolog,.lp-code .token.doctype,.lp-code .token.cdata{color:#75715e;font-style:italic}
.lp-code .token.punctuation{color:#f8f8f2}
.lp-code .token.namespace{opacity:.75}
.lp-code .token.keyword,.lp-code .token.operator,.lp-code .token.tag,.lp-code .token.atrule,.lp-code .token.important,.lp-code .token.deleted{color:#f92672}
.lp-code .token.string,.lp-code .token.char,.lp-code .token.attr-value,.lp-code .token.inserted{color:#e6db74}
.lp-code .token.number,.lp-code .token.boolean,.lp-code .token.constant,.lp-code .token.symbol,.lp-code .token.property,.lp-code .token.variable{color:#ae81ff}
.lp-code .token.function,.lp-code .token.class-name{color:#a6e22e}
.lp-code .token.attr-name,.lp-code .token.selector{color:#a6e22e}
.lp-code .token.builtin{color:#66d9ef}
.lp-code .token.regex,.lp-code .token.url,.lp-code .token.entity{color:#fd971f}
.lp-code .token.bold{font-weight:700}.lp-code .token.italic{font-style:italic}

/* ---------- UI FIGURE (screenshot mockup) ---------- */
.lp-figure{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 36px rgba(16,40,60,.1);margin:0 0 14px}
.lp-figure-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f3f6fa;border-bottom:1px solid var(--line)}
.lp-figure-bar i{width:11px;height:11px;border-radius:50%;background:#d6dde6;display:inline-block}
.lp-figure-bar i:nth-child(1){background:#ff5f57}.lp-figure-bar i:nth-child(2){background:#febc2e}.lp-figure-bar i:nth-child(3){background:#28c840}
.lp-figure-bar span{margin-left:8px;font-size:.78rem;color:var(--ink3);font-weight:600}
.lp-figure-body{padding:20px}
.lp-field{margin-bottom:14px}
.lp-field label{display:block;font-size:.76rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.lp-field .inp{display:flex;align-items:center;height:40px;padding:0 13px;border:1px solid #d7e0ea;border-radius:9px;background:#fbfdff;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.88rem;color:var(--ink)}
.lp-field .inp.fill{border-color:var(--teal);background:#f1fafd;color:#0f2530;font-weight:600}
.lp-figcap{font-size:.84rem;color:var(--ink3);text-align:center;margin:0 0 26px}

/* ---------- TESTIMONIAL ---------- */
.lp-quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 8px 30px rgba(16,40,60,.05)}
.lp-quote .stars{color:#fdb022;margin-bottom:12px;font-size:.95rem}
.lp-quote p{font-size:1rem;color:var(--ink);margin:0 0 16px;font-style:italic}
.lp-quote .who{font-size:.88rem;color:var(--ink2)}.lp-quote .who b{color:var(--ink)}

/* ---------- FAQ ---------- */
.lp-faqsec{padding:56px 0;background:#fff}
.lp-faq{max-width:820px;margin:0 auto}
.lp-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:box-shadow .15s}
.lp-faq details[open]{box-shadow:0 6px 22px rgba(16,40,60,.07)}
.lp-faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--ink);font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:after{content:"\f067";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--teal);font-size:.85rem}
.lp-faq details[open] summary:after{content:"\f068"}
.lp-faq .lp-faq-a{padding:0 22px 20px;color:var(--ink2);font-size:1rem}
.lp-faq .lp-faq-a a{color:var(--teal);font-weight:600}

/* ---------- CTA BAND ---------- */
.lp-ctaband{background:radial-gradient(800px 300px at 88% 0,rgba(85,189,229,.4),transparent),linear-gradient(135deg,#0e1a24,#16323f);color:#fff;padding:54px 0;text-align:center}
.lp-ctaband h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;margin:0 0 12px}
.lp-ctaband p{font-size:1.1rem;color:#c4d4de;margin:0 0 26px;max-width:60ch;margin-left:auto;margin-right:auto}
.lp-ctaband .lp-cta-row{justify-content:center}

/* ---------- COPY TOAST ---------- */
.lp-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f9b54;color:#fff;padding:12px 22px;border-radius:30px;font-weight:600;font-size:.92rem;opacity:0;pointer-events:none;transition:all .25s;z-index:99999;box-shadow:0 10px 30px rgba(15,155,84,.35)}
.lp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){.lp-grid,.lp-grid.cols4{grid-template-columns:repeat(2,1fr)}.lp-price{grid-template-columns:1fr;max-width:420px}}
@media(max-width:600px){.lp-grid,.lp-grid.cols2,.lp-grid.cols4{grid-template-columns:1fr}.lp-cmp{display:block;overflow-x:auto;white-space:nowrap}.lp-btn{width:100%;justify-content:center}.lp-cta-row{flex-direction:column;align-items:stretch}}