/* Paidrelay — core pages (catalog, how-it-works, faq, how-to-pay, contact,
   legal, 404, blog index). Adds classes only; site.css is not restyled. */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Page header */
.page-head{padding-block:8px clamp(1.75rem,1.2rem + 2vw,2.75rem);background:var(--ink);color:var(--navy-text)}
.page-head h1{color:#fff}
.page-head .eyebrow{color:var(--go)}
.page-head .crumbs,.page-head .crumbs a{color:#8291ab}
.page-head a{color:#fff}
.page-head .crumbs{padding-block:20px 18px}
.page-head-copy{display:grid;gap:14px;max-width:72ch}
.sec-tight{padding-block:clamp(2rem,1.5rem + 2vw,3rem) var(--sec)}

/* Price table */
.price-table{min-width:860px}
.price-table thead th{white-space:nowrap}
.price-table tbody th[scope="row"]{font:inherit;text-transform:none;letter-spacing:0;color:var(--ink);background:none;min-width:190px}
.price-table .pn{display:block;font-weight:600}
.price-table .pnote{display:block;font-size:var(--t-xs);color:var(--muted);font-weight:400;margin-top:2px}
.price-table tr.group th{background:var(--paper);color:var(--ink);font:600 var(--t-xs)/1.3 var(--f);letter-spacing:0;text-transform:none;padding-block:9px}
.price-table td{vertical-align:middle}
.pc-in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc b{font:600 1rem/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc .btn{padding:.38rem .7rem;font-size:var(--t-xs)}
.pc-na{color:var(--muted);font-size:var(--t-xs);vertical-align:middle}
.pc-other .pc-in span{font-size:var(--t-sm)}
.pc-other .btn{white-space:nowrap}
.table-foot{margin-top:12px;max-width:80ch}
.mcard h3 .method{vertical-align:middle;margin-inline-end:6px}
.mcard>p{font-size:var(--t-sm)}

/* Plain lists with weight */
.checklist{display:grid;gap:10px;max-width:820px;margin:0;padding-inline-start:20px}
.checklist b{color:var(--ink)}

/* How it works: heading column + prose */
.two-col{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:minmax(0,1fr)}}
.col-head{display:grid;gap:10px;justify-items:start}
.two-col .prose{max-width:68ch}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px;counter-reset:t}
.timeline li{position:relative;padding-inline-start:44px;padding-block-end:22px;counter-increment:t;display:grid;gap:4px}
.timeline li::before{content:counter(t);position:absolute;inset-inline-start:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 .8rem/1 var(--f-mono);color:var(--signal);border:1.5px solid var(--signal);background:var(--paper)}
.timeline li::after{content:"";position:absolute;inset-inline-start:13.5px;top:30px;bottom:2px;border-inline-start:1.5px dashed var(--line-2)}
.timeline li:last-child::after{display:none}
.timeline .tl-alt::before{content:"!";color:var(--amber);border-color:var(--amber)}
.timeline h3{font-size:1.05rem}

/* How to pay */
.quick{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);align-items:center}
.quick>div{display:grid;gap:10px;justify-items:start}
@media (max-width:820px){.quick{grid-template-columns:minmax(0,1fr)}}
.mini-steps{margin:0;padding-inline-start:22px;display:grid;gap:8px;font-size:var(--t-sm)}
.coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.coin{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:grid;gap:10px;align-content:start;background:var(--white)}
.coin-top{display:flex;align-items:center;gap:10px}
.coin-top img{width:28px;height:28px}
.coin-name{font-weight:600;color:var(--ink)}
.coin-tk{font:500 var(--t-xs)/1 var(--f-mono);color:var(--muted);margin-inline-start:auto}
.nets{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--t-sm)}
.nets li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nets img{width:18px;height:18px}
.nets em{font:500 var(--t-xs)/1 var(--f-mono);color:var(--muted);font-style:normal;margin-inline-start:auto}
.nets em::after{content:" conf."}
.nets b{flex-basis:100%;font:600 .7rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--approved);padding-inline-start:26px}
.nets li.is-pick span{font-weight:600;color:var(--ink)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-mail{font-size:1.2rem;color:var(--ink);word-break:break-all;user-select:all}
.kv{margin:0;display:grid;gap:4px 0;font-size:var(--t-sm)}
.kv dt{color:var(--muted);margin-top:8px}
.kv dd{margin:0;color:var(--ink)}

/* Legal */
.legal-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.legal-toc{position:sticky;top:88px}
@media (max-width:860px){.legal-layout{grid-template-columns:minmax(0,1fr)}.legal-toc{position:static}}
.legal-layout .prose h2{padding-top:8px;border-top:1px solid var(--line)}
.legal-layout .prose h2:first-of-type{border-top:0}

/* 404 */
.nf-box{display:grid;gap:18px;max-width:640px;padding-block:clamp(1rem,4vw,3rem)}
.nf .errline{text-decoration:none}

/* Blog index: a searched question rather than an on-screen error */
.post p{font-size:var(--t-sm)}
.post .q-query{color:var(--muted)}
.methods-dl .mcard dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.nets li{flex-wrap:nowrap}
.nets li span{flex:1;min-width:0}
.nets em{white-space:nowrap}
.nets li.is-pick{flex-wrap:wrap}

/* Catalog plan picker: three dropdowns (service with logo, plan, term),
   then one total and one Order button. Light: 1px lines, no heavy outlines. */
.picker{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);display:grid;gap:22px;max-width:880px;margin-inline:auto}
.pk-row{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:12px}
@media (max-width:720px){.pk-row{grid-template-columns:minmax(0,1fr)}}
.dd{position:relative;display:grid;gap:6px;min-width:0}
.dd-label{font-size:var(--t-xs);color:var(--muted)}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;text-align:start}
.dd-btn:hover{border-color:var(--muted)}
.dd-btn[aria-expanded="true"]{border-color:var(--ink)}
.dd-btn:disabled{cursor:default;background:var(--paper);border-color:var(--line)}
.dd.is-single .dd-caret{display:none}
.dd-val{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.dd-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-ic{width:20px;height:20px;flex:none}
.dd-side{color:var(--muted);font-size:var(--t-sm);white-space:nowrap}
.dd-caret{width:8px;height:8px;flex:none;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.dd-btn[aria-expanded="true"] .dd-caret{transform:translateY(2px) rotate(-135deg)}
.dd-list{position:absolute;z-index:10;top:calc(100% + 6px);inset-inline:0;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 40px -16px rgba(15,27,45,.28);display:grid;gap:2px;max-height:320px;overflow:auto}
.dd-list [role=option]{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.dd-list [role=option]:hover,.dd-list [role=option]:focus{background:var(--paper);outline:none}
.dd-list [aria-selected="true"]{background:var(--signal-wash)}
.dd-o{display:grid;flex:1;min-width:0}
.dd-o small{font-size:var(--t-xs);color:var(--muted)}
.pk-sum{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px}
.pk-sum-m{font-size:var(--t-sm);color:var(--muted);max-width:46ch;margin:0}
.pk-sum-r{display:flex;align-items:center;gap:16px}
.pk-sum .price{font-size:1.6rem}