/* ───────────────────────────────────────────────────────────────────────────
   Sub pages (use cases, Solutions sub-pages, partners, API, status, tools, press).
   Built on solutions.css: same hero / cards / steps / FAQ / CTA, plus the few blocks below.
   ─────────────────────────────────────────────────────────────────────────── */
body.page-sub .hero{padding-top:104px}
body.page-sub .hero-visual{min-height:340px}
body.page-sub .sec-title{margin-bottom:22px}
.sec-sub{max-width:680px;margin:-10px auto 26px;text-align:center;font-size:14px;line-height:1.7;color:var(--t2)}

/* "At a glance" card in the hero */
.glance{width:100%;max-width:440px;padding:22px 26px}
.glance-h{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.glance-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-top:1px solid var(--br)}
.glance-h + .glance-row{border-top:0}
.glance-k{font-size:12px;color:var(--t2)}
.glance-v{font-size:13.5px;font-weight:700;text-align:right}

/* 3/4-column card grids (the base .why-grid has 6 narrow columns) */
.why-grid.w3{grid-template-columns:repeat(3,1fr)}
.why-grid.w4{grid-template-columns:repeat(4,1fr)}
.why-grid.w3 .why,.why-grid.w4 .why{padding:22px 20px;text-align:left}
.why-grid.w3 .ico,.why-grid.w4 .ico{margin:0 0 14px}
.why-grid.w3 .why-t,.why-grid.w4 .why-t{font-size:15px}
.why-grid.w3 .why-d,.why-grid.w4 .why-d{font-size:12.5px;line-height:1.65}
@media(max-width:1120px){.why-grid.w3,.why-grid.w4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.why-grid.w3,.why-grid.w4{grid-template-columns:1fr}}

/* two cards side by side (ISP page: ISP proxies vs mobile proxies), and the line under them */
.why-grid.w2{grid-template-columns:repeat(2,1fr);align-items:stretch}
.why-grid.w2 .glance{max-width:none}
@media(max-width:860px){.why-grid.w2{grid-template-columns:1fr}}
.sec-sub.sec-after{margin:24px auto 0}

/* country cards (flag, name, one line) */
.geo-card .geo-flag{display:block;width:34px;height:24px;margin:0 0 14px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* cards that link to another page */
a.why-link{display:block;color:inherit}
.why-link .why-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--c)}
.why-link:hover .why-more{text-decoration:underline}

/* responsible-use / information card */
.note-card{display:flex;gap:18px;align-items:flex-start;padding:22px 26px;border-left:3px solid var(--c)}
.note-card .ico{margin:0}
.note-t{font-size:15px;font-weight:800;margin-bottom:6px}
.note-d{font-size:13px;color:var(--t2);line-height:1.7;max-width:760px}
.note-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--c)}
.note-link:hover{text-decoration:underline}

