/* PayPlaxe manuals — design tokens mirrored from payplaxe.com (payplaxe-modern.css) */
:root{
  --pp-ink:#0b1220; --pp-ink-2:#101929; --pp-ink-3:#182338;
  --pp-body:#2b3648; --pp-muted:#5b6779; --pp-faint:#8b96a8;
  --pp-paper:#f4f7fb; --pp-card:#ffffff; --pp-line:#e2e8f0;
  --pp-blue:#2563eb; --pp-blue-600:#1d4ed8; --pp-blue-700:#1e40af;
  --pp-sky:#8fbaff; --pp-sky-2:#c4dbff; --pp-tonal:#e8f0fe; --pp-tonal-ink:#1e40af;
  --pp-green:#228800; --pp-green-700:#1b6e00; --pp-amber:#b45309; --pp-amber-bg:#fef3c7;
  --pp-r-sm:12px; --pp-r-md:18px; --pp-r-lg:24px; --pp-r-xl:32px;
  --pp-shadow-1:0 1px 2px rgba(11,18,32,.06),0 6px 20px -8px rgba(11,18,32,.1);
  --pp-shadow-2:0 2px 6px rgba(11,18,32,.07),0 24px 48px -20px rgba(11,18,32,.25);
  --pp-ease:cubic-bezier(.2,0,0,1);
  --pp-font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pp-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pp-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--pp-font-body);font-size:16.5px;line-height:1.65;color:var(--pp-body);background:var(--pp-paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--pp-font-display);color:var(--pp-ink);letter-spacing:-.02em;line-height:1.15;font-weight:700;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:0}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
a{color:var(--pp-blue-600);text-decoration:none;transition:color .18s var(--pp-ease)}
a:hover{color:var(--pp-blue-700)}
::selection{background:var(--pp-sky-2);color:var(--pp-ink)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--pp-blue) 55%,transparent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:880px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(244,247,251,.86);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--pp-line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--pp-font-display);font-weight:700;color:var(--pp-ink);font-size:1.06rem;letter-spacing:-.02em}
.brand .dot{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--pp-blue),#7aa7ff);box-shadow:0 6px 16px -8px rgba(37,99,235,.9)}
.brand small{display:block;font-family:var(--pp-font-body);font-weight:500;font-size:.72rem;color:var(--pp-muted);letter-spacing:0}
.head-spacer{flex:1}
.head-links{display:flex;align-items:center;gap:8px}
.head-links a{font-size:.88rem;font-weight:600;color:var(--pp-ink-3);padding:7px 12px;border-radius:999px}
.head-links a:hover{background:var(--pp-tonal);color:var(--pp-tonal-ink)}
.langs{display:flex;gap:4px;background:#fff;border:1px solid var(--pp-line);border-radius:999px;padding:3px}
.langs a{font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:999px;color:var(--pp-muted)}
.langs a.on{background:var(--pp-blue-600);color:#fff}
.langs a:hover:not(.on){background:var(--pp-tonal);color:var(--pp-tonal-ink)}

/* ---------- hero ---------- */
.hero{padding:54px 0 26px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:26px}
.crumbs{font-size:.85rem;color:var(--pp-faint);margin-bottom:14px}
.crumbs a{color:var(--pp-muted);font-weight:600}
.hero-top{display:flex;gap:20px;align-items:flex-start}
.appicon{width:74px;height:74px;flex:0 0 74px;border-radius:20px;background:linear-gradient(150deg,#fff,#eef3fb);border:1px solid var(--pp-line);box-shadow:var(--pp-shadow-1);display:grid;place-items:center}
.appicon svg{width:44px;height:44px}
.lead{font-size:1.12rem;color:var(--pp-ink-3);max-width:65ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--pp-line);border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:600;color:var(--pp-ink-3);box-shadow:var(--pp-shadow-1)}
.pill.accent{background:var(--pp-tonal);border-color:transparent;color:var(--pp-tonal-ink)}
.pill.green{background:#eaf7e3;border-color:transparent;color:#1b6e00}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;background:var(--pp-blue-600);color:#fff;border:none;border-radius:999px;padding:13px 26px;box-shadow:0 1px rgba(11,18,32,.1),0 8px 20px -10px rgba(37,99,235,.55);transition:transform .18s var(--pp-ease),background .18s var(--pp-ease),box-shadow .18s var(--pp-ease)}
.btn:hover{background:var(--pp-blue-700);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(11,18,32,.1),0 14px 28px -12px rgba(37,99,235,.6)}
.btn.ghost{background:#fff;color:var(--pp-ink);border:1px solid var(--pp-line);box-shadow:var(--pp-shadow-1)}
.btn.ghost:hover{background:#fff;color:var(--pp-blue-700);border-color:var(--pp-sky)}
.btn.green{background:var(--pp-green)}
.btn.green:hover{background:var(--pp-green-700)}

/* ---------- sections ---------- */
section{padding:34px 0}
.sec-head{margin-bottom:22px}
.sec-head .kicker{font-family:var(--pp-font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-blue);font-weight:600;margin-bottom:8px}
.card{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-lg);box-shadow:var(--pp-shadow-1)}
.pad{padding:26px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}

.feature{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);padding:20px 22px;box-shadow:var(--pp-shadow-1);transition:transform .18s var(--pp-ease),box-shadow .18s var(--pp-ease)}
.feature:hover{transform:translateY(-2px);box-shadow:var(--pp-shadow-2)}
.feature h4{margin:0 0 6px}
.feature p{margin:0;font-size:.94rem;color:var(--pp-muted)}
.feature .ficon{width:34px;height:34px;border-radius:11px;background:var(--pp-tonal);display:grid;place-items:center;margin-bottom:12px;color:var(--pp-tonal-ink);font-weight:700;font-family:var(--pp-font-mono);font-size:.8rem}

/* facts table */
.facts{width:100%;border-collapse:collapse;font-size:.95rem}
.facts th,.facts td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--pp-line);vertical-align:top}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:none}
.facts th{width:38%;font-weight:600;color:var(--pp-ink-3);white-space:nowrap}
.mono{font-family:var(--pp-font-mono);font-size:.9em}

/* screens */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.shot{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);padding:16px;box-shadow:var(--pp-shadow-1)}
.shot img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--pp-line)}
.shot a{display:block}
.shot figcaption{margin-top:12px;font-size:.9rem;color:var(--pp-muted)}
.shot figcaption b{color:var(--pp-ink-3);display:block;font-family:var(--pp-font-display);font-size:.98rem;margin-bottom:2px}
.mock-note{font-size:.82rem;color:var(--pp-faint);margin-top:14px;font-style:italic}

