.lp-ppg,.lp-cache { --widget-line:var(--lp-border,#d9e1e9); --widget-blue:var(--lp-primary,#377dff); }
.lp-ppg { padding:5rem 0; background:var(--lp-bg); }
.lp-ppg-heading { max-width:55rem; margin-bottom:2.3rem; }
.lp-ppg h2,.lp-cache h2 { margin:0; color:var(--lp-text); font-size:clamp(2rem,3.5vw,3rem); line-height:1.12; letter-spacing:-.035em; }
.lp-ppg-heading p,.lp-cache-intro p { max-width:68ch; margin:1rem 0 0; color:var(--lp-text-muted); font-size:1.06rem; line-height:1.6; }
.lp-ppg-demo { border:1px solid var(--widget-line); border-radius:16px; overflow:hidden; background:var(--lp-surface); }
.lp-ppg-steps { display:grid; grid-template-columns:.85fr 1fr 1.2fr 1fr; padding:1.75rem .5rem; }
.lp-ppg-step { min-width:0; padding:0 1.2rem; border-right:1px solid var(--widget-line); }
.lp-ppg-step:nth-child(4) { border-right:0; }
.lp-ppg-step h3,.lp-ppg-step label { display:flex; align-items:center; gap:.5rem; min-height:2.8rem; margin:0 0 .8rem; color:var(--lp-text); font-size:.9rem; font-weight:700; line-height:1.4; }
.lp-ppg-step h3 span,.lp-ppg-step label span { display:grid; flex:0 0 1.6rem; place-items:center; width:1.6rem; height:1.6rem; color:var(--lp-text-muted); background:var(--lp-bg-subtle); border-radius:50%; font-size:.8rem; position:relative; overflow:hidden; isolation:isolate; }
.lp-step-number::before { content:''; position:absolute; inset:0; background:#c6dcff; transform:scaleY(var(--step-fill,0)); transform-origin:bottom; z-index:-1; }
.lp-step-number b { font-weight:inherit; }
.lp-ppg-step.is-current .lp-step-number { color:#153e79; outline:1px solid #75a8f5; }
.lp-ppg-step .lp-step-number { color:#234a80; background:#edf4ff; }
.lp-ppg-step select { display:block; width:100%; min-height:3rem; padding:.6rem .55rem; color:var(--lp-text); background:var(--lp-bg); border:1px solid var(--widget-line); border-radius:8px; font:inherit; font-size:.94rem; text-transform:capitalize; }
.lp-ppg-step select:focus-visible,.lp-ppg a:focus-visible,.lp-cache a:focus-visible { outline:3px solid var(--widget-blue); outline-offset:3px; }
.lp-ppg-step select:disabled { opacity:.55; }
.lp-ppg-step small { display:block; min-height:2.7rem; margin-top:.65rem; color:var(--lp-text-muted); font-size:.8rem; line-height:1.45; }
.lp-ppg-payments { display:flex; flex-wrap:wrap; gap:.35rem .65rem; min-height:3rem; align-content:center; color:var(--lp-text); font-size:.82rem; line-height:1.5; }
.lp-ppg-options { grid-column:1 / -1; display:flex; align-items:center; gap:1.5rem; border-right:0; border-top:1px solid var(--widget-line); margin:1.4rem 1.2rem 0; padding:1.2rem 0 0; }
.lp-ppg-options h3 { margin:0; min-height:0; }
.lp-ppg-options ul { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; padding:0; margin:0; list-style:none; color:var(--lp-text-muted); font-size:.85rem; }
.lp-ppg-options a { margin-left:auto; white-space:nowrap; font-size:.85rem; }
.lp-ppg-step:first-child small { min-height:0; margin-top:0; }
.lp-ppg-topup { display:inline-flex; align-items:center; min-height:2.75rem; font-size:.83rem; font-weight:600; }
.lp-ppg-output { padding:1.6rem 1.7rem; color:#e8f1ff; background:#11233b; }
.lp-ppg-output-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.lp-ppg-output-head strong { font-size:1rem; }
.lp-ppg-output-head span { color:#b9cce5; font-size:.82rem; }
.lp-ppg-output code { display:block; min-height:3.3rem; color:#cfdaeb; font-size:clamp(.85rem,1.35vw,1.05rem); line-height:1.7; overflow-wrap:anywhere; white-space:normal; }
.lp-ppg-param-pool { color:#9fc8ff; }
.lp-ppg-param-country { color:#99e0c0; }
.lp-ppg-key { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem 1.4rem; padding-top:1rem; color:#c4d5ec; font-size:.8rem; }
.lp-ppg-key > span { display:flex; align-items:center; gap:.45rem; }
.lp-ppg-key i { width:.5rem; height:.5rem; border-radius:50%; }
.lp-ppg-pool-dot { background:#9fc8ff; }.lp-ppg-country-dot { background:#99e0c0; }
.lp-ppg-key a { margin-left:auto; color:#b4d2ff; text-decoration:underline; text-underline-offset:3px; }
.lp-cache { padding:5rem 0; background:var(--lp-bg); }
.lp-cache-intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.4rem; }
.lp-cache-intro > div { max-width:50rem; }.lp-cache-intro .btn { flex:0 0 auto; }
.lp-cache-demo { padding:1.5rem; background:var(--lp-surface); border:1px solid var(--widget-line); border-radius:16px; }
.lp-cache-heading { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-bottom:1rem; }
.lp-cache-heading h3 { margin:0; color:var(--lp-text); font-size:1.4rem; letter-spacing:-.02em; }
.lp-cache-url { max-width:100%; overflow-wrap:anywhere; font: .82rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--lp-text-muted); }
.lp-cache-file-meta { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; color:var(--lp-text-muted); font-size:.8rem; line-height:1.5; }
.lp-cache-log-head,.lp-cache-request { display:grid; grid-template-columns:.65fr 1.5fr .65fr .6fr; align-items:center; gap:1rem; }
.lp-cache-log-head { padding:.8rem 1rem; color:var(--lp-text-muted); font-size:.8rem; border-bottom:1px solid var(--widget-line); }
.lp-cache-request { position:relative; isolation:isolate; min-height:2.8rem; padding:.5rem 1rem; color:var(--lp-text); border-bottom:1px solid var(--widget-line); }
.lp-cache-request:last-child { border-bottom:0; }
.lp-cache-request::before { content:''; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--widget-blue) 7%,transparent); transform:scaleX(var(--request-progress,1)); transform-origin:left; transition:opacity .35s ease-out; }
.lp-cache-request.is-done::before { opacity:0; }
.lp-cache-time { white-space:nowrap; font-size:.9rem; font-variant-numeric:tabular-nums; }
.lp-cache-request-id { display:flex; align-items:center; gap:.75rem; font:500 .94rem ui-monospace,SFMono-Regular,Consolas,monospace; }
.lp-cache-request-id svg { display:block; flex-shrink:0; margin:0; width:1.2rem; height:1.2rem; color:var(--widget-blue); transition:opacity .25s; }
.lp-cache-request:not(.is-done) .lp-cache-request-id svg { opacity:0; }
.lp-cache-request strong,.lp-cache-request small { display:block; }
.lp-cache-request strong { font-size:.95rem; font-weight:600; }
.lp-cache-request small { margin-top:.2rem; color:var(--lp-text-muted); font-size:.8rem; }
.lp-cache-charge { font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums; }
.lp-cache-charge.is-free { color:var(--lp-primary); }
.lp-cache-request:not(.is-done) .lp-cache-time,.lp-cache-request:not(.is-done) .lp-cache-charge { visibility:hidden; }
.lp-cache-request > span:nth-child(2),.lp-cache-charge { transition:opacity .3s; }
.lp-cache-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--widget-line); }
.lp-cache-summary strong,.lp-cache-summary span { display:block; }
.lp-cache-summary strong { color:var(--lp-text); font-size:1.8rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.lp-cache-summary span { margin-top:.4rem; color:var(--lp-text-muted); font-size:.85rem; }
.lp-cache-summary .lp-cache-savings { color:var(--widget-blue); }
.lp-cache-note { margin:1rem 0 0; color:var(--lp-text-muted); font-size:.85rem; line-height:1.5; }
@media (max-width:991.98px) {
 .lp-ppg-steps { grid-template-columns:1fr 1fr; gap:1.5rem 0; }
 .lp-ppg-step:nth-child(2) { border-right:0; }
 .lp-ppg-options { flex-wrap:wrap; margin-top:0; gap:1rem; }
 .lp-cache-intro { flex-direction:column; align-items:flex-start; }
}
@media (max-width:575.98px) {
 .lp-ppg,.lp-cache { padding:3.5rem 0; }
 .lp-ppg-steps { grid-template-columns:1fr; padding:1.25rem; gap:1.3rem; }
 .lp-ppg-step { padding:0; border:0; }
 .lp-ppg-step h3,.lp-ppg-step label { min-height:0; margin-bottom:.6rem; }
 .lp-ppg-step small { min-height:0; }
 .lp-ppg-options { margin:0; padding-top:1.2rem; border-top:1px solid var(--widget-line); gap:.7rem; }
 .lp-ppg-options h3 { width:100%; margin:0; }
 .lp-ppg-options ul { display:grid; gap:.35rem; }
 .lp-ppg-options a { margin-left:0; }
 .lp-ppg-output { padding:1.25rem; }
 .lp-ppg-output-head { align-items:flex-start; flex-direction:column; gap:.35rem; }
 .lp-ppg-output-head span { min-height:2.4rem; }
 .lp-ppg-output code { min-height:6.1rem; }
 .lp-ppg-key { column-gap:1rem; }.lp-ppg-key a { margin-left:0; }
 .lp-cache-demo { padding:1rem; }
 .lp-cache-heading { align-items:flex-start; flex-direction:column; gap:.5rem; }
 .lp-cache-log-head,.lp-cache-request { grid-template-columns:2.8rem minmax(0,1fr) 3rem 2.7rem; gap:.35rem; padding-left:0; padding-right:0; }
 .lp-cache-log-head { font-size:.7rem; }
 .lp-cache-request { min-height:2.9rem; }.lp-cache-request-id { gap:.2rem; font-size:.8rem; }
 .lp-cache-request-id svg { width:.8rem; }
 .lp-cache-request strong,.lp-cache-charge,.lp-cache-time { font-size:.73rem; }
 .lp-cache-request small { font-size:.73rem; }
 .lp-cache-summary { gap:.5rem; }.lp-cache-summary strong { font-size:clamp(1.1rem,5vw,1.5rem); white-space:nowrap; }.lp-cache-summary span { font-size:.76rem; }
}
@media (prefers-reduced-motion:reduce) { .lp-ppg-step h3 span,.lp-ppg-step label span,.lp-cache-request,.lp-cache-request::before,.lp-cache-request-id svg,.lp-cache-request > span:nth-child(2),.lp-cache-charge { transition:none; } }

.lp-cache-benefit { padding:3rem 0; background:var(--lp-bg); }
.lp-cache-benefit-inner { display:flex; align-items:center; gap:2rem; padding:1.5rem 0; border-top:1px solid var(--lp-border,#d9e1e9); border-bottom:1px solid var(--lp-border,#d9e1e9); }
.lp-cache-benefit-inner > div { flex:1; }
.lp-cache-benefit-inner h3 { margin:0 0 .5rem; color:var(--lp-text); font-size:1.4rem; line-height:1.25; letter-spacing:-.02em; }
.lp-cache-benefit-inner p { max-width:72ch; margin:0; color:var(--lp-text-muted); line-height:1.6; }
.lp-cache-benefit-inner a { flex-shrink:0; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lp-ppg-compact { padding:3rem 0; }
.lp-ppg-compact .lp-ppg-heading { margin-bottom:1.5rem; }
.lp-ppg-compact .lp-ppg-steps { padding-top:1rem; padding-bottom:1rem; }
.lp-ppg-compact .lp-ppg-output { padding-top:1rem; padding-bottom:1rem; }
.lp-cache-compact { padding:3rem 0; }
@media (max-width:767.98px) { .lp-cache-benefit-inner { flex-direction:column; align-items:flex-start; gap:1rem; } }

.lp-ppg-step select[data-lp-fixed-type='true'] { opacity:1; appearance:none; background-image:none; }

.lp-usecase-article { margin-top:3rem; }
.lp-ppg-article { padding:3.5rem 0 1.5rem; }
.lp-usecase-support { margin-bottom:3rem; }
.lp-usecase-related { margin-top:3rem; margin-bottom:3rem; }
@media (max-width:575.98px) { .lp-usecase-article { margin-top:2rem; } .lp-ppg-article { padding-top:2.5rem; } }