/* code */
.code{display:block;margin:14px 0;padding:16px 18px;overflow:auto;background:#0a1120;border:1px solid var(--br);border-radius:12px;color:#d6e4ff;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.code-wrap{position:relative}
.copy-btn{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font:600 11px var(--f);color:var(--t2);background:rgba(255,255,255,.06);border:1px solid var(--br2);border-radius:8px;cursor:pointer;transition:all .15s}
.copy-btn:hover{color:#fff;border-color:rgba(0,217,180,.4)}
.copy-btn svg{width:12px;height:12px}

/* e-mail capture (waitlist / updates) */
.notify{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;max-width:520px}
.notify input{flex:1;min-width:220px;padding:12px 14px;color:#fff;font:500 13.5px var(--f);background:#08101d;border:1px solid var(--br2);border-radius:10px}
.notify input:focus{outline:none;border-color:rgba(0,217,180,.5)}
.notify .btn-grad{padding:12px 22px}
.notify-msg{width:100%;min-height:18px;font-size:12.5px;color:var(--t2)}
.notify-msg.ok{color:var(--c)}
.notify-msg.err{color:#ff7b7b}

/* panels used by tools / status / press */
.panel-c{padding:26px 28px}
.panel-h{font-size:16px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.panel-d{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13px;margin:0}
.kv dt{color:var(--t2)}
.kv dd{margin:0;font-weight:700;word-break:break-word}
.out{margin-top:14px;padding:12px 14px;min-height:46px;background:#08101d;border:1px solid var(--br2);border-radius:10px;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d6e4ff;white-space:pre-wrap;word-break:break-all}
.out.ph{color:var(--t3)}
.field{display:block;margin:0 0 12px}
.field>span{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--t2)}
.field textarea,.field select,.field input{width:100%;padding:11px 13px;color:#fff;font:500 13px var(--f);background:#08101d;border:1px solid var(--br2);border-radius:10px}
.field textarea{min-height:96px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.field textarea:focus,.field select:focus,.field input:focus{outline:none;border-color:rgba(0,217,180,.5)}
.row-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* status page */
.status-banner{display:flex;align-items:center;gap:16px;padding:22px 26px}
.status-banner .dot{width:14px;height:14px;border-radius:50%;background:#586477;box-shadow:0 0 0 6px rgba(88,100,119,.18);flex-shrink:0}
.status-banner.ok .dot{background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.16)}
.status-banner.warn .dot{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.16)}
.status-banner.bad .dot{background:#ef4444;box-shadow:0 0 0 6px rgba(239,68,68,.16)}
.status-t{font-size:18px;font-weight:800}
.status-s{font-size:12.5px;color:var(--t2);margin-top:3px}
.status-list{margin-top:14px;padding:6px 26px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--br)}
.srow:first-child{border-top:0}
.srow-n{font-size:14px;font-weight:700}
.srow-d{font-size:12px;color:var(--t2);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;font-size:12px;font-weight:700;border-radius:999px;background:rgba(88,100,119,.18);color:#98a6bb;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:rgba(34,197,94,.13);color:#4ade80}
.pill.warn{background:rgba(245,158,11,.13);color:#fbbf24}
.pill.bad{background:rgba(239,68,68,.13);color:#f87171}

/* press kit */
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.swatch{width:150px;overflow:hidden;border:1px solid var(--br);border-radius:12px;background:var(--s1)}
.swatch i{display:block;height:64px}
.swatch b{display:block;padding:10px 12px 0;font-size:12.5px}
.swatch span{display:block;padding:2px 12px 12px;font-size:11.5px;color:var(--t2);font-family:ui-monospace,Consolas,monospace}
.logo-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.logo-tile{padding:18px;display:flex;flex-direction:column;gap:14px}
.logo-tile .view{display:flex;align-items:center;justify-content:center;min-height:120px;border-radius:12px;background:#070912;border:1px solid var(--br)}
.logo-tile .view.light{background:#fff}
.logo-tile img{max-width:80%;max-height:70px;width:auto;height:auto}
.logo-tile-n{font-size:13px;font-weight:700}
.dl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--c)}
.dl svg{width:14px;height:14px}
@media(max-width:700px){.logo-tiles{grid-template-columns:1fr}}

/* article pages (guides and blog posts) */
.art-body pre.code{margin:16px 0}
.art-body h2 .num{color:var(--c);margin-right:6px}
.art-body ul.art-list{margin:12px 0 18px 20px;color:var(--t2);font-size:14.5px;line-height:1.8}
.art-body ul.art-list li{margin:4px 0}
/* grid items may shrink below their content, so a long code line scrolls inside its box instead of widening the page */
.two>*{min-width:0}
.code-wrap{min-width:0;max-width:100%}
/* on phones the headline comes first and the "at a glance" card follows (solutions.css puts the hero visual first) */
@media(max-width:980px){.hero-visual{order:0!important;min-height:0!important}}
/* ═══ HTML sitemap (sitemap.html) ═══ */
.hero-single{grid-template-columns:1fr!important;min-height:0}
.hero-single .hero-p{max-width:820px}
.sm-root{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;color:var(--t3)}
.sm-root a{color:var(--t2)}.sm-root a:hover{color:var(--c)}.sm-root .cur{color:var(--t1)}
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.sm-card{background:linear-gradient(180deg,rgba(17,26,45,.72),rgba(10,16,28,.78));border:1px solid var(--br);border-radius:var(--r2,20px);padding:24px 24px 18px}
.sm-wide{grid-column:span 2}
.sm-stack{display:grid;gap:18px}
.sm-h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0 0 12px}
.sm-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(0,217,180,.14);flex:none}
.sm-tree,.sm-tree ul{list-style:none;margin:0;padding:0}
.sm-tree li{position:relative;padding:7px 0}
.sm-tree li>a{font-size:14px;font-weight:700;color:#fff;transition:color .15s}
.sm-tree li>a:hover{color:var(--c)}
.sm-tree li>span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--t2)}
.sm-tree ul{margin:6px 0 4px 6px;padding-left:18px;border-left:1px solid rgba(255,255,255,.1)}
.sm-tree ul li{padding:5px 0}
.sm-tree ul li::before{content:"";position:absolute;left:-18px;top:17px;width:11px;height:1px;background:rgba(255,255,255,.1)}
.sm-tree ul ul{margin-left:4px}
.sm-wide>.sm-tree>li>ul>li>ul{columns:2;column-gap:28px}
.sm-wide>.sm-tree>li>ul>li>ul>li{break-inside:avoid}
@media(max-width:1020px){.sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sm-wide{grid-column:1/-1}}
@media(max-width:640px){.sm-grid{grid-template-columns:1fr}.sm-card{padding:20px 18px 14px}.sm-wide>.sm-tree>li>ul>li>ul{columns:1}}
/* hryvnia (fx.js, Ukrainian pages): the currency note under the Price row of the hero card (added by build-ua.js, FX_NOTES) */
.glance .fx-note{margin:6px 0 0;padding-top:12px;border-top:1px solid var(--br);font-size:11.5px;line-height:1.5;color:var(--t3)}