/* Proof wall: real KDP and Amazon Ads dashboard screenshots in browser-style frames,
   masonry layout, filter chips, "show all" and a native <dialog> viewer.
   Shared by the homepage and the KDP / Advertising service pages. Classes are prefixed pw-. */

.pw{position:relative;padding:clamp(64px,8vw,112px) 24px;background:linear-gradient(#F5F7F9,#FFFFFF 70%);border-top:1px solid #EDF0F3}
.pw-in{max-width:1200px;margin:0 auto}
.pw-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;margin-bottom:28px}
.pw-kicker{display:inline-flex;align-items:center;gap:8px;font:600 .8125rem/1 var(--body);color:#357318}
.pw-kicker i{width:8px;height:8px;border-radius:50%;background:#74D142;box-shadow:0 0 0 4px rgba(116,209,66,.22)}
.pw-head h2{margin:14px 0 0;font:700 clamp(2rem,1.4rem + 2vw,3rem)/1.05 var(--display);letter-spacing:-.03em;color:#212A33;text-wrap:balance}
.pw-head p{margin:12px 0 0;max-width:52ch;font-size:1rem;line-height:1.6;color:#3A4552}
.pw-head .confirm{justify-self:end}

.pw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.pw-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #C7CFD7;background:#fff;
  font:600 .875rem/1 var(--body);color:#212A33;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pw-chip:hover{border-color:#212A33}
.pw-chip b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#EDF0F3;font:600 12px/1 var(--body)}
.pw-chip[aria-pressed="true"]{background:#212A33;border-color:#212A33;color:#fff}
.pw-chip[aria-pressed="true"] b{background:#74D142;color:#212A33}
.pw-chip:focus-visible,.pw-card:focus-visible,.pw-more:focus-visible{outline:2px solid #357318;outline-offset:3px}

/* masonry: CSS columns keep each screenshot at its natural height */
.pw-grid{columns:3 320px;column-gap:20px}
.pw-card{display:block;width:100%;break-inside:avoid;margin:0 0 20px;padding:0;border:1px solid #DDE3E8;border-radius:16px;background:#fff;text-align:left;cursor:zoom-in;
  overflow:hidden;box-shadow:0 1px 2px rgba(15,20,25,.05),0 12px 28px -18px rgba(15,20,25,.25);font:inherit;color:inherit;
  transition:transform .3s cubic-bezier(.2,0,0,1),box-shadow .3s cubic-bezier(.2,0,0,1),border-color .3s}
.pw-card:hover{transform:translateY(-4px);border-color:#C7CFD7;box-shadow:0 2px 4px rgba(15,20,25,.05),0 24px 44px -20px rgba(15,20,25,.32)}
.pw-card[hidden]{display:none}
.pw-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F5F7F9;border-bottom:1px solid #EDF0F3;font:600 .6875rem/1 var(--body);color:#5B6775;letter-spacing:.01em}
.pw-chrome i{width:8px;height:8px;border-radius:50%;background:#DDE3E8}
.pw-chrome i:first-child{background:#F2B8B5}.pw-chrome i:nth-child(2){background:#F4D9A7}.pw-chrome i:nth-child(3){background:#BFE3A9}
.pw-chrome span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-shot{position:relative;display:block;background:#fff}
.pw-shot img{display:block;width:100%;height:auto}
.pw-shot::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(33,42,51,.82)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
.pw-card:hover .pw-shot::after,.pw-card:focus-visible .pw-shot::after{opacity:1;transform:none}
.pw-cap{display:block;padding:14px 16px 16px;border-top:1px solid #EDF0F3}
.pw-fig{display:block;font:700 1.5rem/1.1 var(--display);letter-spacing:-.025em;color:#212A33;font-variant-numeric:tabular-nums}
.pw-what{display:block;margin-top:4px;font:600 .875rem/1.35 var(--body);color:#212A33}
.pw-meta{display:block;margin-top:2px;font-size:.8125rem;line-height:1.45;color:#5B6775}
.pw-tag{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:6px;background:#EEF8E8;color:#28580F;font:600 .6875rem/1.4 var(--body);vertical-align:1px}
.pw-tag.ads{background:#FFF1E0;color:#8A4B00}

.pw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:8px}
.pw-note{margin:0;font-size:.8125rem;color:#5B6775;max-width:62ch}
.pw-more{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid #212A33;background:#212A33;color:#fff;
  font:600 .9375rem/1 var(--body);cursor:pointer;transition:background .2s}
.pw-more:hover{background:#2B3540}
.pw-more[hidden]{display:none}

/* reveal (JS adds .pw-js; cards fade up as they enter) */
.pw-js .pw-card{opacity:0;transform:translateY(22px)}
.pw-js .pw-card.is-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,0,0,1),transform .6s cubic-bezier(.2,0,0,1),box-shadow .3s,border-color .3s}
.pw-js .pw-card.is-in:hover{transform:translateY(-4px)}

/* viewer */
.pw-dlg{margin:auto;width:min(1240px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:18px;background:#fff;color:#212A33;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);overflow:hidden}
.pw-dlg::backdrop{background:rgba(15,20,25,.78);backdrop-filter:blur(4px)}
.pw-dlg[open]{display:flex;flex-direction:column;animation:pw-in .28s cubic-bezier(.2,0,0,1)}
@keyframes pw-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.pw-dlg-bar{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid #EDF0F3}
.pw-dlg-title{flex:1;min-width:0}
.pw-dlg-title b{display:block;font:700 1.25rem/1.15 var(--display);letter-spacing:-.02em}
.pw-dlg-title span{font-size:.8125rem;color:#5B6775}
.pw-dlg-btn{width:44px;height:44px;border-radius:12px;border:1px solid #DDE3E8;background:#fff;color:#212A33;display:grid;place-items:center;cursor:pointer;flex:none}
.pw-dlg-btn:hover{background:#F5F7F9}
.pw-dlg-btn:focus-visible{outline:2px solid #357318;outline-offset:2px}
.pw-dlg-btn svg{width:18px;height:18px}
.pw-dlg-img{flex:1;min-height:0;overflow:auto;background:#F5F7F9;padding:16px;display:flex;justify-content:center;align-items:flex-start}
.pw-dlg-img img{display:block;max-width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px -12px rgba(15,20,25,.3);background:#fff}
.pw-dlg-count{font:600 .8125rem/1 var(--body);color:#5B6775;font-variant-numeric:tabular-nums;padding:0 4px}

@media (max-width:760px){
  .pw-head{grid-template-columns:1fr}
  .pw-head .confirm{justify-self:start}
  .pw-grid{columns:1}
}
@media (max-width:520px){
  .pw{padding:56px 16px}
  .pw-dlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .pw-dlg-img{padding:8px}
  .pw-dlg-bar{flex-wrap:wrap;padding:12px 12px 12px 16px}
  .pw-dlg-title{flex:1 0 100%;order:-1}
  .pw-dlg-count{margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .pw-js .pw-card{opacity:1;transform:none}
  .pw-card,.pw-card:hover{transition:none;transform:none}
  .pw-dlg[open]{animation:none}
}