/* steps / scenarios */
.scenario{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);box-shadow:var(--pp-shadow-1);margin-bottom:14px;overflow:hidden}
.scenario > summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;gap:14px;font-family:var(--pp-font-display);font-weight:700;color:var(--pp-ink);font-size:1.05rem}
.scenario > summary::-webkit-details-marker{display:none}
.scenario > summary::after{content:"+";margin-left:auto;font-family:var(--pp-font-mono);color:var(--pp-blue);font-size:1.3rem;line-height:1}
.scenario[open] > summary::after{content:"–"}
.scenario > summary:hover{background:#fbfdff}
.scenario .num{width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:var(--pp-tonal);color:var(--pp-tonal-ink);display:grid;place-items:center;font-size:.85rem;font-family:var(--pp-font-mono)}
.scenario .body{padding:0 22px 20px 64px}
.scenario .why{color:var(--pp-muted);font-size:.94rem;margin:0 0 14px}
ol.steps{margin:0;padding-left:20px}
ol.steps li{margin-bottom:9px}
ol.steps li::marker{color:var(--pp-blue);font-weight:700}
.kbd{font-family:var(--pp-font-mono);font-size:.86em;background:#f1f5fb;border:1px solid var(--pp-line);border-radius:6px;padding:1px 6px;color:var(--pp-ink-3);white-space:nowrap}
.note{border-left:3px solid var(--pp-sky);background:#f7faff;border-radius:0 10px 10px 0;padding:12px 16px;font-size:.92rem;color:var(--pp-ink-3);margin:14px 0}
.warn{border-left-color:#f5b942;background:#fffaf0}

/* FAQ */
.faq{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);box-shadow:var(--pp-shadow-1);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;color:var(--pp-ink);display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"›";margin-left:auto;color:var(--pp-blue);font-size:1.4rem;line-height:1;transform:rotate(90deg);transition:transform .18s var(--pp-ease)}
.faq[open] summary::after{transform:rotate(-90deg)}
.faq .a{padding:0 20px 18px;color:var(--pp-muted);font-size:.95rem}
.faq .a p:last-child{margin-bottom:0}

/* pricing */
.price-card{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.price-big{font-family:var(--pp-font-display);font-size:2.6rem;color:var(--pp-ink);line-height:1}
.price-big span{font-size:1rem;color:var(--pp-muted);font-family:var(--pp-font-body);font-weight:500}

/* contacts */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.contact{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);padding:20px;box-shadow:var(--pp-shadow-1)}
.contact .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--pp-faint);font-weight:600;margin-bottom:6px}
.contact .val{font-weight:600;color:var(--pp-ink);font-size:1.02rem;word-break:break-word}

/* index catalog */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px}
.appcard{display:flex;flex-direction:column;gap:10px;background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);padding:20px;box-shadow:var(--pp-shadow-1);transition:transform .18s var(--pp-ease),box-shadow .18s var(--pp-ease),border-color .18s var(--pp-ease);color:inherit}
.appcard:hover{transform:translateY(-3px);box-shadow:var(--pp-shadow-2);border-color:var(--pp-sky);color:inherit}
.appcard .top{display:flex;align-items:center;gap:12px}
.appcard .mini{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:linear-gradient(150deg,#fff,#eef3fb);border:1px solid var(--pp-line);display:grid;place-items:center}
.appcard .mini svg{width:24px;height:24px}
.appcard h3{margin:0;font-size:1.05rem}
.appcard p{margin:0;font-size:.9rem;color:var(--pp-muted);flex:1}
.appcard .meta{display:flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;color:var(--pp-tonal-ink)}
.appcard .meta .tag{background:var(--pp-tonal);border-radius:999px;padding:4px 10px}

.hero-index{padding:64px 0 20px;text-align:center}
.hero-index p{max-width:62ch;margin-left:auto;margin-right:auto;font-size:1.1rem}
.searchbox{max-width:520px;margin:26px auto 0;position:relative}
.searchbox input{width:100%;padding:15px 20px;border-radius:999px;border:1px solid var(--pp-line);background:#fff;font-family:var(--pp-font-body);font-size:1rem;color:var(--pp-ink);box-shadow:var(--pp-shadow-1)}
.searchbox input:focus{outline:none;border-color:var(--pp-sky);box-shadow:0 0 0 4px rgba(143,186,255,.28)}

/* toc */
.toc{position:sticky;top:80px;align-self:start;font-size:.92rem}
.toc a{display:block;padding:7px 12px;border-radius:9px;color:var(--pp-muted);font-weight:500}
.toc a:hover{background:#fff;color:var(--pp-ink)}
.layout{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:1000px){.layout{grid-template-columns:220px 1fr}}
@media(max-width:999px){.toc{display:none}}

footer.site-foot{margin-top:40px;border-top:1px solid var(--pp-line);background:#fff;padding:34px 0}
footer.site-foot .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--pp-muted)}
footer.site-foot a{font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:16px}
@media print{.site-head,.toc,.langs{display:none}.scenario .body,.faq .a{display:block!important}}

/* ---------- manual sections: how it works, quick start, reference, troubleshooting ---------- */
.appicon img,.appcard .mini img{width:100%;height:100%;object-fit:contain;border-radius:14px;display:block}
.appicon{overflow:hidden;padding:8px}
.appcard .mini{overflow:hidden;padding:4px}

.flow-list{display:grid;gap:12px}
.flow{display:flex;gap:16px;background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);
  padding:18px 22px;box-shadow:var(--pp-shadow-1)}
.flow-n{flex:0 0 34px;height:34px;border-radius:12px;background:var(--pp-ink);color:#fff;display:grid;place-items:center;
  font-family:var(--pp-font-mono);font-size:.9rem;font-weight:600}
.flow h4{margin:3px 0 5px}
.flow p{margin:0;color:var(--pp-muted);font-size:.95rem}

ol.steps.big{padding-left:22px}
ol.steps.big > li{margin-bottom:15px;padding-left:4px}
.step-shot{display:block;margin:12px 0 4px;max-width:520px}
.step-shot img{width:100%;border:1px solid var(--pp-line);border-radius:12px;box-shadow:var(--pp-shadow-1);display:block}

.ref-block{margin-bottom:28px}
.ref-block h3{margin-bottom:6px}
.ref-intro{color:var(--pp-muted);font-size:.95rem;margin:0 0 14px;max-width:70ch}
.ref-grid{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.ref-grid{grid-template-columns:minmax(280px,38%) 1fr}}
.ref-shot{display:block}
.ref-shot img{width:100%;border:1px solid var(--pp-line);border-radius:12px;box-shadow:var(--pp-shadow-1);display:block}
.ref-table{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-md);overflow:hidden}
.ref-table thead th{background:var(--pp-tonal);color:var(--pp-tonal-ink);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap}
.ref-table th{width:34%;vertical-align:top}
.ref-table td{color:var(--pp-muted)}
.ref-table code,.ref-table .kbd{white-space:normal}

table.trouble{font-size:.94rem}
table.trouble thead th{background:#fff7ed;color:var(--pp-amber);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
table.trouble th{width:40%;font-weight:600;color:var(--pp-ink-3);vertical-align:top;white-space:normal}
table.trouble td{color:var(--pp-muted)}

/* real PayPlaxe mark in the header */
img.dot{width:28px;height:28px;border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--pp-line);box-shadow:none;display:block}