/* Payment Radar article layout v2 -- 2026-09-23.
   Side panel beside a text-width hero. .pra2-right (default) / .pra2-left is set
   from Radar Studio -> Kobra Steward -> Article layout. Uses the page's existing
   --pra-* variables, so light and dark themes both work unchanged.
   Docs: kobra-docs/16-node-ai/radar-article-layout-v2/README.md */

/* ---- top navigation, inside the frame ---- */
.pra2 .pra2-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:-4px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--pra-line)}
.pra2 .pra2-home,.pra2 .pra2-home:visited{color:#079bd7;font-weight:800;font-size:14px;text-decoration:none}
.pra2 .pra2-home:hover{text-decoration:underline}
.pra2 .pra2-pager{display:flex;align-items:center;gap:10px}
.pra2 .pra2-pager a,.pra2 .pra2-pager a:visited{display:inline-flex;align-items:center;padding:7px 13px;border:1px solid var(--pra-line);border-radius:999px;color:var(--pra-ink);font-size:12px;font-weight:750;text-decoration:none;transition:border-color .16s,background .16s}
.pra2 .pra2-pager a:hover{border-color:#079bd7;background:rgba(7,155,215,.08)}
.pra2 .pra2-count{color:var(--pra-muted);font-size:12px;font-weight:650}

/* ---- two columns ---- */
.pra2 .pra2-layout{display:grid;gap:40px;align-items:start;margin-top:28px}
.pra2-right .pra2-layout{grid-template-columns:minmax(0,1fr) 300px}
.pra2-left .pra2-layout{grid-template-columns:300px minmax(0,1fr)}
.pra2-left .pra2-rail{order:-1}
.pra2 .pra2-main{min-width:0}
.pra2 .pra2-main .pra-media{margin-top:0}
.pra2 .pra2-main .pra-media img{max-height:none}

/* ---- body sections ---- */
.pra2 .pra2-sec{margin:0 0 22px}
.pra2 .pra2-sec h2{margin:0 0 6px;font-size:13px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#079bd7}
.pra2 .pra2-sec p,.pra2 .pra2-plain p{margin:0 0 12px;color:var(--pra-ink);font-size:17px;line-height:1.75}
.pra2 .pra2-sec p:last-child{margin-bottom:0}
.pra2 .pra2-sec a,.pra2 .pra2-plain a{color:#079bd7}
.pra2 .pra2-plain h1,.pra2 .pra2-plain h2,.pra2 .pra2-plain h3{margin:22px 0 8px;font-size:20px;line-height:1.3}
.pra2 .pra2-plain ul,.pra2 .pra2-plain ol{padding-left:22px;color:var(--pra-ink);font-size:16px;line-height:1.7}

/* ---- side panel ---- */
.pra2 .pra2-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pra2 .pra2-box{padding:18px;border:1px solid var(--pra-line);border-radius:16px;background:var(--pra-card2)}
.pra2 .pra2-box h2{margin:0 0 10px;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:var(--pra-muted)}
.pra2 .pra2-why{border-left:3px solid #14d4c7}
.pra2 .pra2-why h2{color:#0fb8ad}
.pra2 .pra2-why p{margin:0;color:var(--pra-ink);font-size:15px;line-height:1.6}
.pra2 .pra2-review ul{margin:0;padding:0;list-style:none}
.pra2 .pra2-review li{position:relative;margin:0 0 10px;padding-left:25px;color:var(--pra-ink);font-size:14px;line-height:1.55}
.pra2 .pra2-review li:last-child{margin-bottom:0}
.pra2 .pra2-review li:before{content:"\2713";position:absolute;left:0;top:1px;width:16px;height:16px;border:1.5px solid #079bd7;border-radius:50%;color:#079bd7;font-size:10px;line-height:14px;text-align:center}
.pra2 .pra2-follow-title{margin:0 0 2px;color:var(--pra-ink);font-size:14px;font-weight:750}
.pra2 .pra2-follow-meta{margin:0 0 10px;color:var(--pra-muted);font-size:11.5px}
.pra2 .pra2-follow ol{list-style:none;margin:0;padding:0 0 0 13px;border-left:2px solid rgba(7,155,215,.35)}
.pra2 .pra2-follow li{position:relative;margin:0 0 10px;font-size:13px;line-height:1.4}
.pra2 .pra2-follow li:before{content:"";position:absolute;left:-18px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--pra-card2);border:2px solid #079bd7}
.pra2 .pra2-follow li.pra2-current:before{background:#079bd7}
.pra2 .pra2-follow time{display:block;color:var(--pra-muted);font-size:10.5px;font-weight:750;letter-spacing:.02em}
.pra2 .pra2-follow a,.pra2 .pra2-related a{color:var(--pra-ink)!important;text-decoration:none}
.pra2 .pra2-follow a:hover,.pra2 .pra2-related a:hover{color:#079bd7!important;text-decoration:underline}
.pra2 .pra2-follow li.pra2-current span{font-weight:750;color:var(--pra-ink)}
.pra2 .pra2-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pra2 .pra2-related li{font-size:13.5px;line-height:1.4;font-weight:600}

/* ---- previous / next cards ---- */
.pra2 .pra2-navcard,.pra2 .pra2-navcard:visited{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--pra-line);border-radius:12px;background:var(--pra-card);color:var(--pra-ink);text-decoration:none;transition:border-color .16s,transform .16s}
.pra2 .pra2-navcard+.pra2-navcard{margin-top:8px}
.pra2 .pra2-navcard:hover{border-color:#079bd7;transform:translateY(-2px)}
.pra2 .pra2-navcard img{width:64px;height:48px;object-fit:cover;border-radius:8px;background:var(--pra-card2)}
.pra2 .pra2-navcard small{display:block;margin-bottom:2px;color:#079bd7;font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.pra2 .pra2-navcard strong{color:var(--pra-ink)!important;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.35;font-weight:650}
.pra2 .pra2-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.pra2 .pra2-bottom .pra2-navcard{grid-template-columns:120px minmax(0,1fr);padding:14px}
.pra2 .pra2-bottom .pra2-navcard+.pra2-navcard{margin-top:0}
.pra2 .pra2-bottom .pra2-navcard img{width:120px;height:72px}
.pra2 .pra2-bottom .pra2-navcard strong{font-size:15px}
.pra2 .pra2-bottom .pra2-navcard-next{grid-column:2;grid-template-columns:minmax(0,1fr) 120px;text-align:right}
.pra2 .pra2-bottom .pra2-navcard-next img{order:2}
.pra2 .pra-back{display:inline-block;margin-top:20px}

/* ---- phones and narrow tablets: one column ---- */
@media (max-width:900px){
  .pra2 .pra2-layout{grid-template-columns:1fr;gap:0}
  .pra2 .pra2-main,.pra2 .pra2-rail{display:contents}
  .pra2 .pra2-main>*{order:2}
  .pra2 .pra2-main>.pra-media,.pra2 .pra2-main>.pra-video-embed{order:0}
  .pra2 .pra2-why{order:1;margin:0 0 22px}
  .pra2 .pra2-main>.pra-source{order:5;margin-top:16px}
  .pra2 .pra2-main>.pra-updates{order:6}
  .pra2 .pra2-review{order:3;margin-top:6px}
  .pra2 .pra2-follow,.pra2 .pra2-related{order:4;margin-top:14px}
  .pra2 .pra2-keep{display:none}
  .pra2 .pra2-count{display:none}
  .pra2 .pra2-bottom{grid-template-columns:1fr;gap:10px}
  .pra2 .pra2-bottom .pra2-navcard,.pra2 .pra2-bottom .pra2-navcard-next{grid-column:auto;grid-template-columns:84px minmax(0,1fr);text-align:left}
  .pra2 .pra2-bottom .pra2-navcard img{width:84px;height:56px}
  .pra2 .pra2-bottom .pra2-navcard-next img{order:0}
  .pra2 .pra2-sec p,.pra2 .pra2-plain p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.pra2 .pra2-navcard{transition:none}.pra2 .pra2-navcard:hover{transform:none}}

/* Headline size (2026-09-23, Pavel: "ginormous"). The old 38-64px clamp in
   live.css was sized for the full-width hero; v2 keeps the hero at text width. */
.pra2 .pra-card>header>h1{font-size:clamp(28px,2.6vw,38px);line-height:1.15;letter-spacing:-.02em;max-width:760px}
.pra2 .pra-card>header>.pra-dek{font-size:17px;line-height:1.55}
@media(max-width:800px){.pra2 .pra-card>header>h1{font-size:26px;line-height:1.18}.pra2 .pra-card>header>.pra-dek{font-size:16px}}

/* Hero tile in dark mode (2026-09-24, Pavel). The site-wide dark-mode.css
   paints every <header> with the page colour, which drew a square, unpadded
   box behind the headline. Make it a proper tile that matches the side boxes
   (16px radius, same border) and keep the text inside it. Light mode has no
   box, so it is left alone. */
html[data-theme="dark"] .pra2 .pra-card>header{border:1px solid var(--pra-line)!important;border-radius:16px;padding:22px 26px 24px;overflow:hidden}
@media(max-width:800px){html[data-theme="dark"] .pra2 .pra-card>header{padding:16px 16px 18px}}