.sample-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.sample-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.sample-card:has(.sample-card-link:hover){border-color:var(--primary);box-shadow:0 10px 24px #302d290d}
.sample-card-link{display:flex;flex-direction:column;flex:1;min-width:0;color:var(--text);text-decoration:none}
.sample-card-link:focus-visible{outline-offset:-4px}
.sample-card-image{position:relative;display:block}.sample-card-image img{display:block;width:100%;height:220px;object-fit:cover}
.sample-card-image>span{position:absolute;bottom:.75rem;left:.8rem;right:.8rem;width:fit-content;max-width:calc(100% - 1.6rem);background:#fffef6ed;padding:.4rem .6rem;border-radius:6px;font-size:.65rem;font-weight:650;color:var(--primary)}
.sample-card-copy{padding:1.5rem 1.5rem .75rem;display:flex;flex-direction:column;flex:1}
.sample-card-copy .eyebrow{font-size:.57rem}.sample-card-copy h3{font-size:1.85rem;line-height:1.2;margin:.4rem 0 .9rem}
.sample-card-copy>p:not(.eyebrow){font-size:.85rem;color:var(--muted)}.sample-card-copy>.text-link{font-size:.8rem;margin-top:auto;padding-top:.6rem;color:var(--primary)}
.sample-image-credit{padding:0 1.5rem 1.5rem;font-size:.58rem;color:var(--muted);margin:0}.sample-image-credit a{color:var(--primary)}
.samples-main{padding-top:4rem}.samples-intro{max-width:780px;margin-bottom:2.8rem}
.samples-intro h1{font-size:clamp(3rem,7vw,5.6rem);margin-bottom:1.5rem}.samples-intro>p:not(.eyebrow){font-size:1.05rem;max-width:670px;color:var(--muted)}.samples-intro .samples-intro-note{font-size:.8rem}
.samples-player-section{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto 1fr;column-gap:5rem;row-gap:1.5rem;align-items:start;padding:4.5rem 0;scroll-margin-top:1rem}
.samples-selection{grid-column:1;grid-row:1;display:flex;gap:.5rem;flex-wrap:wrap;margin:0}
.samples-selection a{font-size:.72rem;text-decoration:none;border:1px solid var(--line);border-radius:24px;padding:.6rem .85rem;min-height:44px;display:inline-flex;align-items:center}
.samples-selection a[aria-current]{background:var(--primary);border-color:var(--primary);color:#fff}
.samples-player-copy{grid-column:1;grid-row:2;min-width:0}.samples-player-copy h2{font-size:3.7rem;line-height:1.12;margin:1rem 0 1.5rem}
.samples-player-copy>p{font-size:.95rem;color:var(--muted)}.samples-player-copy .samples-player-note{font-size:.8rem;margin-top:1.5rem}
.sample-qr{display:flex;gap:1.2rem;align-items:center;margin-top:2rem}.sample-qr img{background:white;border:1px solid var(--line);border-radius:8px;padding:7px;width:145px;height:145px;flex-shrink:0}
.sample-qr strong{font-size:.86rem}.sample-qr p{font-size:.8rem;color:var(--muted);margin:.5rem 0}.sample-qr a{font-size:.76rem;color:var(--primary)}
.samples-phone{grid-column:2;grid-row:1 / span 2;border:9px solid #292a2b;border-radius:46px;background:var(--bg);height:810px;overflow:hidden;box-shadow:0 32px 75px #302d2926;min-width:0}
.samples-phone-bar{display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 22px;font:650 11px system-ui;background:var(--surface)}
.samples-phone iframe{border:0;display:block;width:100%;height:calc(100% - 28px);background:var(--bg)}
.sample-selection-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.samples-fair{display:grid;grid-template-columns:1fr 270px;gap:4rem;align-items:center;background:var(--soft);padding:3rem;border-radius:16px}.samples-fair h2{font-size:3rem;margin:1rem 0 1.3rem}
.samples-fair p{font-size:.9rem;color:var(--muted);max-width:660px}.samples-fair .button{font-size:.8rem}.samples-fair figure{margin:0;text-align:center}
.samples-fair img{background:white;border-radius:10px;padding:12px;max-width:100%;height:auto}.samples-fair figcaption{font-size:.75rem;margin-top:.7rem;color:var(--muted)}
.samples-outro{padding:4rem 0;max-width:800px}.samples-outro h2{font-size:3rem}.samples-outro p{font-size:.95rem;color:var(--muted)}
.samples-outro .button{margin-right:1rem;margin-bottom:1rem;font-size:.8rem}.samples-outro .text-link{font-size:.8rem}
@media(max-width:1050px){.samples-player-section{column-gap:2.5rem;grid-template-columns:minmax(0,1fr) 390px}.samples-player-copy h2{font-size:3rem}.sample-card-copy{padding:1.2rem 1.2rem .75rem}.sample-image-credit{padding-inline:1.2rem}.sample-card-copy h3{font-size:1.55rem}.sample-card-image img{height:190px}.samples-fair{gap:2rem;padding:2rem}}
@media(max-width:800px){.sample-card-grid{grid-template-columns:1fr}.sample-card-link{display:grid;grid-template-columns:1fr 1.3fr}.sample-card-image img{height:100%;min-height:230px}.samples-player-section{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:1.5rem;padding:2.5rem 0}.samples-selection{grid-column:1;grid-row:1}.samples-phone{grid-column:1;grid-row:2;width:min(100%,420px);height:80svh;min-height:560px;max-height:780px;margin:auto}.samples-player-copy{grid-column:1;grid-row:3}.samples-player-copy h2{font-size:2.65rem}.samples-main{padding-top:2.5rem}.samples-intro{margin-bottom:2rem}.samples-fair{grid-template-columns:1fr;gap:2rem}.samples-fair figure{text-align:left}.samples-outro h2{font-size:2.5rem}.samples-outro{padding:3rem 0}}
@media(max-width:500px){.sample-card-link{display:flex}.sample-card-image img{height:200px;min-height:0}.sample-card-copy{padding:1.4rem 1.4rem .75rem}.sample-image-credit{padding-inline:1.4rem}.sample-card-copy h3{font-size:1.9rem}.samples-intro h1{font-size:3.1rem}.samples-intro>p:not(.eyebrow){font-size:.95rem}.samples-fair{padding:1.5rem}.samples-fair h2{font-size:2.5rem}.samples-selection a{font-size:.68rem;padding:.55rem .75rem}.samples-phone{border-width:6px;border-radius:30px}.sample-qr{gap:.9rem}.sample-qr img{width:120px;height:120px}.sample-qr strong{font-size:.8rem}.samples-page .header-content>.text-link{font-size:.72rem}.samples-page .header-content{gap:.7rem}}
@media(prefers-reduced-motion:reduce){.sample-card{transition:none}}

/* Keep the anchor destination focused without framing the whole preview. */
.samples-player-section:focus{outline:none}