/* Original CinematicProof CSS, with class names isolated from the existing site. */
.film-difference-section { width: 100%; max-width: min(1320px, 100% - 80px); margin: 0 auto; padding: 110px 0 80px; position: relative; }
.film-difference-ambientLight { pointer-events: none; z-index: 0; filter: blur(60px); background: radial-gradient(at 60% 40%, rgba(255,77,139,.07) 0%, rgba(245,200,150,.03) 45%, transparent 75%); width: 85%; height: 60%; position: absolute; top: 15%; left: 50%; transform: translate(-50%); }
.film-difference-heading { z-index: 1; text-align: center; max-width: 820px; margin: 0 auto 56px; position: relative; }
.film-difference-eyebrowShell { background: #ffffff0a; border: 1px solid #ffffff14; border-radius: 999px; margin-bottom: 18px; padding: 2px; display: inline-flex; }
.film-difference-eyebrow { text-transform: uppercase; letter-spacing: .12em; color: var(--rose-soft,#ff7ba8); background: rgba(24,25,28,.85); border-radius: 999px; align-items: center; gap: 8px; padding: 5px 14px; font-size: 11px; font-weight: 600; display: inline-flex; box-shadow: #ffffff14 0 1px 1px inset; }
.film-difference-eyebrowPulse { background: var(--rose-bright,#ff4d8b); width: 6px; height: 6px; box-shadow: 0 0 10px var(--rose-bright,#ff4d8b); border-radius: 50%; animation: 2.4s cubic-bezier(.2,.8,.2,1) infinite film-difference-pulse-ring; }
@keyframes film-difference-pulse-ring { 0%,100% { opacity: .8; transform: scale(.95); } 50% { opacity: 1; filter: drop-shadow(#ff4d8b 0 0 4px); transform: scale(1.3); } }
.film-difference-title { letter-spacing: -.02em; color: var(--text-bright,#fff); margin: 0 0 16px; font-size: clamp(32px,3.8vw,48px); font-weight: 700; line-height: 1.15; }
.film-difference-title em { color: var(--rose-bright,#ff4d8b); font-family: inherit; font-style: italic; }
.film-difference-intro { color: var(--text-soft,#ddd8dc); max-width: 680px; margin: 0 auto; font-size: clamp(16px,1.7vw,19px); line-height: 1.55; }
.film-difference-bentoGrid { z-index: 1; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; display: grid; position: relative; }
.film-difference-cardBadShell { background: #ffffff08; border: 1px solid #ffffff0f; border-radius: 20px; padding: 3px; transition: border-color .3s cubic-bezier(.16,1,.3,1); position: relative; }
.film-difference-cardBadShell:hover { border-color: #ffffff1f; }
.film-difference-cardBad { background: radial-gradient(at 0 0, rgba(34,35,40,.7) 0%, rgba(20,21,24,.95) 100%); border-radius: 17px; flex-direction: column; justify-content: space-between; height: 100%; padding: 34px 30px; display: flex; position: relative; box-shadow: #ffffff0d 0 1px 1px inset; }
.film-difference-cardGoodShell { background: radial-gradient(650px circle at var(--spot-x,50%) var(--spot-y,30%), #ff4d8b38 0%, #f5c89614 35%, #ffffff0a 100%); border: 1px solid rgba(255,77,139,.35); border-radius: 20px; padding: 3px; transition: border-color .3s, box-shadow .3s; position: relative; box-shadow: rgba(255,77,139,.14) 0 12px 40px -12px; }
.film-difference-cardGoodShell:hover { border-color: rgba(255,77,139,.55); box-shadow: rgba(255,77,139,.24) 0 16px 50px -10px; }
.film-difference-cardGood { background: radial-gradient(at 100% 0, rgba(38,32,36,.85) 0%, rgba(24,25,28,.96) 55%, rgba(20,21,24,.98) 100%); border-radius: 17px; flex-direction: column; justify-content: space-between; height: 100%; padding: 34px 30px; display: flex; position: relative; box-shadow: #ffffff1f 0 1px 1px inset; }
.film-difference-cardHeader { margin-bottom: 22px; }
.film-difference-badgeBad { text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted,#8a8590); background: #ffffff0a; border: 1px solid #ffffff12; border-radius: 999px; align-items: center; gap: 6px; padding: 5px 12px; font-size: 11px; font-weight: 600; display: inline-flex; }
.film-difference-badgeGood { text-transform: uppercase; letter-spacing: .08em; color: var(--rose-bright,#ff4d8b); background: rgba(255,77,139,.12); border: 1px solid rgba(255,77,139,.35); border-radius: 999px; align-items: center; gap: 7px; padding: 5px 12px; font-size: 11px; font-weight: 600; display: inline-flex; box-shadow: #ffffff1a 0 1px inset; }
.film-difference-badgeDot { background: var(--rose-bright,#ff4d8b); width: 6px; height: 6px; box-shadow: 0 0 8px var(--rose-bright,#ff4d8b); border-radius: 50%; }
.film-difference-cardTitle { letter-spacing: -.015em; color: var(--text-bright,#fff); margin: 14px 0 8px; font-size: 24px; font-weight: 700; }
.film-difference-cardDesc { color: var(--text-soft,#ddd8dc); margin: 0; font-size: 14.5px; line-height: 1.5; }
.film-difference-visualIndicator { border-radius: 10px; justify-content: space-between; align-items: center; margin: 18px 0 22px; padding: 10px 14px; display: flex; }
.film-difference-visualBad { background: #ffffff08; border: 1px dashed #ffffff1a; }
.film-difference-visualGood { background: rgba(255,77,139,.06); border: 1px solid rgba(255,77,139,.22); box-shadow: #ffffff0f 0 1px inset; }
.film-difference-visualMeta { letter-spacing: .02em; align-items: center; gap: 9px; font-size: 12px; display: flex; }
.film-difference-visualBad .film-difference-visualMeta { color: var(--text-muted,#8a8590); }
.film-difference-visualGood .film-difference-visualMeta { color: var(--rose-soft,#ff7ba8); font-weight: 500; }
.film-difference-flatline { opacity: .4; align-items: center; width: 44px; height: 14px; display: inline-flex; }
.film-difference-flatline svg { width: 100%; height: 100%; }
.film-difference-waveform { align-items: flex-end; gap: 3px; height: 14px; display: inline-flex; }
.film-difference-waveBar { background: var(--rose-bright,#ff4d8b); border-radius: 2px; width: 3px; animation: 1.2s ease-in-out infinite alternate film-difference-equalize; }
.film-difference-waveBar:first-child { height: 6px; animation-delay: .1s; }
.film-difference-waveBar:nth-child(2) { height: 13px; animation-delay: .35s; }
.film-difference-waveBar:nth-child(3) { height: 9px; animation-delay: .18s; }
.film-difference-waveBar:nth-child(4) { height: 14px; animation-delay: .5s; }
.film-difference-waveBar:nth-child(5) { height: 8px; animation-delay: .28s; }
@keyframes film-difference-equalize { 0% { opacity: .6; transform: scaleY(.4); } 100% { opacity: 1; transform: scaleY(1); } }
.film-difference-codecTag { letter-spacing: .06em; text-transform: uppercase; color: var(--warm-amber,#f5c896); background: rgba(245,200,150,.1); border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; }
.film-difference-itemList { flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; display: flex; }
.film-difference-itemBad { color: var(--text-muted,#8a8590); align-items: flex-start; gap: 13px; font-size: 14.5px; line-height: 1.45; transition: color .2s; display: flex; }
.film-difference-itemGood { color: var(--text-bright,#fff); align-items: flex-start; gap: 13px; font-size: 14.5px; font-weight: 500; line-height: 1.45; transition: transform .2s, color .2s; display: flex; }
.film-difference-itemGood:hover { color: #fff; transform: translate(4px); }
.film-difference-markerBad { color: #ffffff66; background: #ffffff0a; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 22px; height: 22px; margin-top: 1px; font-size: 11px; font-weight: 700; display: inline-flex; }
.film-difference-markerGood { width: 22px; height: 22px; color: var(--rose-bright,#ff4d8b); background: rgba(255,77,139,.18); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; margin-top: 1px; font-size: 12px; font-weight: 700; display: inline-flex; box-shadow: rgba(255,77,139,.28) 0 0 10px; }
.film-difference-footnoteBad { color: var(--text-muted,#8a8590); border-top: 1px solid #ffffff0f; margin-top: 26px; padding-top: 16px; font-size: 12.5px; line-height: 1.4; }
.film-difference-footnoteGood { color: var(--rose-soft,#ff7ba8); border-top: 1px solid rgba(255,77,139,.22); margin-top: 26px; padding-top: 16px; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.film-difference-proofRail { z-index: 1; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 0; padding: 0; list-style: none; display: grid; position: relative; }
.film-difference-proofTile { background: #ffffff0a; border: 1px solid #ffffff12; border-radius: 16px; padding: 2px; transition: transform .26s cubic-bezier(.16,1,.3,1), border-color .26s, box-shadow .26s; position: relative; }
.film-difference-proofTile:hover { border-color: rgba(255,77,139,.35); transform: translateY(-3px); box-shadow: rgba(255,77,139,.15) 0 8px 24px -6px; }
.film-difference-proofInner { background: rgba(28,29,33,.85); border-radius: 14px; flex-direction: column; gap: 5px; height: 100%; padding: 20px 22px; display: flex; box-shadow: #ffffff14 0 1px 1px inset; }
.film-difference-proofHeader { justify-content: space-between; align-items: center; margin-bottom: 2px; display: flex; }
.film-difference-proofBadge { text-transform: uppercase; letter-spacing: .1em; color: var(--rose-soft,#ff7ba8); background: rgba(255,77,139,.1); border: 1px solid rgba(255,77,139,.2); border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
.film-difference-proofTitle { letter-spacing: -.015em; color: var(--text-bright,#fff); font-size: 16px; font-weight: 700; }
.film-difference-proofDesc { color: var(--text-soft,#ddd8dc); font-size: 13px; line-height: 1.4; }
@media (max-width: 980px) {
  .film-difference-bentoGrid { grid-template-columns: 1fr; gap: 20px; }
  .film-difference-proofRail { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .film-difference-section { padding: 80px 0 60px; }
  .film-difference-heading { margin-bottom: 40px; }
}
@media (max-width: 540px) {
  .film-difference-section { max-width: calc(100% - 32px); padding: 60px 0 44px; }
  .film-difference-cardBad, .film-difference-cardGood { padding: 24px 18px; }
  .film-difference-cardTitle { font-size: 20px; }
  .film-difference-visualIndicator { flex-direction: column; align-items: flex-start; gap: 8px; }
  .film-difference-proofRail { grid-template-columns: 1fr; gap: 12px; }
  .film-difference-proofInner { padding: 16px 18px; }
  .film-difference-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-difference-eyebrowPulse, .film-difference-waveBar { animation: none; }
  .film-difference-cardGoodShell, .film-difference-proofTile, .film-difference-itemGood { transition: none; }
}
/* Restore reference-only inherited typography and prevent the site's sticky header
   rule from affecting the header inside this copied section. */
.film-difference-section { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; isolation: isolate; scroll-margin-top: 125px; }
.film-difference-section::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: #202125; }
.film-difference-heading { display: block; top: auto; padding: 0; background: none; border: 0; backdrop-filter: none; }
.film-difference-proofTile { line-height: 1.6; }
.film-difference-autoTag { font-size: 11px; color: #ffffff4d; letter-spacing: .04em; }
@media (max-width: 800px) { .film-difference-section { scroll-margin-top: 220px; } }