/* Sandbox additions on top of the live paabox.css / pro.css. */
.pbp-head-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:22px 0 0}
.pbp-head-cta span{font-size:.92rem;color:var(--ink-soft)}
.pbp-status{margin-top:10px}

/* Pro previews (pricing) */
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:20px 0 32px}
.pv{margin:0;background-color:var(--paper-lit);padding:20px 22px}
.pv-tag{font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 14px}
.pv ul,.pv ol{list-style:none;margin:0;padding:0}
.pv ul ul,.pv ol ol{margin-left:14px;padding-left:12px;border-left:2px solid var(--rule)}
.pv li{margin:8px 0 0;font:.9rem/1.35 var(--gfont);color:var(--g-text)}
.pv-q{display:block;background:#fff;border:1px solid var(--g-line);border-radius:8px;padding:7px 10px}
.pv-q b{font:400 .62rem/1 var(--pixel);color:#fff;background:var(--amber-ink);padding:3px 5px;margin-right:8px;vertical-align:1px}
.pv-root{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:700}
.pv-kind{display:inline-block;min-width:76px;font:400 .62rem/1 var(--pixel);text-transform:uppercase;color:var(--ink);background:var(--amber-lit);border:2px solid var(--ink);padding:3px 5px;margin-right:8px;vertical-align:1px}
.pv-plan>li>ol>li .pv-kind{background:#fff}
.pv-plan>li>ol>li>ol>li .pv-kind{background:var(--paper)}
.pv figcaption{margin:16px 0 0;font-size:.88rem;color:var(--ink-soft)}

/* Home: Pro card (section 07) */
.pro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.pro-actions a{font-weight:700;color:inherit}
.status[data-err="1"]{color:#A3241C}

/* Home 07: the guides .card rule (night bg, padding, hover jump) leaks onto the Pro card; restore the light ticket */
.notify .card{display:block;padding:0;background-color:var(--paper-lit);color:var(--ink);border-color:var(--ink)!important;transition:none}
.notify .card:hover{transform:none;box-shadow:none}
.notify .cardin h2{color:var(--ink)}
.pro-actions a{color:var(--ink);text-underline-offset:3px}
.note a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.note a:hover{text-decoration-thickness:2px}

/* Product screenshots */
.shot{margin:24px 0;background-color:var(--paper-lit);padding:14px 14px 12px}
.shot img{display:block;max-width:100%;height:auto;margin:0 auto;border:2px solid var(--ink)}
.shot-tag{font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 10px}
.shot figcaption{margin:10px 0 0;font-size:.88rem;color:var(--ink-soft)}
.shot--narrow{max-width:384px}
.shot-grid{display:grid;grid-template-columns:1fr;gap:20px;justify-items:center;margin:24px 0}
.shot-grid .shot{margin:0;width:100%}
.shot-grid .shot:nth-child(2){max-width:420px}
.realshot{display:grid;grid-template-columns:auto 1fr;gap:32px 48px;align-items:center;margin-top:48px}
.realshot .shot{margin:0;max-width:288px;color:var(--ink)}
.realshot-txt{max-width:36rem}
.realshot-txt h3{margin-top:0}
.realshot-txt a{color:inherit;font-weight:700;text-underline-offset:3px}
@media (max-width:720px){.realshot{grid-template-columns:1fr}.realshot .shot{margin:0 auto}}

/* ---------- Fixes (sandbox) ---------- */
/* Guides: a wide child (short answer, tables) stretched the single mobile column past the screen. */
.pagegrid > *,.pagesolo > *{min-width:0}
@media (max-width:960px){.pagegrid{grid-template-columns:minmax(0,1fr)}}
.entry pre,.entry code{white-space:pre-wrap;word-break:break-word}
.entry img{max-width:100%;height:auto}

/* Guides: Pro card under "Where this box sits" (sticky with the sidebar). */
.bn-pro{display:block;margin-top:18px;padding:16px 16px 18px;background-color:var(--amber-lit);color:var(--ink)}
.bn-pro .bn-tag{display:block;font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}
.bn-pro .bn-pro-h{font:600 1.18rem/1.2 var(--serif);margin:0 0 6px}
.bn-pro p{font-size:.92rem;line-height:1.45;margin:0 0 12px}
.bn-pro .btn{display:inline-flex}
.bn-pro .bn-free{display:block;margin-top:10px;font-size:.85rem;color:var(--ink)}

/* How it works: header buttons. */
.hiw-head-cta{margin-top:22px}

/* Pricing: the Pro buy card, a proper price ticket. Scoped to #pbp-buy so the home Pro card is untouched. */
#pbp-buy{position:relative;max-width:620px;margin:28px 0 40px;padding:0 0 22px;background-color:#fff;box-shadow:8px 8px 0 var(--amber)}
#pbp-buy::before{content:"";display:block;height:14px;margin:0 0 22px;background:var(--amber-lit);border-bottom:3px dashed var(--ink)}
#pbp-buy>*{margin-left:28px;margin-right:28px}
#pbp-buy .pbp-tag{margin-bottom:10px}
#pbp-buy .pbp-price{font:700 clamp(1.9rem,3.6vw,2.5rem)/1.08 var(--serif);letter-spacing:-.01em;color:var(--ink);margin-top:0;margin-bottom:14px;padding-bottom:16px;border-bottom:3px solid var(--ink)}
#pbp-buy>p:not([class]){margin-top:0;margin-bottom:20px;font-size:1.02rem}
#pbp-buy .pbp-actions .btn{font-size:1.06rem;padding:16px 26px}
#pbp-buy .pbp-status:empty{min-height:0;margin-top:6px}
#pbp-buy .pbp-note{margin-top:10px;margin-bottom:0}
@media (max-width:600px){
  #pbp-buy{box-shadow:6px 6px 0 var(--amber);margin-right:6px}
  #pbp-buy>*{margin-left:18px;margin-right:18px}
  #pbp-buy .pbp-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
}
/* Home 07: pro.css .pbp-box (white, max-width 560) leaks into the ticket */
.notify .cardin.pbp-box{max-width:none;margin:0;background-color:transparent}

/* Header CTA rows (pricing + how it works): tidy, equal buttons; full-width stack on phones */
.pbp-head-cta{gap:12px 16px}
.pbp-head-cta .btn{white-space:nowrap}
.pbp-head-cta span{flex-basis:auto}
@media (max-width:600px){
  .pbp-head-cta{flex-direction:column;align-items:stretch;gap:14px;padding-right:4px}
  .pbp-head-cta .btn{justify-content:center;text-align:center;white-space:normal}
  .pbp-head-cta span{text-align:center;margin-top:-2px}
}

/* Home hero: highlight sits on its own line box, so it no longer climbs into "What's in" */
.hero h1{line-height:1}
.hero h1 em{display:inline-block;line-height:.9;padding:.02em .12em .06em .06em}
/* Drifting canvas boxes stay out of the text column (desktop) and above-the-fold copy (mobile) */
@media (min-width:961px){
  .hero canvas{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 610px),transparent calc(50% - 580px),transparent calc(50% - 10px),#000 calc(50% + 40px));mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 610px),transparent calc(50% - 580px),transparent calc(50% - 10px),#000 calc(50% + 40px))}
}
@media (max-width:960px){
  .hero canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 62%,#000 72%);mask-image:linear-gradient(180deg,transparent 0,transparent 62%,#000 72%)}
}
/* Home 07 band: boxes only in the side gutters, never behind the card or the "Just want the questions?" copy */
.sec--amber canvas{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 610px),transparent calc(50% - 580px),transparent calc(50% + 580px),#000 calc(50% + 610px));mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - 610px),transparent calc(50% - 580px),transparent calc(50% + 580px),#000 calc(50% + 610px))}

/* Home guides: lead card spans the wrap, topic cards 3 + 3 */
#guides .guide-lead{max-width:none}
#guides .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){#guides .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#guides .cards{grid-template-columns:minmax(0,1fr)}}

/* Guides: Pro card restyled as a pixel box matching .bn-parent/.bn-here */
.bn-pro{padding:12px 14px 14px;margin-top:16px;box-shadow:5px 5px 0 var(--ink)}
.bn-pro .bn-tag{font:400 .64rem/1.5 var(--pixel);letter-spacing:.08em;opacity:.8;margin:0 0 3px}
.bn-pro .bn-pro-h{font:600 1.22rem/1.15 var(--serif);margin:0 0 6px}
.bn-pro p{font-size:.9rem;line-height:1.45;margin:0 0 12px}
.bn-pro .btn{display:flex;justify-content:center;width:100%;background-color:#fff}
.bn-pro .btn:hover{background-color:var(--paper-lit)}
.bn-pro .bn-free{text-align:center;margin-top:12px;font-weight:700;font-size:.84rem;text-underline-offset:3px}
@media (max-width:980px){
  .boxnav{max-width:560px}
  .bn-pro{margin-right:5px}
}

/* How it works header buttons */
.hiw-head-cta{margin-top:24px}