@font-face {
  font-family: Caveat;
  src: url('/assets/proof/caveat.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
.phone-proof {
  --proof-ink: #81dec0;
  position: relative;
  width: 100%;
  padding-bottom: 55px;
  margin: 0;
  isolation: isolate;
}
.proof-handset {
  position: relative;
  width: 78%;
  margin-left: auto;
  border: 7px solid #182632;
  border-radius: 38px;
  box-shadow: 0 0 0 1px #a9b7be, 3px 3px 0 2px #526878, 17px 25px 50px #0003;
  background: #fff;
}
.proof-handset::before, .proof-handset::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10px;
  top: 18%;
  width: 3px;
  height: 6%;
  background: #6b7c88;
  border-radius: 2px;
}
.proof-handset::after { top: 27%; height: 9%; }
.proof-handset img { width: 100%; height: auto; border-radius: 30px; }
.proof-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proof-ring ellipse, .proof-arrow path {
  fill: none;
  stroke: var(--proof-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.proof-ring .ink-echo { opacity: .45; stroke-width: 1.2; }
.proof-arrow { position: absolute; left: 0; bottom: 0; width: 100%; height: 18%; overflow: visible; }
.proof-ink {
  position: absolute;
  bottom: -4px;
  left: 3%;
  color: var(--proof-ink);
  font: 600 clamp(1.5rem, 2.2vw, 2.25rem)/1.1 Caveat, cursive;
  transform: rotate(-4deg);
}
.v2-remove { overflow: clip; }
.v2-remove .remove-stage { padding: 84px var(--gutter) 36px; }
.v2-remove .word-slot.proof-scenes { margin: 20px 0; gap: 0; overflow: visible; }
.proof-story { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 5%; min-height: 730px; padding: 40px 0; }
.proof-story .remove-word { font-size: clamp(4.5rem, 9vw, 11rem); }
.proof-story .word-snapchat { font-size: clamp(3rem, 6vw, 7.8rem); }
.proof-story .word-snapchat span span { font-size: .85em; }
.proof-word-mask { padding-bottom: .1em; overflow: hidden; }
.proof-word-mask > span { display: block; }
.proof-keeps { max-width: 340px; margin-top: 22px; color: #a8b9c6; font: 400 clamp(.875rem, 1.2vw, 1.125rem)/1.6 var(--body); letter-spacing: 0; }
.proof-visual { width: min(100%, 415px); justify-self: center; }
.motion-remove .remove-stage { display: flex; height: 100svh; min-height: 0; padding: 78px var(--gutter) 28px; }
.motion-remove .word-slot.proof-scenes { flex: 1; width: 100%; height: auto; margin: 0; position: relative; }
.motion-remove .proof-story { position: absolute; inset: 0; min-height: 0; padding: 0; }
.motion-remove .proof-story .remove-word { position: relative; inset: auto; display: block; }
.motion-remove .proof-visual { width: min(100%, calc((100svh - 160px) * .55), 420px); }
.motion-remove .remove-bottom { flex: none; margin-top: 12px; }
.proof-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 7vw, 120px); align-items: start; }
.proof-comparison > figure > figcaption { margin-top: 24px; font-size: .8125rem; color: var(--muted); }
.proof-comparison .v2-product-phone { width: 78%; margin-left: auto; }
.proof-comparison .product-phone-glass { aspect-ratio: 864 / 1873; }
.guide-proof-caption { margin-top: 24px; text-align: center; font-size: .8125rem; color: var(--muted); }
.guide-instagram-preview .phone-proof, .guide-youtube-preview .phone-proof, .how-youtube-visual .phone-proof { --proof-ink: #087c60; }
.guide-instagram-preview .proof-comparison { margin-top: 50px; }
.guide-provider .phone-proof { max-width: 350px; }
.proof-comparison .proof-ink { margin: 0; color: var(--proof-ink); font-family: Caveat, cursive; font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
@media (min-width: 1600px) {
  .motion-remove .proof-visual { width: min(calc((100svh - 180px) * .55), 470px); }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .proof-story { grid-template-columns: 1fr 1fr; gap: 2%; }
  .proof-story .remove-word { font-size: 9.5vw; }
  .proof-story .word-snapchat { font-size: 6.8vw; }
  .motion-remove .proof-visual { width: min(100%, 350px); }
}
@media (max-width: 767px) {
  .v2-remove .remove-stage { padding: 65px var(--gutter) 35px; }
  .v2-remove .remove-stage > h2 { font-size: 1rem; }
  .proof-story { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 45px 0 70px; }
  .proof-story .remove-word { font-size: 21vw; text-align: center; }
  .proof-story .word-snapchat { font-size: 13.5vw; }
  .proof-story .word-provider { justify-content: center; margin-top: 12px; font-size: .6875rem; }
  .proof-keeps { margin: 10px auto 0; max-width: 100%; font-size: .75rem; }
  .proof-visual { width: min(90%, 340px); }
  .phone-proof { padding-bottom: 38px; }
  .proof-handset { border-width: 5px; border-radius: 28px; }
  .proof-handset img { border-radius: 22px; }
  .proof-ink { font-size: clamp(1.1rem, 5.5vw, 1.5rem); white-space: nowrap; }
  .proof-ring ellipse, .proof-arrow path { stroke-width: 2.3; }
  .proof-ring .ink-echo { stroke-width: 1; }
  .motion-remove .remove-stage { padding: 68px var(--gutter) 24px; }
  .motion-remove .word-slot.proof-scenes { margin-top: 24px; }
  .motion-remove .proof-story { --proof-reserve: 360px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
  .motion-remove .proof-story:has(.word-snapchat) { --proof-reserve: 400px; }
  .motion-remove .proof-visual { width: min(100%, calc((100svh - var(--proof-reserve)) * .54), 350px); }
  .motion-remove .remove-bottom { justify-content: space-between; font-size: .625rem; margin-top: 8px; }
  .motion-remove .remove-bottom p:last-child { max-width: 150px; }
  .proof-comparison { gap: 18px; }
  .proof-comparison .proof-ink { font-size: 1.25rem; }
}
.v2-large-text .proof-story { grid-template-columns: 1fr; gap: 35px; }
.v2-large-text .proof-story .remove-word { text-align: left; font-size: 12vw; }
.v2-large-text .proof-story .word-snapchat { font-size: 9vw; }
.v2-large-text .proof-keeps { font-size: 1rem; margin-left: 0; }
.v2-large-text .proof-visual { width: min(100%, 420px); }
.brand-film-dialog { width: min(calc(100% - 32px), 480px); max-height: 94svh; padding: 12px; }
.brand-film-dialog video { aspect-ratio: 9 / 16; width: 100%; max-height: calc(94svh - 85px); object-fit: contain; }
/* V3 annotations: irregular stroke, arrow, then individually revealed letters. */
.proof-ring .ink-circle { fill:none; stroke:var(--proof-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.ink-letter { display:inline-block; }
.proof-ring { z-index:3; pointer-events:none; }
.proof-arrow,.proof-ink { z-index:4; pointer-events:none; }
.proof-handset video[data-after-video] { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:30px; opacity:0; }
.proof-handset video[data-after-video][data-ready] { opacity:1; }
.guide-snapchat-preview .phone-proof { --proof-ink:#287158; }
.guide-snapchat-preview .proof-comparison { margin-top:45px; }
.v3-feature-companion { display:grid; grid-template-columns:1fr 1fr; gap:10%; margin-top:50px; align-items:start; }
.v3-feature-companion>figure { max-width:380px; margin:auto; }
.v3-feature-companion>div>figure { max-width:330px; margin:30px auto 0; }
.v3-feature-companion img { width:100%; border-radius:24px; }
.v3-feature-companion figcaption { font-size:.8rem; margin-top:18px; color:var(--muted); }
@media(max-width:767px) {
 .proof-ring .ink-circle { stroke-width:2.4; }
 .proof-handset video[data-after-video] { border-radius:22px; }
 .proof-comparison { grid-template-columns:1fr; gap:40px; }
 .proof-comparison>figure,.proof-comparison>div { width:min(100%,340px); margin:auto; }
 .v3-feature-companion { grid-template-columns:1fr; gap:40px; }
 .v3-feature-companion>figure,.v3-feature-companion>div>figure { max-width:300px; }
}
.proof-ring .ink-circle { stroke:#258965; }
.v3-story-snapchat .v3-before .proof-handset::after,
.guide-snapchat-preview .product-phone-glass::after {
 content:''; position:absolute; z-index:1; pointer-events:none;
 left:1.39%; top:7.31%; width:11.11%; height:auto; aspect-ratio:1;
 border-radius:50%; background:#fff;
}
.guide-snapchat-preview .product-phone-glass { position:relative; }
