/* Shared public demonstrations in the existing navy, ivory and gold identity. */
.theempath-demo, .theempath-demo-references { min-width: 0; padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--color-border-soft); border-radius: var(--radius-card); background: var(--color-pearl); }
.theempath-demo h2, .theempath-demo-references h2 { margin-bottom: .65rem; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.theempath-demo__example { margin-bottom: .75rem; color: var(--color-navy-soft); font-size: .8rem; }
.theempath-demo__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .6rem; background: var(--color-navy); }
.theempath-demo__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .4rem; padding: .75rem; background: radial-gradient(ellipse at 50% 10%, #38516f, transparent 75%), var(--color-navy-deep); color: var(--color-ivory); text-align: center; }
.theempath-demo__ornament { color: var(--color-gold-light); font-size: 1.5rem; line-height: 1; }
.theempath-demo__poster-title { font: 500 clamp(.9rem, 1.6vw, 1.5rem)/1.2 Georgia, serif; }
.theempath-demo__status { color: var(--color-gold-light); font-size: .85rem; line-height: 1.25; }
.theempath-demo__play { max-width: 100%; min-height: 44px; margin-top: .2rem; padding: .45rem .7rem; border: 1px solid var(--color-gold-light); border-radius: .4rem; background: var(--color-gold-light); color: var(--color-navy-deep); cursor: pointer; font-size: .85rem; line-height: 1.3; }
.theempath-demo__play[hidden] { display: none; }
.theempath-demo__play:hover { background: var(--color-ivory); }
.theempath-site .theempath-demo__play:focus-visible { outline: 3px solid var(--color-ivory); outline-offset: 3px; }
.theempath-demo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.theempath-demo__frame:focus-within { outline: 3px solid var(--color-navy); outline-offset: 4px; }
.theempath-demo__caption { margin: 1rem 0 0; font-size: .95rem; line-height: 1.55; }
.theempath-demo__privacy { margin: .75rem 0 0; color: var(--color-navy-soft); font-size: .8rem; line-height: 1.5; }
.theempath-demo__fallback { margin: .5rem 0 0; font-size: .9rem; }
.theempath-demo__fallback a { display: inline-block; padding-block: .3rem; }
.theempath-demo-home { display: block; min-width: 0; }
.theempath-demo-home > h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.theempath-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.theempath-demo--compact { padding: 0; border: 0; background: transparent; }
.theempath-demo--compact h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.theempath-demo--compact .theempath-demo__poster { gap: .25rem; padding: .5rem; }
.theempath-demo--compact .theempath-demo__poster-title { font-size: .95rem; }
.theempath-demo--compact .theempath-demo__ornament { font-size: 1rem; }
.theempath-demo--compact .theempath-demo__status { font-size: .75rem; }
.theempath-demo--compact .theempath-demo__poster:has(.theempath-demo__play) :is(.theempath-demo__ornament, .theempath-demo__status) { display: none; }
.theempath-demo--compact .theempath-demo__caption { margin-top: .65rem; font-size: .85rem; }
.theempath-demo-references ul { margin-bottom: 0; padding-left: 1.25rem; }
.theempath-demo-references a { display: inline-block; padding-block: .35rem; }
.theempath-commerce .summary .theempath-demo, .theempath-commerce .summary .theempath-demo-references { margin-block: 1.25rem; clear: both; }
@media (max-width: 48rem) { .theempath-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
@media (max-width: 30rem) { .theempath-demo__poster:has(.theempath-demo__play) :is(.theempath-demo__ornament, .theempath-demo__status) { display: none; } }
@media print { .theempath-demo__play { display: none; } }